色彩 - 上
~
1.色彩的由来
我看过对色彩最有意思的定义:色彩是视锥细胞对不同波长的光的测量。说白了色彩是人对光的一种感觉。
在我们的生活中,有物体自身发光比如显示器,我们可以直接看到它的色彩;还有很多物体本身不发光,比如书籍、布料,需要光线照射到物体上反射到眼睛,我们才会感知到色彩。
所以说,有光才会有颜色,眼睛和大脑的配合使人产生对于色彩的认知。
2.几种常用的颜色模式
发光体的颜色模式-RGB模式
R(red)红;G(green)绿;B(blue)蓝
红绿蓝是三个原色,原色可以叠加出其他颜色,而其他颜色不能叠加出原色
三个通道范围0~255,如R255G0B0红色最大值绿色蓝色都是0那么就是红色,R0G0B0三个通道都不发光是黑色,R255G255B255三个通道都发出最亮的光是白色
RGB模式是一种加色模式,可以理解为光的叠加。红+绿=黄(#FFFF00)、红+蓝=品红(#FF00FF)、绿+蓝=青(#00FFFF)
下面说RGB与十六进制颜色码(HEX)的转换关系
十六进制颜色码通常写为#加六位,前两位对应R、中间两位对应G、后两位对应B
最大值FF对应255,最小值00对应0
不发光体的颜色模式-CMYK模式
C(cyan);M(magenta);Y(yellow);K(black)
CMYK模式是一种减色模式,可以理解为光吸收(减掉)了其他波长的光进行反射。所以印刷用这种模式,C减掉了R,M减掉了G,Y减掉了B。K的存在因为CMY混不出黑色,所以加入black,为了不与blue混淆用K。
四个通道范围0~100%
感知度强的两种颜色模式-HSB/HSV和HSL
给一个色值无论是RGB还是HEX都需要去找个拾色器才能知道是什么颜色,人习惯于通过颜色名称、重一点淡一点亮一点暗一点来描述颜色,下面说符合人们习惯的颜色模式:HSB/HSV和HSL
HSB和HSV是可以理解为同一种色彩模式
H(hue)色相;S(saturation)饱和度;B(brightness)明度
H(hue)色相;S(saturation)饱和度;V(value)明度值
HSL
H(hue)色相;S(saturation)饱和度;L(lightness)亮度
两者因为缩写相似经常被搞混,差异如下:
H:一样
S:HSB/HSV中的S可以理解为深浅(白→基色)
HSL中的S(灰→基色)
B、V/L:HSB/HSV中的B/V可以理解为明暗(黑→基色)
HSL中的L(黑→白)
可见HSB/HSV更符合人的直觉
H范围0~360°,S范围0~100,B、V/L范围0~100
接近人眼的颜色模式-LAB
L(Luminosity)明度,A红绿色,B黄蓝色(不是RGB里的颜色)
l是照度,正向白(最强)负向黑(最弱);正向a为红、负向a为绿;正向b为黄、负向b为蓝
L范围0~100,A范围127~-128,B范围127~-128
这种颜色模式色域广,这种模式和图层样式调整图层结合去用,在一些情况下有妙用
3.色彩的显示
这里要先说下色域的概念:色彩空间,是另一种形式的颜色模式。举例如下图
颜色配置文件:描述色域的文件,为了线上线下输入输出的一致性,后缀icc
放一些比较常用的色彩配置文件,同时解释下那些乱七八糟的前缀都大概是什么意思
列举影响色彩显示的几个因素
4.颜色配置的应用
保证设计中颜色配置文件和输出时颜色配置一致,用户的接受终端的支持的色域能够涵盖你的颜色配置文件的色域便可以保证颜色显示不出问题
几个注意事项:
- 养成新建检查颜色配置的习惯
- 颜色配置文件的选择并不是越大越好,适合的才是最好的,要视具体情况而定,比如用户iOS多那从头到尾用DisplayP3肯定没问题
- 这里在说下Ps的几个坑,①Ps默认的display不是苹果的P3,而是调用你工作设备的颜色配置文件②如果不用sRGB比如用DisplayP3那不要“存储为web所用格式”
以上图片仅为示例用图,勿取色用~



















































































