css 的颜色关键、rgb的表示、hsl由来

最近在看颜色值的时候，颜色不只仅是字符串，背后的故事也是很吸引人的，rgb的三维几何坐标，hsl的柱形坐标，都有须要学习的地方哦。一块儿看看咯。😆

关键字表示

颜色关键字表示一个具体颜色，这里颜色都是语义化人工命名， 能够在这里查到关键字列表

rgb[1]

rgb[a] 是按照rgb 立体坐标系统来表示，可使用 #{hex}来标识，或者经过 rgb[a]()方法来表示.

mdn: <color>

rgb 立体坐标系统

图示:

rgb颜色模型映射到多为数据集。水平x轴为红色值向左增长， y轴为蓝色增长到右下方，垂直z轴为绿色增长到顶部，黑色圆点在图中已经隐藏。

几何表示

一般颜色经过三个部分来定义，不只仅在rgb模型中，其余模型也是，相似还有 CIELAB 和 Y'UV, 经过将数据视为普通的笛卡尔坐标来描述三维体积。在欧几里得空间中，对于rgb模型，是由0-1范围的非负值的立方立方体(如上图)来表示, 在顶点(0,0,0) 处为原点制定黑色，而且沿着三个轴增长强度值一直到顶点 (1,1,1) 为白色，在对角线的位置是相反的黑色。

一个rgb的顶点 (r, g, b) 标识立方体表边缘或者内部给定颜色点的三维坐标。这个方法容许简单计算他们之间的距离来计算两个颜色的类似性，距离越短，类似性越高。超出范围的计算也能够用这个方法执行。

参考: https://en.wikipedia.org/wiki...

在网页中标识

rgb 颜色模型是从 html3.2 正式引入internet标准的。在此以前虽然已经使用过一段时间，最初大多数视频硬件有限的颜色深度致使216种色彩调色。由Netscape Color Cube定义。凭借24位显示器的优点，使用完整的1670万种HTML RGB颜色代码颜色再也不对大多数用户形成问题。

网络安全的调色板(palette) 推荐 216(6^(3)) 是由红色，绿色，蓝色中一个值采用6个值中的一种(在十六进制中): ＃00，＃33，＃66，＃99，＃CC或#FF（基于上面讨论的每一个值的0到255范围）。上面16进制值对应10进制值就是: 0, 51, 102, 153, 204, 255。他们对应的强度就是=0%, 20%, 40%, 60%, 80%, 100%.

在css中语法以下:

rgb(#, #, #)

其中＃等于红色，绿色和蓝色的比例。此语法可用于background-color或（for text）color等选择器以后。

在 24位显示器中，每24bit 为颜色信道值, 也就说每一个个像素能够由24字节(8 3)来存储。是由三个8字节(2^(3))的份量来表示. 三个份量分别表明 R, G, B 。24位rgb能够表示 2^(24)种颜色, 每8位就有 256种表示方式，即 2^(8)*， 2^(24) == 256^(3) == 16,777,216颜色，也叫千万色。

参考:

https://en.wikipedia.org/wiki...
https://baike.baidu.com/item/RGB
https://en.wikipedia.org/wiki...

hsl(a)

hsl[a] 是使用hsl 圆柱坐标来表示的系统，形式使用 hsl[a]() 来表示。

这里还有一个表示叫 hsv[a](), 下面继续看.

圆柱坐标示意

hsl

图(1)

hsv

图（2)

HSL和HSV都是圆柱形几何形状（图2），具备色调(hue)，它们的角度尺寸，从红色初级0°开始，穿过绿色初级120°，蓝色初级240°，而后回绕到红色初级360°，这里就表示0^(°) == 360^(°) == 红色。在每一个几何形状中，中心垂直轴(饱和度(saturation))包括中性(50%)，无色(100%)或灰色(0%)，范围从亮度(lightness/value) 0或值0的黑色（底部）到亮度1的白色或顶部的值1。

https://en.wikipedia.org/wiki...
HSL and HSV are both cylindrical geometries (fig. 2), with hue, their angular dimension, starting at the red primary at 0°, passing through the green primary at 120° and the blue primary at 240°, and then wrapping back to red at 360°. In each geometry, the central vertical axis comprises the neutral, achromatic, or gray colors, ranging from black at lightness 0 or value 0, the bottom, to white at lightness 1 or value 1, the top.

动机(Motivation)

