網頁安全色彩是一組固定色盤,恰好包含 216 種顏色,其中每個紅、綠、藍色頻道只能是六個值之一:0、51、102、153、204 和 255,以十六進位表示為 00、33、66、99、CC 和 FF。三個頻道各有六個獨立選擇,因此這個立方體包含 6 × 6 × 6 = 216 種不重複的顏色。這組色盤源自一個許多顯示器只能同時顯示 256 種索引色的時代;藉由將每個頻道限制為六個等距的色階,設計師可以選用幾乎確定能在 Windows 與 Macintosh 系統上無需抖動(dithering)顯示的色彩——當時兩個平台各保留了大約二十色給自己的介面使用。現代顯示器與瀏覽器已可支援數百萬甚至數十億種不同顏色,因此這個色盤不再是日常樣式的相容性要求。它仍然存活下來,作為教學輔助工具、自覺的復古限制,以及用來研究量化 RGB 立方體如何建立與配對的透明參考。網頁安全色彩圖表將立方體中的每一個條目以互動式格狀呈現,你可以瀏覽、複製,或用來將任何輸入的 HEX 對齊到最接近的成員。
216 種網頁安全色彩是什麼
216 種網頁安全色彩來自一個 6×6×6 的立方體:每個 RGB 頻道六個值、三個頻道、共 216 個條目。這個單一公式就定義了整個色盤。W3C 對 CSS 的歷史介紹將這些顏色描述為「瀏覽器安全」色,而 W3C 網頁無障礙倡議的一個範例也獨立記錄了一個基於相同六個頻道色階的 216 選擇色彩選擇器。每個條目都是紅、綠、藍的一種組合,其中每個頻道被限制為 00、33、66、99、CC 或 FF。
以六位數 HEX 字串表示,每個色塊看起來像 #3399CC 或 #FF6600。網頁安全色彩圖表上的格狀顯示全部 216 個條目,以紅為主、綠居中、藍為輔的決定性順序排列,因此只要掃視行與列就能看出其結構。圖表是以六個頻道色階的笛卡兒積(Cartesian product)所產生,而不是從不透明、寫死的清單複製而來,且每個條目都已驗證其唯一性與頻道成員資格的正確性。
這個色盤只在歷史意義上是「安全」的:它能降低瀏覽器在 256 色顯示器上將頁面顏色抖動成斑點近似色的機會。它並不保證任何色塊在文字對比、無障礙配色、品牌重現或現代印刷上是安全的。請將這個標籤視為這些色彩被標準化時的時代標記,而不是對其可讀性的品質宣稱。
6×6×6 立方體如何建立色盤
| 頻道 | 十進位色階 | 十六進位對應 | 步進大小 |
|---|---|---|---|
| 紅 | 0, 51, 102, 153, 204, 255 | 00, 33, 66, 99, CC, FF | 51 |
| 綠 | 0, 51, 102, 153, 204, 255 | 00, 33, 66, 99, CC, FF | 51 |
| 藍 | 0, 51, 102, 153, 204, 255 | 00, 33, 66, 99, CC, FF | 51 |
| 組合總數 | 6 × 6 × 6 | — | 216 |
表格的每一列對應三個頻道之一;最後一列則將整個建構化約為一個簡單的計數。由於六個頻道色階以 51 為間距等距分布,從 0 到 255 之間每個可能的 8 位元值,與其最近允許色階之間的距離都是已知的。這個距離正是讓配對演算法可預測的原因:將每個頻道分別四捨五入到 0、51、102、153、204 或 255 中最接近的一個,再把三個四捨五入後的色階重新組合成新的 HEX。
圖表使用相同的建構方式來驗證表格本身。產生的格狀會被檢查是否恰好有 216 個條目、唯一的 HEX 值,以及頻道成員屬於六個允許色階,因此所顯示的色盤不會偏移或包含重複項。這使得立方體適合作為教學工具,因為表格的每個特性都直接源自六頻道規則。
為任何 HEX 找出最接近的網頁安全色彩
- 在你的瀏覽器中開啟網頁安全色彩圖表。
- 瀏覽 216 個色塊,點選任何顏色以顯示並複製其完整的六位數 HEX 值。完整的代碼會出現在一個較大的結果區域中,可直接貼上使用。
- 若要對應你已有的顏色,請在輸入欄位中輸入一個有效的 3 位數或 6 位數 HEX 代碼。例如 #abc 這種三位數值會依照標準 CSS 簡寫規則展開為 #aabbcc,再進行配對。
- 選擇「尋找配對」,將每個頻道分別四捨五入到最接近的 51 倍數,然後重新組合三個對齊後的色階。產生的色塊會與其 HEX 一同顯示在結果區域中。
- 將配對後的色塊作為歷史色盤參考,然後在使用它作為內文文字或介面標籤之前,以色彩對比檢查工具測試實際的前景與背景配對。
實例演練:將 #3470d0 對齊到最近的色塊
以輸入值 #3470d0 為例。將每個頻道拆成十進位並四捨五入到最接近的 51 倍數:
- 紅:0x34 = 52。兩個最近的允許色階為 51 (0x33) 與 102 (0x66)。52 較接近 51,因此紅色四捨五入為 51。
- 綠:0x70 = 112。兩個最近的允許色階為 102 (0x66) 與 153 (0x99)。112 較接近 102,因此綠色四捨五入為 102。
- 藍:0xd0 = 208。兩個最近的允許色階為 204 (0xCC) 與 255 (0xFF)。208 較接近 204,因此藍色四捨五入為 204。
將三個對齊後的色階重新組合,得到 0x33、0x66、0xCC,亦即 #3366CC。這就是當你輸入 #3470d0 時圖表所顯示的結果。
由於立方體的每個軸都是獨立且等距分布的,逐頻道四捨五入所得到的結果,與在一般未加權的 RGB 立方體中以最近距離進行配對的結果相同。然而,這並非一種感知色彩差異(perceptual color-difference)的計算,因為經伽瑪編碼的 sRGB 並不具備感知均勻性。視覺上最接近的色塊偶爾可能與歐氏 RGB 結果不同,尤其是在綠色範圍的中段,但由於每個頻道都是獨立處理,這個演算法易於稽核。專業工作流程可能會改為在 Lab 或 OKLCH 中比較色彩、考量 ICC 描述檔,或在整張影像中最佳化一套色盤。
216 色盤仍有意義的時機
現今的電腦、手機與瀏覽器通常能支援數百萬甚至數十億種可顯示的顏色組合,因此網頁安全色彩已不再是普通網站樣式的相容性要求。這組色盤仍存在,原因有以下幾點:
- 研究量化 RGB 立方體。六階限制是最簡單卻非平凡的彩色量化(quantization)範例,而圖表清楚顯示每個頻道各自的貢獻。
- 教學十六進位頻道。每個色塊都是紅、綠、藍兩位數 HEX 的實例演練,在介紹 CSS 色彩語法時非常方便。
- 刻意復古的色盤。想要呈現 1990 年代晚期網頁介面風格的設計,經常直接從這個立方體中選色,而非只是近似。
- 低色彩數的藝術作品。像素藝術、索引圖形、刺繡圖表等媒體,有時會將色盤限制為固定立方體,以縮減檔案大小或與來源格式保持一致。
- 重現較舊的設計。當某個作品原本就是以 216 色彩盤製作時,精確對應到這些條目,可讓重現作品保持忠實。
此處的「網頁安全」只是一個歷史名稱。它並不意味著任何色塊在文字無障礙、品牌識別、印刷輸出或任何現行顯示技術上都是安全的。圖表從不賦予主觀色彩名稱,也未聲明等同於 Pantone、CMYK 油墨、材料樣本或經過裝置校色的輸出。同樣地,除非創作簡報明確要求這項限制,否則不應將現代品牌或資料視覺化限制在這 216 個選擇之中。
出貨配對之前請先測試對比
| 工作流程步驟 | 要檢查的項目 | 執行位置 |
|---|---|---|
| 挑選前景色塊 | 讀取完整的六位數 HEX,而非簡寫的三字元提示 | 網頁安全色彩圖表 |
| 挑選背景色塊 | 若希望嚴格對齊,請確認兩個條目都在 216 立方體中 | 網頁安全色彩圖表 |
| 測試實際配對 | 在 WCAG AA 與 AAA 標準下,普通文字與大型文字的對比比率 | 色彩對比檢查工具 |
| 決定用途 | 內文、標籤、按鈕,或僅作裝飾 | 你的設計系統 |
色盤中的一個條目並不會自動適合作為前景文字閱讀。對比同時取決於前景與背景、字型大小與粗細,以及你希望達到的無障礙標準。從立方體中選色後,請以色彩對比檢查工具測試實際配對,而不是假設一個著名的歷史色盤就能保證可讀性。
圖表上的每個色塊會顯示一個簡寫的三字元提示,以保持 216 項格狀的精簡;其無障礙標籤與 title 則帶有完整的六位數值與 RGB 三元組。選取色塊會在較大的結果區域中顯示完整值。若瀏覽器因任何原因封鎖剪貼簿存取,可手動選取仍可見的代碼。
若想深入了解這個立方體背後的歷史清單,請參閱關於216 色 W3Schools 色盤的姊妹指南。至於立方體建構的數學原理,以及 W3C 如何記錄這六個頻道色階,W3C 對 CSS 的介紹頁面(網址為 https://www.w3.org/MarkUp/Guide/Style.html)以及 W3C WAI 216 色選擇器範例(網址為 https://www.w3.org/WAI/WCAG21/working-examples/colour-picker/choosecolour.php)是原始的參考來源。
若你正在權衡各種選項,色彩差異計算工具 CSS 代碼:比較 HEX 配對對此有詳細說明。