網頁安全色彩是一組精確的 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 標準。將立方體視為起點色盤而非最終的無障礙判定，是新手較安全的習慣，這樣既能保持圖表過時的相容性定位清晰，又能善用它真正擅長之處。