使用網頁安全色彩對照表後,你應該檢查的結果是一組由固定的 216 個色票組合而成的六位數十六進制代碼:三個 RGB 通道各自只能取六個階級之一 —— 0、51、102、153、204 和 255(寫成 00、33、66、99、CC 和 FF)—— 因此每個有效的輸出都恰好是 216 種組合之一,不會多也不會少。如果你點擊了色票,要驗證的值就是顯示在結果區中的完整六字元 HEX,而不是色塊內顯示的三字元提示。如果你使用了配對功能,要驗證的值就是配對器在將每個通道獨立對齊到最近允許階級後回傳的六位數 HEX。在這兩種情況下,對照表都會給你一個單一、可稽核的顏色,而本文接下來會逐步說明如何讀取該顏色、確認它是 216 色彩方塊中真正的成員,並測試它在你實際打算推出的前景/背景配對上是否可用。對照表是由六個來源階級的笛卡兒積所建構,這表示你看到的結果可以對照一組精確、有限的集合來檢查,而不是連續漸層。

how do i check the result after i use web safe colors chart
使用網頁安全色彩對照表後檢查結果

點擊色票時對照表回傳什麼

對照表中的 216 個色塊各自代表六個允許的紅、綠、藍階級中唯一的一種組合。當你點擊任一色塊時,對照表會同時執行兩個有用的動作:在較大的結果區中醒目標示所選的色票,並透過瀏覽器標準的複製 API 將完整的六位數 HEX 複製到你的剪貼簿。色塊本身只顯示一個縮短的三字元提示,以便讓所有 216 個儲存格容納在緊湊的網格中,但同一色塊的無障礙標籤與工具提示一律會帶有完整的六位數值以及對應的 RGB 三元組。

這個差異在檢查結果時很重要。顯示「39C」的色塊是 #3399CC 的縮短顯示,而不是另一個顏色,也不該以 #39C 形式貼入 CSS。請務必從結果區或無障礙標籤複製,而不是從緊湊的網格提示複製,因為對照表僅保留縮短提示顯示以節省空間。如果你的瀏覽器基於安全考量拒絕剪貼簿存取,結果區中可見的代碼仍會以純文字顯示,因此你可以用游標手動選取並以一般方式複製。

請使用 網頁安全色彩對照表 作為完整六位數 HEX 的來源,並將緊湊色塊文字視為導覽輔助,而非權威值。

如何為任何 HEX 找到最近的方塊配對

如果你已經從品牌指南、螢幕擷取或其他工具取得一個顏色,想知道它對應到哪個網頁安全色票,對照表的配對器會以三個步驟處理。配對器接受標準的 CSS HEX 值,可以是三位數(簡寫)或六位數。

  1. 在配對器的輸入欄位中輸入或貼上有效的 3 位數或 6 位數 HEX。像是 #abc 這樣的三位數值會在配對步驟之前依標準 CSS 簡寫規則展開為 #aabbcc。
  2. 選擇尋找配對動作。對照表會將每個 8 位元通道獨立四捨五入到最接近的 51 倍數,並將三個對齊後的階級重新組合成新的六位數 HEX。
  3. 從結果區讀取並複製產生的 HEX。配對後的顏色是 216 個保證的方塊成員之一,因此可以安全地直接以真正的網頁安全值貼入 CSS、SVG 或設計軟體。

舉例來說,輸入 #3470d0 會回傳 #3366cc。紅色通道 52 最接近 51,綠色通道 112 最接近 102,藍色通道 208 最接近 204,因此重新組合後的 HEX 為 #3366CC。你可以用色票網格驗證這個結果:#3366CC 是記錄中的 216 個條目之一,並與其他方塊成員共享相同的紅、綠、藍階級。

最近配對的數學實際上如何運作

配對器是逐通道對齊,而非感知演算法。三個 RGB 通道各自與六個允許階級 —— 0、51、102、153、204 和 255 —— 進行比較,最接近者獲勝。由於六個階級等距分布,三個通道又彼此獨立,將每個通道對齊到最近允許值等同於在一般未加權的 RGB 立方體中選擇最近鄰。

這種簡單性有助於驗證:如果你能看到輸入的通道值與六個允許階級,就能手動重現配對結果,並檢查對照表的輸出是否與你的算術一致。這也意味著對照表不需要任何色彩科學描述檔或顯示器校準,就能給出一致的答案;答案僅取決於你輸入的整數 RGB 值。

不過,有一個重要的注意事項。sRGB —— 網頁瀏覽器、手機和多數消費型顯示器所使用的色彩空間 —— 以非線性方式編碼亮度,因此 R、G、B 中相等的數值步長並不對應相等的感知步長。對照表的逐通道對齊在原始 RGB 中是數學上最近,但視覺上最近的色票可能與歐幾里得 RGB 結果不同,在中間調特別明顯。對於快速的色板參考而言,這很少構成問題,而對齊的可預測性往往比感知精確度更有價值。

