網頁安全色盤是一組固定的 216 種顏色，由紅、綠、藍三個通道各取六個允許值所構成 —— 也就是 0、51、102、153、204 和 255 —— 以 6 × 6 × 6 的方式組合出每一個項目。以十六進位表示時，這些通道強度會變成 00、33、66、99、CC 和 FF，這就是為什麼網頁安全色的 HEX 色碼讀起來永遠是由這些配對平滑組合而成，例如 #3366CC 或 #FF9900。這組色盤起源於 8 位元顯示器的年代，當時只能同時顯示 256 種顏色，使用一個共用子集讓瀏覽器和作業系統最有機會在不出現顫動或色偏的情況下正確呈現網頁。現代的電腦、手機和瀏覽器通常能支援數百萬甚至數十億種可顯示的顏色組合，因此對於一般的網站樣式設計而言，這組色盤已經不再是相容性的必要條件。它留存下來，是作為教學範例、自覺的設計限制，以及用來說明一個量化 RGB 色彩立方體如何建構的透明參考。透過互動式的 網頁安全色色表 來瀏覽，可以讓背後的結構變得清晰可見，而不是隱藏在寫死的清單裡。
「網頁安全」原本的意義
「網頁安全」這個說法源自早期的網路世界，當時 W3C 在 CSS 介紹中將「瀏覽器安全色」描述為一個子集，專門設計來克服 8 位元索引式顯示器的限制。在 1990 年代，大多數螢幕一次只能顯示 256 種顏色，而作業系統會保留其中約 40 個色槽給自己的介面元素使用，例如視窗邊框、選單列和游標顏色。這樣剩下大約 216 個共用色彩，Windows 和 Mac 瀏覽器都能在不替換或顫動的情況下達成共識。根據 W3C 的 CSS 歷史指南，從這個共用立方體中挑選顏色，可以降低瀏覽器將網頁顏色近似為雜訊斑點圖樣的機率。
有兩項事實可以解釋為什麼這個標籤即使在限制條件消失後仍然存在。216 這個數字從來都不是隨意選定的：它正好是三個通道各自從六個層級中選一個的組合數，數學上會將其描述為三個各自獨立的六元素集合的笛卡兒積。其次，這六個層級在 0–255 的範圍內等距分布，因此介於其間的任何色調在這個格子上都有一個明顯的最近對應值。正是這種規律性，讓這組色盤可以依照公式重現，而不是由設計師人工挑選個別項目。
216 背後的數學
每一個網頁安全色都由三個獨立選擇所定義：紅的多寡、綠的多寡、藍的多寡。每個通道必須剛好是六個十進位值之一 —— 0、51、102、153、204 或 255 —— 這組數字以十六進位表示就是 00、33、66、99、CC 或 FF。由於三個通道互不依賴，獨特組合的總數就是 6 × 6 × 6 = 216。這個乘積就是著名的 216 這個數字的由來，同時也解釋了為什麼每一個網頁安全的 HEX 色碼在解析後，每一對都只會出自那六個值。
把這六個層級並排比較會更容易理解，因為它們在人類感知上並非等距，而是以原始的 8 位元訊號等距分布，而這正是老舊硬體唯一能直接控制的屬性。
| 十進位層級 | 十六進位配對 | 在 0–255 通道上的位置 |
|---|---|---|
| 0 | 00 | 通道完全關閉（黑色貢獻） |
| 51 | 33 | 滿強度的五分之一 |
| 102 | 66 | 滿強度的五分之二 |
| 153 | 99 | 滿強度的五分之三 |
| 204 | CC | 滿強度的五分之四 |
| 255 | FF | 通道達到最大值（滿強度） |
因為 255 ÷ 5 = 51，所以間距是精確的：每一步正好增加通道範圍的五分之一。這就是為什麼把任何顏色對齊到立方體上是機械化的簡單做法 —— 把每個通道四捨五入到最近的 51 倍數 —— 也說明了為什麼任何會算術的人都能夠查驗這個結果。
如何瀏覽並複製網頁安全色色票
檢視完整的 216 色彩格最快的方式，就是開啟互動式網頁安全色色表，並依照色表產生資料列的相同順序逐一瀏覽：紅色優先、綠色居中、藍色殿後。這種決定性的排序讓人容易預測特定色調會出現在哪個位置。
- 開啟色表並捲動 216 項的色彩格。每個儲存格都會顯示一個簡潔的三字元 HEX 提示，讓整個格子保持精簡。
- 點擊任何色票即可選取。完整的六位數 HEX 值和對應的 RGB 三元組會出現在格子上方或側邊較大的結果區域中。
- 複製六位數的 HEX。如果你的瀏覽器因權限因素阻擋剪貼簿存取，顯示出來的色碼仍然可以手動選取。
- 將滑鼠游標停留在色票上，或以鍵盤聚焦於色票，即可讀取其無障礙標籤與標題，這些內容永遠會帶有完整的六位數值，因此螢幕閱讀器接收到的是完整色碼，而非縮寫的提示。
- 將複製的 HEX 貼到你的樣式表、設計 token 檔或顏色變數中，並在你實際出貨的顯示器上進行視覺確認。
如何將任何 HEX 對應到最近的立方體項目
當設計從一個非立方體的顏色開始時 —— 例如從照片或螢幕錄影中選出的品牌色 —— 色表可以將它對齊到 216 立方體中最近的成員，讓你觀察受限版本的樣貌。
- 在對應工具的輸入欄位中輸入一個有效的 HEX 色碼。這個工具接受標準的 CSS 三位數縮寫（例如 #abc），也接受像 #3470d0 這樣的完整六位數色碼。
- 選擇「尋找對應」動作。三位數縮寫會在對應前依照一般的 CSS 規則展開，所以 #abc 在內部會變成 #aabbcc。
- 讀取對齊後的結果。輸入的每個 8 位元通道會各自獨立四捨五入到最近的 51 倍數，然後這三個對齊後的層級會重新組合成一個六位數的 HEX 色碼。
- 在結果面板中並排比較輸入與輸出。以 #3470d0 為例，紅色通道從 52 進位到 51（十六進位為 33），綠色通道從 112 進位到 102（十六進位為 66），藍色通道從 208 進位到 204（十六進位為 CC），得到的最近立方體項目是 #3366CC。
- 將這個對齊後的值作為歷史色盤的參考。請將它視為單一資料點，而非感知上的保證。
這種對齊等同於未加權 RGB 立方體中的歐幾里得最近鄰運算，因為允許的層級彼此獨立且等距分布。它並不是一種感知色差計算：人類視覺對紅、綠、藍並非等量看待，而經過伽馬編碼的 sRGB 也不是感知均勻的，因此視覺上最接近的色票有時可能與算術結果不同。任何需要感知匹配的人，應該在 Lab 或 OKLCH 中比較顏色，考量 ICC 色彩描述檔，或評估整張影像的色盤而非單一的十六進位配對。
「網頁安全」並不意味著什麼
這個歷史標籤對一件事定義得很明確，但對其他許多事卻保持沉默，而混淆這些分類會導致實際的錯誤。網頁安全色並不會自動適合作為網頁安全背景上的前景文字，因為文字的可讀性取決於所選組合的對比度、字級、字重，以及正在評量的無障礙標準。網頁安全色並不會自動適合印刷，因為 CMYK 轉換、油墨限制和紙張材質都會改變最終的呈現結果。網頁安全色並不會自動等同於 Pantone 等級色、品牌安全主色，或校色過的螢幕數值。它僅僅是 216 項量化立方體中的一個成員，而老舊硬體可能能在不替換的情況下正確顯示它。
實際上的結論是，從這個立方體中選出的任何顏色組合，在正式採用前都應該用對比工具進行測試。色彩對比檢查工具會讀入準確的前景與背景 HEX 值，依據 WCAG AA 和 AAA 規則進行檢查，並回報實測的對比值，讓決策能基於實際的配對結果，而非奠基於「知名色盤就保證可讀性」這種假設。一份關於為無障礙性配對並測試網頁安全色的指南，會更詳細地說明同樣的工作流程。
在現代工作中使用 216 立方體
這組色盤在當代工具組中仍然佔有一席之地，但只能出於正確的理由。它是十六進位通道的一個清晰的教學介面，因為每個色票的每對位元都出自同一組六個值，所以學生可以在親眼看到結構之前就先預測它。它是品牌練習、低色彩美術、像素藝術重現，或想要喚起舊式運算美學的介面中，一組刻意受限的復古色盤。它是任何需要展示通道量化如何將連續色彩空間對應到離散格點之工作流程的透明參考。
它所不是的，是一個相容性的基準。現代螢幕與瀏覽器能夠呈現完整的 sRGB 色域，因此將當代品牌系統或資料視覺化限制在 216 個選擇之中，會損害色彩準確度，卻換不到任何渲染上的安全性。當目標是教學、刻意受限或重現時，W3C 的 CSS 歷史指南仍然記載了這六個通道層級，而 W3C 網頁無障礙倡議的一個獨立範例也列出了一個 216 選項的選色工具，證實這個立方體幾十年來一直是穩定的參考。在明確理解這個脈絡下使用，這份色表就能扮演對應工具、複製輔助，以及一扇窺見受限色盤最初如何建構的窗。
如果你正在權衡各種選擇，網頁安全色入門：白話英文指南對此有詳細說明。