別再只會複製貼上!帶你真正搞懂Hex Color Codes | hex triplet color picker
接觸過設計或前端開發的人對HexColorCodes應該都不陌生,只是大家更熟悉的名稱是十六進位色碼標示法,例如#ffffff代表白色、#333則是深灰色。但你知道如何把#333變成更淺的灰色嗎?Pantone2019年度代表色LivingCoral的#FF6F61是怎麼來的?十六進位與六位數的色碼又是什麼關係?「複製貼上就好了啊!Photoshop檢色器打開點一點就有了,像是HSLColorPicker[1]的工具在網路上也有很多,為什麼要了解那六個數字代表什麼意思呢?」想像有一天睜開眼睛看到的世界不再是你所熟悉的顏色,或與你一起工作的夥伴有色覺辨認障礙,這時色碼就能作...
接觸過設計或前端開發的人對 Hex Color Codes 應該都不陌生,只是大家更熟悉的名稱是 十六進位色碼標示法,例如 #ffffff 代表白色、#333 則是深灰色。但你知道如何把 #333 變成更淺的灰色嗎?Pantone 2019 年度代表色 Living Coral 的 #FF6F61 是怎麼來的?十六進位與六位數的色碼又是什麼關係?
「複製貼上就好了啊!Photoshop 檢色器打開點一點就有了,像是 HSL Color Picker[1] 的工具在網路上也有很多,為什麼要了解那六個數字代表什麼意思呢?」想像有一天睜開眼睛看到的世界不再是你所熟悉的顏色,或與你一起工作的夥伴有色覺辨認障礙,這時色碼就能作為有效的溝通方式。
淺談 RGB 與 Hex Color Codes 的關係現行開發網頁有許多標示顏色的方法如 RGB、HSL、Hex 或直接使用顏色名稱,在討論 Hex Color Codes 必須先瞭解 RGB 的運作原理。我們知道 RGB 代表的是三原色光中的紅色(Red)綠色(Green)和藍色(Blue),是螢幕顯示主要採用的技術。在電腦中,RGB 分別以 0 ~ 255 依序來表示各自的強度,從全黑 rgb(0,0,0) 到全白 rgb(255,255,255) 之間依不同比例即可組合出各種顏色,HEX 也是相似的原理。
將 Hex code 拆成三個部分,兩個字元一組依序代表 R、G、B 的數值:
以 #FF6F61 為例,我們可以拆成 FF, 6F, 61 來看,這些組合正是所謂的十六進位(hexadecimal),也是 Hex 的由來。十六進位就是由數字 0 到 9 加上字母 A 到 F 來表示,後者可視為數字 10 到 15。不同於二進位,十六進位可以用更少的位元表達相同的數值。為什麼使用十六進位而不是二進位或十進位呢?這要牽扯太多的歷史...