每個結果背後的六個通道階級

對照表能回傳的每個值都是由下列六個階級所組成。如果你複製的 HEX 在每個通道中並未完全包含這些數字,它就不是真正的網頁安全色,對照表 216 條目相容性的保證也不適用於它。

十進制 (0-255)十六進制角色
000通道最小值
5133低階級
10266中低階級
15399中高階級
204CC高階級
255FF通道最大值

每個通道有六種獨立選擇,跨三個通道相乘,得到 6 × 6 × 6 = 216 種唯一組合。對照表是由這六個來源階級以確定性的「紅主、綠中、藍次」順序所產生,而不是從不透明清單複製而來,這表示這個表格是可重現的,可以檢查是否恰好有 216 個條目、唯一的 HEX 值,以及通道皆屬於六個允許階級。W3C 在 w3.org/MarkUp/Guide/Style.html 對 CSS 的歷史性介紹中,也記錄了相同的六個等距通道階級。

使用前先讀取並驗證結果

在將 HEX 貼入你的樣式表之前,花幾秒鐘驗證一下。對照表提供了幾個不變量,你可以用肉眼或快速腳本來檢查。

  • 長度:你複製的 HEX 應恰好為六位數,以單一 # 開頭,且僅使用 0-9 與 A-F 字元。
  • 通道隸屬:將六位數拆成三對,並確認每對都是 00、33、66、99、CC 或 FF 之一。如果有任何一對包含其他數字,該值就不是真正的方塊成員。
  • 唯一性:配對後的顏色應正好對應對照表網格中的一個色塊。對照表的設計保證每個色塊對應一個 HEX,因此任何重複的結果都代表複製或輸入錯誤。
  • 可見標籤 vs. 緊湊提示:如果你從色塊複製,請確認你使用的是結果區中的完整值,而不是色票內顯示的縮短提示。

這些檢查能將結果從「對照表這樣說」轉變為「對照表的輸出可證明是你能親手稽核的 216 方塊成員」,這正是使用受限制色板集體的根本目的。

測試實際配對的對比度

挑選網頁安全色後最常見的錯誤,就是假設它一定清楚可讀。歷史性的 216 色彩方塊是為了在 256 色顯示器上限制抖動而設計,並非為了達到現代無障礙標準對內文、大型標題或介面控制項的要求。兩個相鄰的方塊成員仍可能無法通過 WCAG 對比比例,兩個相距較遠的方塊成員反而可能通過。對照表的結果只是方程式的一半 —— 前景或背景 —— 因此對實際配對單獨進行對比度測試是不可或缺的。

開啟專門的對比度工具,將你複製的 HEX 貼為前景,將第二個顏色貼為背景。該工具會回報對比比例,並告訴你這組配對是否通過正常文字、大型文字或非文字 UI 元件的 WCAG AA 或 AAA。如果配對未通過,對照表可以協助你對齊到不同的方塊成員,但無障礙決策是對比度工具的責任,而不是對照表的責任。對照表的工作止於產生一個經驗證的方塊成員;你要如何使用這個顏色,則是另一個無障礙問題。如需更深入的配對與測試說明,請參閱 網頁安全色彩無障礙對比:配對與測試,然後再回到對照表,在比例過低時挑選替代色票。

當網頁安全結果看起來仍然不對時

有時候即使算術正確,配對後的顏色看起來仍不像你預期的顏色。最常見的原因是原始 RGB 距離與感知色差之間的差異。對照表會將每個通道對齊到最近的允許值,這等同於在未加權的 RGB 立方體中選擇最近鄰,但 sRGB 是經伽馬編碼的,而人眼對綠色的變化又比對藍色的變化更敏感。因此,RGB 距離稍差的色票,看起來反而可能更接近你的輸入。

專業的工作流程會在更具感知均勻性的色彩空間中進行比較。Lab (CIELAB) 是經典選擇,OKLCH 是能處理寬色域顯示器的現代替代方案,而 ICC 描述檔還能進一步將比較對齊到特定輸出裝置。對於一般的網頁樣式,這些精細調整很少必要,對照表的逐通道對齊仍然是忠實、可預測的答案。

同樣值得記住的是對照表的範圍。這裡的「網頁安全」只是歷史性的名稱。它不會為顏色標註主觀名稱,不代表等同於 Pantone 或 CMYK 油墨,也無法保證該色票在當前每個顯示器上對文字、無障礙、印刷或品牌用途都安全。請將對照表視為透明的參考、配對器與複製輔助工具,並將其輸出視為你色彩工作流程中多個輸入之一。

延伸閱讀:CMYK 色彩對照表向量圖:對應全部 148 個 CSS 名稱。