網頁安全色是一組固定數量的色彩集合，精確包含 216 種色調與變化，是由紅、綠、藍三個通道各自六個等距的數值所組合而成。這六個十進位等級為 0、51、102、153、204 和 255，以十六進位表示則為 00、33、66、99、CC 和 FF。由於三個通道各自獨立，獨特色調的總數等於 6 × 6 × 6 = 216。調色盤中的每一個色塊都是這些通道等級的某個特定組合，因此集合內的變化本質上就是紅色六個選項、綠色六個選項、藍色六個選項的交叉乘積。這個結構意味著調色盤的行為類似一個量化的 RGB 立方體:你可以沿著一個軸在六個紅色等級之間跳動，沿著兩個軸在 36 組紅綠配對之間跳動，而沿著全部三個軸則可在 216 個獨特的 HEX 代碼之間移動。若要查看或複製這 216 種色調與變化中的任何一個，請開啟 網頁安全色圖表，其中以互動式色塊呈現每個項目，並附上完整的六位數 HEX 值。
構成每一個色調的六個通道等級
網頁安全色調色盤並非設計師精選的色彩清單。它來自一個單一、機械化的規則:三個 RGB 通道各自只能是六個數值之一。以十進位表示，這六個等級為 0、51、102、153、204 和 255。在 CSS 所使用的兩位數十六進位記法中，則變成 00、33、66、99、CC 和 FF。相鄰等級之間的步進大小在十進位中為 51(十六進位中為 0x33)，將完整的 0–255 範圍平分為五個等距步進。
這種均勻的間距控制了任何單一通道內可存在的相異色調數量。單看紅色通道:立方體中正好有六種可能的紅色，從純黑 (0) 一直延伸到全紅 (255)。加入綠色，你就會得到 6 × 6 = 36 組紅綠組合，其中有六組的紅色與綠色數值相同。再加入藍色，總數就成為 6 × 6 × 6 = 216，也就是整個調色盤。這六個等級是唯一的控制旋鈕;圖表中的其他一切都是這些旋鈕的組合。
W3C 對 CSS 的歷史性介紹將這六個通道等級記錄為瀏覽器安全色調色盤的基礎，而 W3C 網頁可及性倡議較早期的選色器範例則獨立列出相同的 216 項網格。W3C 的來源確認了這條規則，而網頁安全色圖表則將這條規則轉化為可供瀏覽、並能直接複製的參考資料。
| 十進位等級 | 十六進位等級 | 二進位 | 在立方體中的角色 |
|---|---|---|---|
| 0 | 00 | 00000000 | 通道完全關閉(無光) |
| 51 | 33 | 00110011 | 零以上的最低可見色調 |
| 102 | 66 | 01100110 | 中下亮度色調 |
| 153 | 99 | 10011001 | 中上亮度色調 |
| 204 | CC | 11001100 | 接近最大值的明亮色調 |
| 255 | FF | 11111111 | 通道完全開啟(全光) |
此表格的每一列都是任何單一通道的有效數值。這六列組合起來，就是 216 色彩色組中每一個變化的來源。
216 種變化如何建構而成
調色盤中的每一個色塊都對應一組特定的通道數值三元組 (R、G、B)，從六個允許的等級中選出。這使得立方體具有可預測性。216 種色調中有八個位於立方體的頂點，包括黑色 (#000000)、白色 (#FFFFFF)、三個純原色 (#FF0000、#00FF00、#0000FF)，以及三個純二次色 (#FFFF00、#00FFFF、#FF00FF)。有六個色調沿著純灰階對角線排列，該處紅、綠、藍共享相同的等級。其餘的變化則填滿邊緣與內部，每個通道在此獨立選取自己的等級。
| 立方體區域 | 通道模式 | 你在該處看到的內容 |
|---|---|---|
| 頂點 | 每個通道為 00 或 FF | 黑色、白色、三原色、三二次色 |
| 灰階軸 | 紅 = 綠 = 藍 | 從 #000000 到 #FFFFFF 的六個等距步進 |
| 原色混合邊 | 一個通道變動，另外兩個相同 | 從黑色經由某原色過渡到白色的漸變 |
| 立方體內部 | 三個通道取不同的允許等級 | 每個通道獨立的混合色調 |
此圖表以確定性的「紅為主、綠為次、藍為輔」的順序排列所有這些變化，這是由六個來源等級所產生，而不是從硬式編碼的清單複製而來。所產生的表格會經過檢查，確保正好有 216 個項目、唯一的 HEX 值，以及通道皆屬於六個允許的等級，讓表格保持可重現且可稽核。
瀏覽、複製並比對一個色調
處理這 216 個立方體最快的方式，就是將網頁安全色圖表當作即時參考使用。圖表將每個色塊以互動式網格中的可點擊儲存格呈現，在每個儲存格內顯示一個簡短的三字元提示，並透過儲存格的無障礙標籤、title 屬性，以及在選取色塊時出現的較大結果區，來顯示完整的六位數 HEX 代碼。
- 瀏覽網格以找出色調。掃視 216 個色塊，直到找到符合你設計需求的變化為止。確定性的列序意味著相關的色調(例如，所有使用 #33 作為紅色通道的色塊)會聚集在一起。
- 選取色塊以查看其完整 HEX。點擊該儲存格。圖表會在結果區顯示完整的六位數 HEX 代碼，以便你貼到 CSS、影像編輯器或樣式指南中。
- 使用簡短提示以便快速閱讀。每個色塊顯示一個三字元標籤以維持網格可讀性;在實際製作的程式碼中，請依賴完整的六位數值，讓通道等級明確無誤。
- 將既有的 HEX 比對回立方體。當你手上有一個來自調色盤之外的顏色時，在比對輸入欄中輸入三位數簡寫(例如 #abc)或六位數 HEX(例如 #3470d0)，然後執行查詢。
- 將結果視為參考，而非最終調色盤。將比對出的色塊視為營造刻意復古風格的起點，然後單獨測試任何前景/背景配對的可及性。
將 HEX 吸附至最近的立方體變化
這個比對步驟並非進行感知上的比較。它是針對每個通道，四捨五入到六個允許等級中最近的一個;由於各軸獨立且等距，這在數學上等同於在未加權的 RGB 立方體中取最近距離。比對器會先依據標準 CSS 簡寫規則，將三位數簡寫(例如 #abc)展開為 #aabbcc，然後再對每個通道獨立進行吸附。
#3470d0 的演算範例:
- 解析通道。#3470d0 可拆解為紅色 = 0x34 = 52、綠色 = 0x70 = 112、藍色 = 0xD0 = 208。
- 將每個通道獨立四捨五入到 {0、51、102、153、204、255} 中最近的一個。紅色 52 四捨五入到 51(距離 1，下一個等級 102 距離為 50)。綠色 112 四捨五入到 102(距離 10，下一個等級 153 距離為 41)。藍色 208 四捨五入到 204(距離 4，下一個等級 255 距離為 47)。
- 將吸附後的通道重新組合成 HEX。51 → 33、102 → 66、204 → CC。組合結果:#3366CC。
獨立的通道吸附讓結果可預測且易於稽核，但這並非感知上的色差計算，也不考慮人眼對通道變化的權重方式。Gamma 編碼的 sRGB 並不具備感知均勻性，因此視覺上最接近的色塊，有時會與歐氏 RGB 的結果不同。專業的工作流程可能會改為在 Lab 或 OKLCH 中比較顏色、考量 ICC 設定檔，或針對整張影像優化調色盤。
色塊標籤的含義
如果每個儲存格都在內文中顯示完整的六位數 HEX，那麼這個 216 格的網格將會難以閱讀。因此，每個色塊顯示一個簡短的三字元提示以維持網格精簡，而其無障礙標籤與 title 屬性則包含完整的六位數值與 RGB 三元組。螢幕閱讀器與鍵盤使用者仍可聽到完整的數值。選取色塊時，會在較大的結果區顯示完整數值，這也是圖表提供完整代碼以供手動選取的地方。
剪貼簿的存取可能會被瀏覽器的權限設定拒絕。當這種情況發生時，結果區中可見的代碼仍然可供手動選取與複製，因此工作流程不會因為權限提示而中斷。
216 種色調仍然有其重要性之時
現代的電腦、手機與瀏覽器通常能支援數百萬甚至數十億種可顯示的色彩組合，因此對於一般的網站樣式設計來說，網頁安全色已不再是相容性的必要條件。此圖表在以下幾個特定情境中仍然有用:研究量化 RGB 立方體的幾何結構、挑選刻意受限的復古調色盤、創作低色彩數的美術作品或像素風格插畫、講解十六進位通道如何組合，以及重現引用特定 216 立方體數值的較舊設計。
此處的「網頁安全」是一個歷史性的名稱。它並非主張每個色塊在文字對比、可及性、印刷、品牌或各種當前顯示技術上都是安全的。請將這個調色盤視為一個透明的參考、一個吸附至立方體的比對器，以及一個複製輔助工具，同時明白標示其過時的相容性用途。
216 立方體的限制與陷阱
在使用這個立方體時，有幾項限制容易遭到忽略:
- 吸附是針對通道，而非針對感知。獨立的通道四捨五入具有可預測性，但視覺上最接近的色塊，偶爾會與歐氏 RGB 的結果不同。當目標是「看起來最接近」而非「在原始 RGB 中最接近」時，請在具備感知均勻性的色彩空間中進行比較。
- 屬於立方體並不保證可讀性。調色盤項目並不會自動適合作為前景文字。對比度取決於前景與背景雙方，以及字型大小、粗細與適用的可及性標準。在選定色調後，請使用專門的對比工具測試實際的配對。
- 這個調色盤沒有品牌、名稱或材質綁定。圖表並未以主觀名稱標示色塊，也未暗示其等同於 Pantone、CMYK 油墨、材質樣本或經過裝置校準的輸出。
- 除非設計需求明確要求，否則不要將現代品牌或資料視覺化限制在 216 種選擇中。這項限制是一種創作上的選擇，而非品質的底線。
若要取得以初學者為導向、說明相同六通道規則的逐步介紹，請參閱 網頁安全色入門:平實英語指南。圖表本身接受任何三位數或六位數輸入，並立即回傳最近的立方體變化，因此上述的演算範例可直接在工具中重現。
若要深入了解，請參閱 線上色彩對比檢查器是否安全使用?。