文章
為網頁而設的色彩工具：hex、調色盤與無障礙
為網站挑選色彩看似簡單，直到你面對以不同方式描述同一件事的 hex 代碼、RGB 三元組和 HSL 角度。本文解釋這些格式之間如何關聯，如何把單一品牌色變成一套可用的調色盤，以及如何確保結果對色彩感受不同的人依然清晰可讀。
hex、RGB 和 HSL 描述的是同一種色彩
螢幕上的色彩由紅、綠、藍三種光混合而成。hex 表示法把這三個通道寫成一個六字元的代碼，例如 #2563eb，其中每兩個字元為一個通道，數值從 00 到 ff。RGB 把同樣的三個數字寫成 0 到 255 的十進位，較易閱讀，但並未多說什麼。HSL 採取另一種視角：它以色相（在色輪上從 0 到 360 度的位置）、飽和度（色彩有多鮮明）和明度（離白或黑有多近）來描述一種色彩。當設計師想微調一種色彩時往往會選用 HSL，因為提高明度或移動色相是一次直覺的更動，而不是三個彼此牽連的數字。轉換器讓你在三者之間來回切換，於是你可以用一種格式讀取一個值，再以另一種格式使用它。
把一種色彩變成一套調色盤
單單一種品牌色往往不夠。一套可用的調色盤通常需要一個主色、一兩個強調色，以及一組供文字和背景使用的中性灰。色彩之間的關係遵循色輪上的簡單規則：互補色彼此相對，相似色彼此相鄰以營造平和感，三色組把三種色彩均勻分布，在不衝突的情況下形成對比。配色工具把這些規則套用到你的起始色上，並給出對應的 hex 代碼，於是你不必手算角度。如果你已經有一張你喜歡其氛圍的圖片，調色盤擷取工具會從中讀出主導色彩，這是以照片或標誌為基礎來搭建網站的快捷方式。
對比與色盲
在你螢幕上好看的調色盤，仍可能讓讀者看不清。大約每十二名男性中有一人、每兩百名女性中有一人有某種形式的色覺缺陷，最常見的是難以分辨紅色和綠色。如果你提示錯誤的唯一訊號是綠色按鈕上的紅色文字，這些讀者就會錯過它。解決辦法不是避免使用色彩，而是絕不只依賴色彩：把它與圖示、標籤或形狀搭配起來，並在文字與其背景之間維持足夠的明度對比。色盲模擬器會顯示你的調色盤在常見色覺類型下的樣子，於是你能在上線之前發現問題，而不是等收到投訴之後。
在瀏覽器裡完成這一切
這些步驟都不需要伺服器。轉換一個 hex 代碼、產生一套配色、從圖片中讀取色彩以及模擬色盲，都是瀏覽器瞬間就能處理的小型運算。當你取色的圖片是一份尚未發布的設計或一個客戶的標誌時，這一點很重要：使用這裡的工具，檔案留在你的裝置上，什麼都不會上傳。你能得到與線上服務相同的結果，而無須交出作品。色彩轉換器、配色產生器、調色盤擷取工具和色盲模擬器都在本機執行，頁面載入完成後即使離線也以同樣的方式運作。
OKLCH 與更寬廣的色彩空間
Hex、RGB 和 HSL 描述的顏色都在螢幕多年來使用的 sRGB 色域範圍內。較新的顯示器能呈現更多色彩，而 CSS 現在可透過 color() 函式與 Display P3 色彩空間來達成，後者涵蓋了 sRGB 無法表示的鮮豔綠色與紅色。更大的轉變是 OKLCH，它以明度、彩度和色相來表示顏色，更接近人眼實際感知亮度的方式。在 HSL 中，黃色與藍色在相同的 50% 明度下看起來截然不同：黃色顯得明亮，藍色看起來偏暗。在 OKLCH 中，固定明度值並只改變色相，能讓感知亮度保持一致。這讓建立調色盤更加實際，只需鎖定一個數值，就能讓每個色階達到相同的對比目標，而不必逐一手動調整每個顏色。
本文涉及的工具
常見問題
hex 和 RGB 有什麼分別？
它們是書寫同一種色彩的兩種方式。hex 把紅、綠、藍三個通道打包成一個十六進位的六字元代碼，而 RGB 把同樣的三個通道列成從 0 到 255 的十進位數字。#ff0000 和 rgb(255, 0, 0) 是完全相同的紅色。hex 精簡，在 CSS 和設計檔案中很常見，RGB 一眼看上去較易閱讀，而在兩者之間轉換不會改變色彩本身的任何東西。
我怎麼知道我的色彩對色盲使用者是否清晰可讀？
把你的調色盤放進色盲模擬器，它會把你的色彩重新繪製成具有每種常見色覺類型的人所看到的樣子。留意那些會塌縮成同一色調的搭配，尤其是紅色和綠色。最穩妥的習慣是絕不把色彩當作唯一的提示：以文字、圖示或圖案來支撐它，並在前景與背景之間維持清晰的明度差異，這樣即使色相沒有傳達出來，含義也能留存。