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，什麼是千萬色。

文章若有錯誤，歡迎指正，謝謝。😆