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


Posted by vii120 on 2020-12-04

前言

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

# HEX

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
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
HSL 是一個基於 RGB 的色彩模型,指的是 hue, saturation, lightness(色相,飽和度,亮度),例如黑色為 hsl(0deg, 0%, 0%),綠色為 hsl(120deg, 100%, 50%)

色相值(hue)

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

飽和度(saturation)

控制顏色的鮮豔度(百分比),飽和度越低,顏色越接近灰階
HSL-s

亮度(lightness)

增加白色的成分(百分比),亮度越高,顏色越接近白色
HSL-l

透明度

要加上透明度可用 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

cmyk newspaper

圖片來源:scoop whoop

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

關於顏色與透明度

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

先說結論:有差!

原因是 opacity 有繼承性(inherit)[註1],在使用上會讓所有子層元素都套用到該透明度,而使用像是 rgba 的透明度參數,則只有繼承顏色而已
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 #color #hex #rgb #hsl #cmyk







Related Posts

[面試]帆擎/和盛/叡揚/達暉/凱發

[面試]帆擎/和盛/叡揚/達暉/凱發

實作 Redux(五):reducer

實作 Redux(五):reducer

用 Python 自學程式設計:程式設計思維入門

用 Python 自學程式設計:程式設計思維入門


Comments