網頁安全色彩是一個由恰好 216 個十六進位色彩組成的固定調色盤，每個色彩由紅、綠、藍三個通道中六個允許的亮度等級構成：0、51、102、153、204 和 255，以十六進位表示為 00、33、66、99、CC 和 FF。三個獨立通道各有六個選擇，數學計算為 6 × 6 × 6 = 216 個獨立項目——不多也不少。因此，立方體中的每個色彩都是完全可預測的：只要你了解三個通道值，就能直接讀出六位數的 HEX 碼。「網頁安全」這個名稱源自一個許多顯示器只能同時顯示 256 種索引色彩的年代，當時選用這個立方體是為了讓瀏覽器不需要將頁面色彩遫動處理成斑駁的近似色。
如果你是第一次聽到這個詞彙，簡短的版本是這樣的：網頁安全色彩是一份包含 216 個 HEX 值的小型固定清單，在歷史上於不同電腦上看起來都相同。如今的顯示器通常能呈現數百萬甚至數十億種色彩，所以實際的相容性理由大多已不存在。不過，這個立方體仍然有其用途——作為新手的教學輔助工具、復古設計工具，以及將任何你喜愛的色彩快速收斂到最簡調色盤的便捷方式。
「網頁安全」的真正含義（以及為何新手會聽到這個詞）
這個詞彙經常出現在較舊的 CSS 教學、設計部落格和 HTML 參考頁面中，這也是為何它會一再出現在新手面前。它不是品牌、風格或授權——它是一份歷史性的相容性清單。W3C 的 CSS 介紹將六個等距通道等級記錄為官方來源，而 W3C 網頁無障礙倡動則提供了一份獨立的 216 色彩選擇器範例，列出相同的色彩組合。
兩個事實解釋了為何清單恰好是 216 項。首先，當初選用六個通道等級，是為了讓調色盤能夠整齊地容納於 1990 年代的 256 色索引顯示系統中——當時約有 20 種色彩保留給系統使用，剩下 236 個可用位置，而 216 是能放入的最大整齊立方體。其次，每個通道六個等級容易記住，因為每個都是 51 的倍數。想要了解底層邏輯的新手可以用計算機驗證這兩個數字：6 × 6 × 6 = 216，而 255 ÷ 5 = 51。
用淺顯語言解說 216 立方體
把這個立方體想像成三個獨立的滑桿。紅色滑桿可以停在 0、51、102、153、204 或 255。綠色滑桿可以停在相同的六個值。藍色滑桿同樣可以停在相同的六個值。在每個滑桿上各選一個停點，就會產生一個色彩，而每種停點的組合都恰好對應立方體中的一個項目。
| 十進位通道 | 十六進位通道 | 作用說明 |
|---|---|---|
| 0 | 00 | 通道完全關閉（對亮度無貢獻） |
| 51 | 33 | 高於黑色的最低可見亮度 |
| 102 | 66 | 低中亮度 |
| 153 | 99 | 中等亮度 |
| 204 | CC | 中高亮度 |
| 255 | FF | 通道完全開啟（最大亮度） |
因為每個通道都有相同的六個停點，立方體擁有整齊的結構。改變一個十六進位數字，就會讓某個通道剛好變動 51 個十進位等級，相當於十六進位的 0x33。對新手來說，實際的重點是這個調色盤中的每個 HEX 碼在十進位與十六進位中看起來都很「整齊」：你會看到像 #336699、#FFCC00 或 #00FF66 這類的值——而絕不會是 #3470d0。
如何在圖表中瀏覽、複製與比對 HEX
網頁安全色彩圖表採用相同的六等級規則建構，以紅、綠、藍三色六個停點的笛卡兒積產生。三個動作幾乎涵蓋了新手對它所需的一切操作。
- 瀏覽 216 個色塊。圖表將每個項目以方塊形式排列成網格。每個方塊顯示一個簡短的三字元提示以保持版面精簡，而完整的六位數 HEX 和 RGB 三元組則儲存在方塊的無障礙標籤和標題中。網格以確定性的紅主、綠中、藍次的順序產生，因此當你捲動瀏覽時，各列呈現出合乎邏輯的節奏。
- 選取色塊以顯示並複製其完整 HEX。點擊任何方塊，圖表就會在較大的結果區域顯示完整的六位數值，供你複製。如果你的瀏覽器封鎖了剪貼簿存取，顯示的代碼仍可手動選取——圖表並未將數值藏在複製按鈕後面。
- 輸入 HEX 並選擇「尋找最接近」。輸入任何有效的三位數（例如 #abc）或六位數（例如 #3470d0）HEX 代碼，然後選擇「尋找最接近」。工具會在需要時展開 CSS 簡寫，接著將三個 8 位元通道各自獨立四捨五入到最接近的 51 倍數，再將收斂後的等級重新組合成最接近的立方體成員。配對到的方塊會顯示出來，方便你與輸入值並列比較。
當你手邊有了配對後的色塊，請將它視為歷史參考與複製輔助，而非絕對保證。圖表是窺見立方體的一面透明窗戶，並非對某個色彩是否適合你的專案下任何判斷。
解讀配對結果——以及它無法告訴你的事
配對工具使用簡單且可預測的數學：每個通道獨立四捨五入，再重新組合。以輸入 #3470d0 為例，其通道為 0x34 = 52、0x70 = 112，以及 0xd0 = 208。通道 52 距離 51 差一步，距離 102 差五十步，因此收斂到 51（十六進位 33）。通道 112 距離 102 差十步，距離 153 差四十一步，因此收斂到 102（十六進位 66）。通道 208 距離 204 差四步，距離 255 差四十七步，因此收斂到 204（十六進位 CC）。重新組合後，配對到的立方體項目為 #3366cc。
由於收斂過程是逐通道獨立進行的，且立方體為等距分布，這個四捨五入等同於在未加權的 RGB 立方體中求取最近的歐幾里得距離。這讓結果易於人工核對，但這也是圖表所能保證的極限。配對工具並非感知色差計算；它不會考量人眼對通道變化的感知權重，而經過 gamma 編碼的 sRGB 值在感知上也並非均勻分布。需要視覺上最接近色色塊的專業工作流程，會在 Lab 或 OKLCH 色彩空間中進行比較，考量 ICC 設定檔，或針對整張影像優化調色盤。網頁安全色彩圖表刻意保留這套舊式的建構方式，而不是用感知模型將其掩蓋。
216 調色盤在今日仍然適用的情境
對一般網站工作而言，這個立方體已不再是相容性的必要條件——現代電腦、手機與瀏覽器通常能支援數百萬至數十億種可顯示的色彩組合，因此選擇 #3470d0 而非 #3366cc 並不會改變頁面的呈現方式。不過，這個調色盤在以下幾個特定情境中仍然有用：
- 學習量化 RGB 立方體。如果你正在學習十六進位通道的運作方式，每個通道六個停點會比完整的 0–255 範圍更容易理解。
- 打造刻意受限的復古調色盤。8 位元與 16 位元時代的圖像使用類似的有限色彩組合，因此這個立方體非常適合用於復古風格藝術或像素風設計。
- 建立低色彩數的美術作品。圖示、徽章、刺繡圖樣與雷射雕刻檔案通常需要小型且固定的色彩組合，以簡化製作流程。
- 重現較舊的設計。如果你正在更新舊有網站或螢幕截圖模擬稿，比對原始的 216 色彩能保持視覺的一致性。
在這些情境之外，請勿將現代品牌、儀表板或資料視覺化限制在 216 個選項之內，除非專案需求明確要求此限制。通用的色彩調色盤產生器能提供更符合當代需求的結果，而圖表則繼續適用於上述特定用途。
關於文字「安全性」的簡短說明
「網頁安全」是一個歷史性的相容性標籤。它並不代表某個色塊作為前景文字時一定安全、對低視力讀者一定無障礙、能在未塗佈的紙張上列印、適用於你的公司品牌，甚至在每台當前的顯示器上都呈現相同效果。文字的無障礙性取決於前景與背景之間的對比，加上字型大小、粗細，以及適用的無障礙標準。同一種藍色在白底上以 18px 顯示時可能完全清晰可讀，但放在同一調色盤中較深的色塊上就可能難以辨識。
從圖表中挑選兩個色塊後，請將這組實際配對送進專門的色彩對比檢查工具，以驗證其對比比例是否符合 WCAG AA 或 AAA 標準。將立方體視為起點調色盤，而非最終的無障礙判定，是新手較安全的習慣；如此既能保留圖表過時的相容性用意，又能讓你將它用於真正擅長的用途。
如果你正在權衡各種選項，新手隨機色彩產生器：快速入門指南對此有詳細說明。
如果你正在權衡各種選項，從影像取得網頁安全色彩：收斂任何取樣的 HEX對此有詳細說明。