1.光学三原色-红绿蓝

2.色值六位解码原理,引进10位进制与16位进制的换算公式

3.推演出色环中常用12种颜色的六位色值

本期给大家带来的是取色器的常识与取色技巧,让你在实际工作中,取色不在漫无目的的换来换去,纯靠自我感觉。通过阅读本文,你会得到体系化的取色认知。

那么,我们开始进行分解常用的取色面板吧~

rgb色值-作为设计师,这份RGB色值解码,值得收藏!(中)插图

把面板看成二维的平面坐标轴XY,X轴代表度,Y轴代表明度。X轴值越大说明色彩度(S)越高;Y轴值越大说明色彩明度(B)越高。

饱和

颜色由色相H、饱和度S、明度B,三者组合而成。上面XY坐标讲了S和B,下面讲下H。

rgb色值-作为设计师,这份RGB色值解码,值得收藏!(中)插图1

△360度色环

把360度色环平铺,得到下面的色相滑动轴。

rgb色值-作为设计师,这份RGB色值解码,值得收藏!(中)插图2

我们看平铺示意图,当拖动滑块时,取色面板会显示出相应的色相H。

rgb色值-作为设计师,这份RGB色值解码,值得收藏!(中)插图3

上面简单讲述了色相H、饱和度S、明度B分别代表的含义。既然本期给大家带来的是取色器的常识与取色技巧,必然离不开取色器,我们这期着重了解下这四条边的色彩和色值规律。

rgb色值-作为设计师,这份RGB色值解码,值得收藏!(中)插图4

第1条边

颜色的饱和度都为0,有变化的是明度从低到高的提升,从纯黑到纯白色

rgb色值

,并且不带任何色相。

具体分解:

rgb色值-作为设计师,这份RGB色值解码,值得收藏!(中)插图5

可以理解为红绿蓝三个手电筒发出相同的光束聚焦在一起,由于是相同,所以后不会偏色,形成不带色相的灰色,如果红绿蓝都是最亮时,后形成的颜色就是纯白色。

汇聚


亮度

rgb色值-作为设计师,这份RGB色值解码,值得收藏!(中)插图6

如果红绿蓝三个手电筒都开到半亮,汇聚后的纯白色也会往黑色过渡,正好过渡到白色与黑色的中间,此时的色值也正好是#FFFFFF的一半,为#808080。

到这里大家会发现一个规律:第1条边的红绿蓝色值都是相等的。

rgb色值-作为设计师,这份RGB色值解码,值得收藏!(中)插图7

例如大家熟悉的#fffffff,下面拓展出更多的色值。

rgb色值-作为设计师,这份RGB色值解码,值得收藏!(中)插图8

第2条边

rgb色值-作为设计师,这份RGB色值解码,值得收藏!(中)插图9

颜色的明度最高为100,有变化的是饱和度从低到高的提升,从纯白到纯红色。

具体分解:

rgb色值-作为设计师,这份RGB色值解码,值得收藏!(中)插图10

我们先看右上角为纯红色,色值为#FF0000,上期我们讲解到色值的来源,回顾下图。

rgb色值-作为设计师,这份RGB色值解码,值得收藏!(中)插图11

纯红色是因为红色手电筒最亮,绿色和蓝色手电筒没有打开。

rgb色值-作为设计师,这份RGB色值解码,值得收藏!(中)插图12

再看左上角为纯白色,色值为#FFFFFFF,上面我们也提到了,红绿蓝手电筒全开,最亮时,汇聚到一起会呈现出白色。

rgb色值-作为设计师,这份RGB色值解码,值得收藏!(中)插图5

到这里

rgb色值

,我们发现左上角和右上角的颜色里,红色始终最亮为100,变化的是绿色和蓝色从0到100间的递进。

换句话说,第2条线从左到右的变化,即绿色和蓝色从0到100间的变化,受绿色和蓝色的影响。

上面拿的红色系进行讲解的,如果颜色在绿色系上,第2条线的变化会受红色和蓝色的影响,绿色始终是最亮为100。蓝色系也亦之,受红色和绿色的影响。

第3条边

rgb色值-作为设计师,这份RGB色值解码,值得收藏!(中)插图13

颜色的饱和度最高为100,有变化的是明度从低到高的提升。

这里引入一个感念,凡是红绿蓝三个灯都亮时,聚焦产生的颜色都不是正纯色,会带有杂色,因此饱和度达不到100。因此第3条边上的颜色只有一种颜色或者两种颜色组合而成。

rgb色值-作为设计师,这份RGB色值解码,值得收藏!(中)插图10

纯红色,色值为#FF0000,代表只由红色一种颜色组成。

rgb色值-作为设计师,这份RGB色值解码,值得收藏!(中)插图14

青色,色值为#00FFFF,代表只由绿色和蓝色两种颜色组成。

rgb色值-作为设计师,这份RGB色值解码,值得收藏!(中)插图15

右下角的颜色色值为#000000,发现第3条边的上到下的变化,即这一种或两种颜色变化,色值越高颜色明度越高,如#FF;色值越低颜色明度越低,如#00。

rgb色值-作为设计师,这份RGB色值解码,值得收藏!(中)插图16

第4条边

rgb色值-作为设计师,这份RGB色值解码,值得收藏!(中)插图17

颜色的明度最低为0,有变化的是饱和度从低到高的提升。但会发现从左到右一直都是黑色,颜色并没有显性的变化。我们还是拿手电筒进行类比。

rgb色值-作为设计师,这份RGB色值解码,值得收藏!(中)插图18

最左面的点是三个手电筒都没开,因此很好理解,就是黑色。

rgb色值-作为设计师,这份RGB色值解码,值得收藏!(中)插图19

最右面的点是其中一个手电筒打开了,但是没电了,虽然表象与没打开一致,但是本质不一致,最终也显示黑色。如果有一丝丝的亮度,饱和度就是最高为100。所以右下角颜色的特质是高饱和度、低明度。

rgb色值-作为设计师,这份RGB色值解码,值得收藏!(中)插图20

到这里,4条边的特性我们分析完了,最后做下总结,方便大家理解和记忆:

rgb色值-作为设计师,这份RGB色值解码,值得收藏!(中)插图21

第1条边:从0到F,3组色值都相同

第2条边:3组色值,至少有1组为FF

第3条边:3组色值,至少有1组为00

第4条边:3组色值,全为0

下期见~

原创不易,点赞支持!

END

文章 | 宋长坤

图文 | 不可商用