首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >可视化基础——色彩篇

可视化基础——色彩篇

作者头像
数据小磨坊
发布于 2018-04-10 02:29:27
发布于 2018-04-10 02:29:27
1.5K0
举报
文章被收录于专栏:数据小魔方数据小魔方

今天要跟大家聊一聊关于颜色的话题。

▼▼▼▼▼▼

数据可视化的学习需要了解一些简单的色彩理论知识。

对于色彩小编也所知不多,毕竟配色对于专业的设计师来讲都是一件挺头疼的事情,更别说我们这些小白了,今天只能给大家讲一点浅显的色彩知识。

首先给大家科普一下生活中最常用的几种色彩格式:

日常生活中,我们接触最多的颜色格式有RGB格式、CMYK格式、HSL格式、HEX格式。

常见颜色格式

RGB颜色格式由红(red)、绿(green)蓝(blue)三原色构成,是一种显示器颜色标准,我们日常使用的电子设备屏幕多为这种格式颜色。

三原色通过混合产生了二次色,二次色继续混合,产生了三次色。最后形成我们看到的由12 种基本颜色组成的色轮。

CMYK格式主要用于出版及印刷行业,C指的是青色(Cyan),M指的是洋红色(Magenta) ,Y代表黄色(Yellow) ,K代表黑色(black)。

HSLHSB)颜色格式

HSL色彩模式是工业界的一种颜色标准,是通过对色相(H)、饱和度(S)、明度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。

HEX颜色格式是一种由十六进制代码表示的颜色格式。

