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，什么是千万色。

文章如有错误，欢迎指正，谢谢。?