HSL 色彩空间是 1938年 Georges Valensi 为电视发明的。大多数电视机，计算机显示器和投影仪经过组合不一样强度的红色，绿色和蓝色光（所谓的RGB添加原色）来产生颜色。 RGB颜色空间中产生的混合物能够再现各类颜色（称为色域）;然而，红色，绿色和蓝色光的组成量与产生的颜色之间的关系是不直观的，特别是对于没有经验的用户，以及熟悉基于色调和色调的油漆或传统艺术家模型的减色混合的用户（下图）。此外，加色和减色模型都没有像人眼那样定义颜色关系。

画家经过将相对明亮的颜料与黑色和白色相结合来实现长色混合。白色混合物称为 着色(tints)，黑色混合物称为 色调(shades)，二者混合称为 调准(tones)。

例如:
假设咱们有一个RGB显示器，其颜色由三个滑块控制，范围从0到255，一个控制每一个红色，绿色和蓝色原色的强度。若是咱们从一个相对多彩的橙色开始，sRGB值R = 217，G = 118，B = 33，而且想要将其色彩减小一半到不太饱和的橙色，咱们须要拖动滑块将R减小31 ，将G增长24，将B增长59，以下图所示。

当前混色模型很是不直观，在绘画中 - 涉及将颜色鲜艳的颜料与黑色或白色混合以实现更浅，更暗或更少颜色的颜色。

次年，1979年，在SIGGRAPH，Tektronix推出了使用HSL进行颜色指定的图形终端，计算机图形标准委员会在其年度状态报告中推荐了它（图7）。这些模型很是有用，不只由于它们比原始RGB值更直观，并且还由于RGB的转换计算速度很是快：它们能够在20世纪70年代的硬件上实时运行。所以，从那时起，这些模型和相似的模型在图像编辑和图形软件中变得无处不在。

In an attempt to accommodate more traditional and intuitive color mixing models, computer graphics pioneers at PARC and NYIT introduced the HSV model for computer display technology in the mid-1970s, formally described by Alvy Ray Smith[10] in the August 1978 issue of Computer Graphics. In the same issue, Joblove and Greenberg[11] described the HSL model—whose dimensions they labeled hue, relative chroma, and intensity—and compared it to HSV (fig. 1). Their model was based more upon how colors are organized and conceptualized in human vision in terms of other color-making attributes, such as hue, lightness, and chroma; as well as upon traditional color mixing methods—e.g., in painting—that involve mixing brightly colored pigments with black or white to achieve lighter, darker, or less colorful colors.

The following year, 1979, at SIGGRAPH, Tektronix introduced graphics terminals using HSL for color designation, and the Computer Graphics Standards Committee recommended it in their annual status report (fig. 7). These models were useful not only because they were more intuitive than raw RGB values, but also because the conversions to and from RGB were extremely fast to compute: they could run in real time on the hardware of the 1970s. Consequently, these models and similar ones have become ubiquitous throughout image editing and graphics software since then. Some of their uses are described below.

用法

hsl 是用三个参数来表示

• 色相 (hua)
• 饱和度 (saturation)
• 透明度 (lightness)

在上图中能够发现 red = 0 = 360^(°), 因此 green = 120^(°), blue = 240^(°)

饱和度和明度都是用100%表示:

100% 是满饱和度, 0% 是一个灰度
100% 明度是白色，0%明度是黑色， 50%是通常色

根据hsl的图示，100% 明度，无论饱和度是多少都会是白色，0%一样

hsl(0,  100%,50%)    /* red */   
hsl(30, 100%,50%)                 
hsl(60, 100%,50%)                
hsl(90, 100%,50%)                
hsl(120,100%,50%)    /* green */ 
hsl(150,100%,50%)                
hsl(180,100%,50%)                
hsl(210,100%,50%)                
hsl(240,100%,50%)    /* blue */  
hsl(270,100%,50%)                
hsl(300,100%,50%)                
hsl(330,100%,50%)                
hsl(360,100%,50%)    /* red */   

hsl(120,100%,25%)    /* dark green */  
hsl(120,100%,50%)    /* green */       
hsl(120,100%,75%)    /* light green */ 

hsl(120,100%,50%)    /* green */  
hsl(120, 67%,50%)                 
hsl(120, 33%,50%)                 
hsl(120,  0%,50%)                 

hsl(120, 60%,70%)    /* pastel green */

总结

经过查找资料，发现颜色不只只有keyword， 不只仅#000, 不只rgb， 还有hsl,hsv等等表示方式。学习简单颜色其实不也简单，设计颜色和像素之间关系，颜色组合，为何是hex的时候是0-255，什么是千万色。

文章若有错误，欢迎指正，谢谢。😆