最近在看顏色值的時候，顏色不僅僅是字符串，背後的故事也是很吸引人的，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，什麼是千萬色。
文章如有錯誤，歡迎指正，謝謝。😆