[css] 給點顏色瞧瞧 - hex, rgb, hsl

前言

顏色的呈現方式有很多種，一開始常覺得他們像亂碼，但那些英文和數字其實是有脈絡可循的，這篇會介紹常見的顏色格式，以後看到色碼直接說出他是什麼顏色讓同事對你刮目相看！（誤

# HEX

HEX 為 hexadecimal（十六進位制）的簡寫，也是顏色的進位法，我們常用的十進位是從 0 開始到 9，十六進位一樣有 0 到 9，後面開始則由英文字母代替，所以 HEX 格式中可能出現的值只有 0-9, a-f 這 16 位朋友

HEX 的成分為三原色紅綠藍，各色分別佔有兩個位子，共六碼，也就是每個顏色的範圍各有 256 種值（16 * 16），數值則代表含有該顏色的多寡，舉例來說：
當三個顏色都沒有時，就是黑色 #000000，反之則為白色 #ffffff；正紅色為 #ff0000，正綠色為 #00ff00，正藍色則為 #0000ff

透明度

HEX 可加長為八碼：#RRGGBBaa，後面兩碼 aa 為透明度，但因為一樣是十六進位，所以換算後會是沒那麼漂亮的小數，例如 #ffcc330f 中，透明度為 0f，換算則為 1 / 256 * 16 = 0.0625 的透明度

HEX 的縮寫

有時會看到白色的寫法為 #fff，這是一種縮寫嗎？沒錯～當同一個顏色的值重複時，可以簡化成一個，像是黃色 #ffcc33 就可以簡化成 #fc3

那麼如果不小心手殘打到第四個值呢？這個情況下不會報錯，第四個值對 HEX 來說會變成透明度！例如 #fc30 為 #ffcc3300 的縮寫。至於五碼的 HEX 是不存在的哦！

# RGB

RGB 是指 red, green, blue 紅綠藍三色，而各色的 256 個值，在 RGB 裡是用 0 到 255 表示，例如紅色為 rgb(255, 0, 0)，白色為 rgb(255, 255, 255)，如果寫了超出 255 的數字，一律都會以 255 來計算

透明度

RGB 一樣有透明度可以加，寫法為 rgba(R, G, B, a)，透明度範圍為 0 到 1，例如 rgba(255, 204, 51)

與 HEX 的轉換

由於 HEX 跟 RGB 都是用十六進位的概念，所以可以輕鬆轉換：
#f1c2d3 拆解後為 RGB(241, 194, 211)
R: 16 15 + 1 = 241
G: 16 12 + 2 = 194
B: 16 * 13 + 3 = 211

💡 what is a stand for?

雖然 a 是表示透明度，但 a 其實是 alpha 的縮寫，據維基百科的解釋，這個來源是線性方程式 αA + (1-α)B 裡的 alpha（與透明度的相關性未知 ?_? ）

# HSL

HSL 是一個基於 RGB 的色彩模型，指的是 hue, saturation, lightness（色相，飽和度，亮度），例如黑色為 hsl(0deg, 0%, 0%)，綠色為 hsl(120deg, 100%, 50%)

色相值（hue）

色相環上的角度，按照順時針方向：0 度為紅色，120 度為綠色，240 度為藍色。hue 的寫法可加上 deg 單位，也可以不加

飽和度（saturation）

控制顏色的鮮豔度（百分比），飽和度越低，顏色越接近灰階

亮度（lightness）

增加白色的成分（百分比），亮度越高，顏色越接近白色

透明度

要加上透明度可用 hsla，例如 0.5 的透明度： hsla(45, 100%, 60%, 0.5)

由於 HSL 也有不用逗號分隔的寫法 hsl(120 100% 50%)，在此格式下，透明度會用斜線分隔：hsl(120 100% 50% / 1)

💡 亮度為何不是 brightness？

這是我個人心中的疑惑 😂 因為 css filter 調整亮度的參數是 brightness，後來查了一下發現的確有 brightness 這個寫法！但指的是另一個東西：HSB（又稱 HSV），與 HSL 的概念類似，但在飽和度和亮度的定義上不太相同，詳細介紹可以參考維基百科：HSL和HSV色彩空間

# Color Name

顏色也可以直接用英文名字來寫，例如 orange, pink，可以使用的名字共有 140 個，雖然遠不及全部的 256^3 種顏色，但可以很快速的寫出需要的顏色，不用再打開色碼表找色，缺點應該是無法直接加上透明度的參數

我較常用的工具是 HTML Color Codes，他把相近的顏色排在一起，也有附上 HEX 與 RGB，很方便使用

# CMYK

圖片來源：scoop whoop

雖然目前 css 還不支援，但時常被提到的顏色格式。CMYK 為彩色印刷時的主要的油墨顏色，又稱為印刷四色，分別為 cyan 青色、magenta 紫紅色、yellow 黃色、black 黑色，而 CMY 三色正好也是 RGB 三色分別混色後的結果

關於顏色與透明度

上述提到的 HEX, RGB, HSL 都有透明度的參數，這跟直接使用 opacity 有什麼差別嗎？

先說結論：有差！

原因是 opacity 有繼承性（inherit）[註1]，在使用上會讓所有子層元素都套用到該透明度，而使用像是 rgba 的透明度參數，則只有繼承顏色而已

[註1]關於繼承性的介紹可以參考這篇：[css] css 界的人生重來槍 - revert

關於顏色與瀏覽器

之前在開發時偶然發現吸色工具抓的色碼和實際色碼有出入，這其實是因為不同瀏覽器使用的色彩管理方式不同，對於 ICC / sRGB 的支援度也不同 [註2]，此領域可謂另一個世界！以下為 google 整理後的資訊

safari

目前沒有開放色彩管理方式的設定，內建的方式為 sRGB，也支援 ICC v4

chrome

支援 ICC v4，也可以到設定區手動選擇 sRGB：chrome://flags/#force-color-profile

firefox

支援 ICC v2，預設不支援 ICC v4，但可手動修改：到設定區 about:config 輸入 color_management，開啟 enablev4；mode 設定為 1 則是預設為 sRGB。其他選項可參考文件說明：ICC color correction in Firefox - Mozilla | MDN

[註2] ICC 色彩特性文件（ICC profile）為國際色彩聯盟定義的色彩轉換規範，目前版本為 v4

參考資料

• css - sRGB and cross browser color differences - Stack Overflow
• Web browser color management guide
• 測試 ICC 支援度
  • Web browser color management test
  • Is your system ICC Version 4 ready?