显示色值格式为(#F8F8F8)

色彩给人带来的温度感觉

暖色(Warm Colors)

暖色包含红、橙、黄以及这三种颜色的变种。它们分别是烈焰、落叶以及日出和日落的颜色,通常象征活力、激情和积极。

冷色(Cool Colors)

冷色系包含绿色、蓝色和紫色,相对暖色,强度要弱。它们是夜、水和自然的代表颜色,通常给人感觉是舒缓,放松,以及有一点冷淡。

中性色

中性色通常用作设计作品的背景色,主要有黑、白、灰、棕色等。

常用的色彩搭配类型

色彩是一门博大精深的学问,以上所述只涉及一些皮毛,当然如果我们只是想在日常的文案写作、商务演示、数据分析过程中少犯一些配色上的错误,除了自己需要了解基本配色知识之外,借鉴和使用现有的优秀配色方案也是一个不错的选择。

在这里给大家推荐一些不错的配色网站,里面会有很多现成的免费配色方案,如果能够加以运用,也会大大提升自己工作的质量和专业化程度。

配色网站:

https://kuler.adobe.com/create/color-wheel/

http://color.aurlien.net/

http://www.0to255.com

http://www.colorschemedesigner.com/

http://colorblender.com/

取色工具:

如果你看到一款非常喜欢的配色方案,想拿来自己用怎么办呢?当然你首先得知道这个颜色的色值(可以是不同颜色格式标识的色值),然后才能利用软件的调色板调出同样的颜色。在这里给大家推荐一款简单好用、绿色免安装的取色器软件ColorPix.exe,百度搜索就可以下载并免费使用。

配色资料:

下面是送给大家的有关配色方面的参考资料:

《综合配色宝典2012》

《项目配色》

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2015-12-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 数据小魔方 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
超全可视化基础讲解,这一次,拿下色彩搭配~~
当您筛选新闻提要时,什么往往会引起您的注意呢?视频、动画、GIF图片、图片?又或者其他视觉内容?
DataCharm
2022/02/17
1.5K0
超全可视化基础讲解,这一次,拿下色彩搭配~~
色彩空间RGB/CMYK/HSL/HSB/HSV/Lab/YUV基础理论及转换方法:RGB与YUV
之前做个设计,现在从事IT,脑子里面关于RGB,RGBA,CMY,CMYK,YUV,但是具体理论还是不扎实。若干年前之前写过《水煮RGB与CMYK色彩模型—色彩与光学相关物理理论浅叙》《三色视者与四色视者身后的理论基础:色彩原理》
周陆军
2019/08/11
4.4K0
色彩知识
色深用 2 的幂指数来表示,bit 数愈高,色深值便愈高,影像所能表现的色彩也愈多。
Kiba518
2020/07/21
2.2K0
色彩空间RGB/CMYK/HSL/HSB/HSV/Lab/YUV基础理论及转换方法:RGB与YUV
之前做个设计,现在从事IT,脑子里面关于RGB,RGBA,CMY,CMYK,YUV,但是具体理论还是不扎实。若干年前之前写过《水煮RGB与CMYK色彩模型—色彩与光学相关物理理论浅叙》《三色视者与四色视者身后的理论基础:色彩原理》
周陆军博客
2023/04/22
9420
加减法你会,但是你知道色彩里竟然也隐藏着加减法吗?
什么是三原色? What are the three primary colors? 后来才发现,哪种三原色都是对的,而这完全取决于你在做什么。换句话说,如果你正在谈论绘画,那么红色,黄色和蓝色是你的
magic2728
2019/11/14
7410
加减法你会,但是你知道色彩里竟然也隐藏着加减法吗?
设计师必须了解的美术基础
任何分类的设计师都需要有一定的美术基础,甚至也要有一定的手绘能力。我们在用电脑设计图形的时候其实也在潜移默化地在使用我们储存在大脑中的美术知识和审美,即使再先进的人工智能,也不能代替设计师的审美和美术知识。说到底软件仅仅是工具而已。要想提高你图形的审美和设计感,那么就需要补一下美术基础的课了。互联网视觉设计中手绘在互联网设计中占的比重也在逐渐增多。对于我们UI设计师来说手绘也成为一个绕不过去的技能,但是不要紧张:我们不需要成为手绘大神或者插画师,只需要掌握一定的美术知识再加练习即可。那么如果我们掌握了美术知识并可以画出还可以的画,对我们会有什么好处呢?
宇相
2019/09/19
9440
设计师必须了解的美术基础
「进击的前端工程师」CSS色彩揭秘
每每提及色彩,我总会想起苏轼的一年好景君须记,正是橙黄橘绿时,白居易的日出江花红胜火,春来江水绿如蓝,朱熹的等闲识得东风面,万紫千红总是春。
童欧巴
2020/03/30
7020
「Adobe国际认证」设计小白必须了解的色彩理论,绝对干货满满
有时,两种或三种颜色搭配在一起看起来很合适。我们却无法解释为什么,但我们知道这是对的。
IT胶囊
2021/07/26
1.2K0
如何在网页设计中正确应用色彩?
以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器。
奔跑的小鹿
2019/06/24
1.2K0
CSS3的颜色特性
CSS3颜色特性 “佛靠金装,人靠衣装”,网页也是如此。随着互联网的迅速发展,一个网页给人们留下的第一印象,既不是它的内容,也不是它的设计, 而是整体颜色。为了能够达到人们的需求,Web设计师除了需要掌握网站制作的技术之外,还必须能够很好地应用 Web颜色。换句话说,网站颜色的使用好坏, 直接影响网站的生存力。 网页色彩的表现原理: 我们知道有256种Web安全颜色,其实这256种颜色是指8位颜色的表现能力,随着科技的发展,现在颜色不局限于8位,16位色彩的总数是65536色,也就是2的16次方,而新增了24位元色彩,也就是2的24次方,即16777216种颜色。32位色就是2的32次方的发色数,即16777216种颜色,不过它增加了256阶颜色的灰度。 32位色和16位色肉眼分辨不出来吗? 如果用两台品牌型号都一样 的显示器, 分别调不同的颜色, 就能看出区别。 而在Web页面的设计中, 颜色主要运用16 进制数值的表示方法, 为了用HTML表现RGB颜色, 使用十六进制数 0 ~ 255, 改为十六进制就是 00 ~ FF, 用RGB的顺序罗列就成为HTML颜色编码。 例如, 在 HTML 编码中“ 000000” 就是指红色( R)、绿色( G) 和蓝色( B) 都没有,就是0状态,也就是黑色。相反“ FFFFFF” 就是就是 红色( R)、 绿色( G) 和蓝色( B)都是 255,也就是白色。显示器是由一个个像素构成,利用电子束来表现色彩。像素把光的三原色: 红色( R)、绿色( G)、蓝色( B) 组合成的色彩 按照科学原理表现出来。 一 像素包含 8 位元色彩的信息量, 有 从 0 ~ 255 的256个单元, 其中 0 是 完全 无光 状态, 255 是最 亮 状态。
py3study
2020/01/09
1.2K0
10分钟辨清色彩模型|多媒体系统导论笔记
视杆细胞 rods :接收灰度信息,在较弱的光线下可以提供对环境的分辨能力(比如夜里看到物体的黑白轮廓)。
KKCHANNEL
2022/09/16
1.8K0
10分钟辨清色彩模型|多媒体系统导论笔记
网站制作中色彩的搭配方法
很多用户在网站制作初期不知道如何运用格调色彩,往往在选色上琢磨不定,今天介绍一下网站制作中色彩运用原则: 一、色彩搭配原则 在选择网页色彩时,除了考虑网站本身的特点外还要遵循一定的艺术规律,从而设计出精美的网页。 1.色彩的鲜明性: 如果一个网站的色彩鲜明,很容易引人注意,会给浏览者耳目一新的感觉。 2.色彩的独特性: 要有与众不同色彩,网页的用色必须要有自己独特的风格,这样才能给人浏览者留下深刻的印象。 3.色彩的艺术性: 网站设计是一种艺术活动,因此必须遵循艺术规律。按照内容决定形式的原则,在考虑网站本身特点的同时,大胆进行艺术创新,设计出既符合网站要求,又具有一定艺术特色的网站。 4.色彩搭配的合理性: 色彩要根据主题来确定,不同的主题选用不同的色彩。例如,用红色体现政府门户网站的威严,用红色或者粉色代表女性网站的柔情等。 二、网页色彩搭配方法 网页配色很重要,网页颜色搭配的是否合理会直接影响到访问者的情绪。好的色彩搭配会给访问者带来很强的视觉冲击力,不恰当的色彩搭配则会让访问者浮躁不安。 1.同种色彩搭配: 同种色彩搭配是指首先选定一种色彩,然后调整其透明度和饱和度,将色彩变淡或加深,而产生新的色彩,这样的页面看起来色彩统一,具有层次感。 2.邻近色彩搭配: 邻近色是指在色环上相邻的颜色,如绿色和蓝色、红色和黄色即互为邻近色。采用邻近色搭配可以里是网页避免色彩杂乱,易于达到页面和谐统一的效果。 3.对比色彩搭配: 一般来说,色彩的三原色(红、黄、蓝)最能体现色彩间的差异。色彩的强烈对比具有视觉诱惑力,能够起到几种实现的作用。对比色可以突出重点,产 生强烈的视觉效果。通过合理使用对比色,能够使网站特色鲜明、重点突出。在设计时,通常以一种颜色为主色调,其对比色作为点缀,以起到画龙点睛的作用。 4.暖色色彩搭配: 暖色色彩搭配是指使用红色橙色黄色集合色等色彩的搭配。这种色调的运用可为网页营造出稳性、和谐和热情的氛围。 5.冷色色彩搭配: 冷色色彩搭配是指使用绿色、蓝色及紫色等色彩的搭配,这种色彩搭配可为网页营造出宁静、清凉和高雅的氛围。冷色点色彩与白色搭配一般会获得较好的视觉效果。 6.有主色的混合色彩搭配: 有主色的混合色彩搭配是指以一种颜色作为主要颜色,同色辅以其他色彩混合搭配,形成缤纷而不杂乱的搭配效果。 7.文字与网页的背景色对比要突出: 文字内容的颜色与网页的背景色对比要突出,底色深,文字的颜色就应浅,以深色的背景衬托浅色的内容(文字或图片);反之,底色淡,文字的颜色就要深些,以浅色的背景衬托深色的内容(文字或图片)。 pageadmin自助建站系统、。
Almost Lover
2019/03/21
1.3K0
UI界面配色方法终极指南!一篇长文搞定所有问题
静电说:要培养对颜色的敏感度,你必须要了解色彩的原理。在这个基础上去感悟,久而久之,色彩会在你手中变的游刃有余。下面这篇终极色彩指南非常值得一看~让我们不妨再系统梳理一下你的配色技巧吧!
用户5009027
2022/05/23
3.2K0
UI界面配色方法终极指南!一篇长文搞定所有问题
写给前端工程师的色彩常识:色彩三属性及其在CSS中的应用
大家好,本篇文章,笔者将给大家聊聊关于设计方面的一些常识,你也许会很奇怪的问,前端工程师有必要了解设计相关的常识吗?那我的答案就是十分有必要。因为我们这个工作岗位做的产品直接面向使用用户,因此用户直观的感受决定着产品的好与坏,其中设计的展现就是给用户的第一印象。为了保证产品的质量,你就避免不了和相关工作岗位的人直接沟通,比如产品经理,设计师,后端工程师等等。
前端达人
2019/09/25
1.7K0
写给前端工程师的色彩常识:色彩三属性及其在CSS中的应用
大屏可视化的2大配色技巧,选对颜色就成功了一半
色彩是通过人的印象或者联想来产生习理上的影响,而配色的作用就是通过改变空间的舒适程度和环境气氛来满足消费者的各方面的要求。
用户7220666
2020/05/08
4.1K0
科研绘图配色
颜色需要有自身的意义。不同的颜色表示不同的分组,相近的颜色表示同一个分组;配色需要展现数据逻辑关系,突出关键数据,比如重要的数据用深色或暖色表示,不重要的数据用浅色或冷色表示。
Twcat_tree
2023/11/30
4K0
科研绘图配色
[UWP]使用Writeable​Bitmap创建HSV色轮
HSV都是一种将RGB色彩模型中的点在圆柱坐标系中的表示法,这种表示法试图做到比RGB基于笛卡尔坐标系的几何结构更加直观。HSV即色相、饱和度、明度(英语:Hue, Saturation, Value),又称HSB,其中B即英语:Brightness。
dino.c
2019/01/18
1.1K0
[UWP]使用Writeable​Bitmap创建HSV色轮
彩色图像色彩空间原理
自然界的各种色彩、人类所感知的色彩以及各种图像设备和计算机软件所使用的颜色可通过色彩空间(Color Space)来描述。
不脱发的程序猿
2021/08/10
1.1K0
颜色空间RGB与HSV(HSL)的转换
一般的3D编程仅仅须要使用RGB颜色空间就好了,但事实上美术人员很多其它的是使用HSV(HSL),由于能够方便的调整饱和度和亮度。
全栈程序员站长
2021/12/17
3.9K0
颜色空间RGB与HSV(HSL)的转换
学会HSB色彩模式,让配色有理有据!
作为一名设计师,每天不免都会和色彩打交道,但有时总会苦恼于色感把握不准,让我们配的色彩,总是“不对味儿”。我结合在近期的一些项目中对于 HSB 色彩模式的应用,与大家分享一些结合 HSB(HSV)色彩模式帮助我们进行配色的理论和技巧。也欢迎大家一起讨论,共同进步。
呆呆敲代码的小Y
2021/10/22
1.8K0
推荐阅读
相关推荐
超全可视化基础讲解,这一次,拿下色彩搭配~~
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档