02月12, 2018

色值视觉扫盲

RGB

RGB在CSS中的标记是RGB(0~255 , 0~255, 0~255)。其中括弧内第一改分割的三组色值恰好就是(R、G、B)的色彩数值。RGB色彩基于加法混色。把0-255的数值当作开灯的亮度来看,0是没有开灯,255就是开到最大。红色开到最大,而其他两个色光不开灯就是RGB(255, 0, 0);当红色开到一半(127, 0, 0)就会变成暗红色。 MacDown logo

RGB色彩以R在上方顺时针排列,而中间产出的混合色彩则是

黄:Yellow

洋红: Magenta

青:Cyan

HSL

色相、饱和度、明度、亮度

色相:(Hue)H

色彩的基本属性,就是平常所说的颜色名称,如红色、黄色

MacDown logo

色相的0度是红色

120度是绿

240度是蓝色。

饱和度(Saturation)S

色彩的纯度,值越高颜色越纯。低则逐渐偏灰,取0-100%的数值。预设色彩都是100%,让色彩不那么鲜艳往0%的方向调整。 MacDown logo

亮度(Luminance)L

将上图想象成一个圆柱。从中间开始,在统一色彩中,通过加白来提高明度;通过加黑来降低明度。以此来产生一系列的色彩变化。 MacDown logo MacDown logo

了解HSL三个数值的差距之后,比如调取一个黄色就是(60, 100%, 50%)。如果需要鹅黄,则需要往黄色增加白色,需要调L的值,如果需要调橙色,则需要调取H往R的方向调整即可。

明度(Value )V

不同的色彩,有不同的明暗。色彩的[明暗]即是色彩明暗的程度,如纯黄色的比纯绿色来得明亮;纯黄色是高明度的色彩,而纯绿色的明度略低。

16进制色彩表示方法

MacDown logo RGB的另外一种表示方式,当RGB(255,0,0,0)时,对应的就是#FF0000,可简写为#F00

本文链接:http://inkzhou.com/post/color.html

-- EOF --

Comments