網頁安全色調色盤是一組正好 216 個十六進位顏色的集合，其中每個紅色、綠色和藍色通道僅限於以下六個數值之一：0、51、102、153、204 或 255，以十六進位表示為 00、33、66、99、CC 和 FF。在三個通道上獨立選取會產生 6 × 6 × 6 = 216 種唯一組合，每種組合以一個六位數的十六進位代碼表示。這個調色盤源自一個許多顯示器一次只能顯示 256 種索引色彩的時代，因此從一個共享的立方體中選擇顏色，可降低瀏覽器將頁面顏色遞色成斑駁近似值的機會。W3C 歷史性的 CSS 介紹 將這六個通道層級記錄為瀏覽器安全調色盤，而另一份 W3C 網路無障礙計畫的 216 色挑選器 範例則獨立列出相同的色盤。現代的電腦、手機和瀏覽器支援數百萬甚至數十億種可顯示的色彩組合，因此對於一般網站樣式設計而言，網頁安全色已不再是相容性的必要條件。然而，它仍然有用，例如作為復古設計的透明參考、作為教授十六進位通道的方式，以及作為低色彩藝術創作中刻意受限的調色盤。網頁安全色圖表 將整個立方體以互動式方格呈現，讓你一鍵複製任何六位數值，並透過獨立四捨五入每個通道，將任何自訂的三位數或六位數十六進位對應到最近的立方體項目。
216 種顏色的由來
網頁安全調色盤是由一組小而固定的通道層級所構成，而不是每個 RGB 通道可以取值的完整 0–255 範圍。每個通道使用六個層級獨立運作，就能產生整個立方體：
| 十進位層級 | 十六進位等值 | 通道角色 |
|---|---|---|
| 0 | 00 | 關閉 / 無貢獻 |
| 51 | 33 | 四分之一強度 |
| 102 | 66 | 中低 |
| 153 | 99 | 中高 |
| 204 | CC | 四分之三強度 |
| 255 | FF | 全強度 |
在紅、綠、藍上獨立選取這六個層級，正好會產生 216 種唯一的顏色，而其間距也是刻意設計的：255 ÷ 5 = 51，因此這些層級以五個等距的步進涵蓋整個範圍。每個結果都只是這 216 種組合之一，沒有感知名稱、沒有 Pantone 對應，也沒有 CMYK 準確度的聲明。瀏覽器安全這個標籤是 256 色時代的歷史名稱，並非目前對無障礙性、印刷精確度或在任何特定裝置上可讀性的保證。
圖表本身是以決定性的紅主、綠中、藍次的順序從這六個來源層級所產生，而非從一個不透明、寫死的清單複製而來，而產生的表格會經過檢查，確認正好有 216 個項目、十六進位值皆不重複，且通道皆屬於六個允許的層級。正是這樣的建構方式讓吸附功能表現可預期，也讓這個立方體成為有用的教學素材：每個顏色都有可追溯的配方，由三個通道選擇所組成。
從立方體瀏覽、複製與吸附任何十六進位色
網頁安全色圖表將每一個 216 個十六進位值放在單一、決定性的方格上，依紅、綠、藍的順序排列。若要從立方體中取出可用的顏色，或將外部顏色對應到立方體中，請依照下列步驟進行：
- 開啟網頁安全色圖表，以紅主、綠中、藍次的順序瀏覽 216 個色塊，直到找到一個起點。
- 點擊任何色塊以選取它。完整的六位數十六進位代碼會出現在結果區中，旁邊顯示 RGB 三元組，而每個色塊的縮寫三位數提示、無障礙標籤和標題都帶有完整的六位數值，供螢幕閱讀器和工具提示檢查使用。
- 使用複製控制項將六位數十六進位代碼放到剪貼簿。如果瀏覽器拒絕剪貼簿存取，顯示的代碼仍是可選取的文字，你可以手動複製。
- 若要將外部顏色帶入立方體，請在對應欄位中輸入有效的三位數縮寫（例如 #abc）或完整的六位數十六進位代碼，並選擇「尋找對應」。三位數值會先使用標準的 CSS 縮寫規則展開為六位數，因此 #abc 會在進行任何四捨五入之前變成 #aabbcc。
- 讀取吸附後的結果。每個紅、綠和藍通道都已獨立四捨五入至六個允許層級中最近的一個，然後重新組合成一個單一的六位數十六進位代碼，你可以直接放入樣式表中。
吸附規則簡單且可預期：每個 8 位元通道在允許集合 {0, 51, 102, 153, 204, 255} 中獨立四捨五入至最接近的 51 倍數。由於三個軸是獨立的，這等同於在普通未加權的 RGB 立方體中的最近距離，使得結果易於稽核與推理。這並非感知色彩差異的計算，因此來自 Lab 或 OKLCH 等感知模型的視覺最接近色塊，偶爾可能與歐幾里得 RGB 的結果不同。
演算範例。 輸入 #3470d0。其十六進位通道為 0x34、0x70 和 0xD0，分別等於十進位的 52、112 和 208。將每個通道四捨五入至最接近的允許層級：
- 52：到 0 的距離為 52，到 51 的距離為 1，到 102 的距離為 50 → 最近為 51 → 十六進位 33。
- 112：到 51 的距離為 61，到 102 的距離為 10，到 153 的距離為 41 → 最近為 102 → 十六進位 66。
- 208：到 153 的距離為 55，到 204 的距離為 4，到 255 的距離為 47 → 最近為 204 → 十六進位 CC。
重新組合後，吸附結果為 #3366CC。
刻意選用 216 立方體
216 色的限制在今天聽起來很小，但正是這個限制構成了幾個實際工作流程的價值主張。立方體作為相容性修補手段的吸引力較低，作為刻意的設計或教學框架則更有意思。
| 工作流程 | 立方體的助益 | 注意事項 |
|---|---|---|
| 復古或像素藝術設計 | 六通道的方格呼應較舊的 8 位元顯示器外觀，並強制營造出刻意受限的視覺風格。 | 現代螢幕會清晰呈現這個立方體，因此若復古外觀真的很重要，請搭配清晰的像素渲染。 |
| 低色彩插圖與資料圖表 | 預先了解每個可能的色塊，使得在多個圖表中規劃一致且有限的配色方案更容易。 | 資料圖表中的色彩編碼在無障礙方面仍依賴形狀和標籤，而非僅靠調色盤本身。 |
| 教授十六進位通道 | 每個通道六個可預測的層級，比每個通道 256 個任意數值更易於推理。 | 在立方體之外同時展示縮寫展開與通道四捨五入，讓學生看到完整的流程。 |
| 重現較舊的介面 | 螢幕截圖和舊版 CSS 經常假設使用 216 方格，因此圖表提供了精確重現的參考。 | 將重建的像素與原始版本取樣比對，而非僅憑色彩名稱或記憶來確認其一致性。 |
對於一般的現代品牌或介面樣式設計，由 配色產生器 產生的無限制調色盤能提供更多細膩變化。將 216 立方體視為透明的參考、對應工具和複製輔助，而非預設的品牌決策，你就能在不大肆渲染的情況下，獲得這個限制所帶來的價值。
對比、轉換與「網頁安全」的極限
「網頁安全」這個標籤僅描述立方體的建構方式；它並不保證對比、無障礙性、品牌中立性或印刷精確度。立方體中的許多色塊具有相近的亮度，當以另一個中間調色塊作為前景對背景時，將無法通過 WCAG 對比要求。色彩值、對比檢查和視覺外觀在不同裝置上也遵循不同規則，因此任何採用「網頁安全」的工作流程都應將立方體與另一項獨立檢查搭配使用，而非將這個歷史名稱視為無障礙性或品質的保證。
- 文字的無障礙性取決於前景與背景的配對，加上字型大小與粗細。請務必使用 色彩對比檢查工具 驗證實際的配對，而非假設歷史性的調色盤能保證螢幕上的可讀性。
- 在 sRGB 內，十六進位與 8 位元 RGB 的轉換是無損的，因為立方體只是 sRGB 的一個子方格。透過 RGB 轉十六進位轉換器 進行來回轉換並不會改變已吸附的值，但也不會產生任何感知上的平滑化效果。
- CMYK 印刷、Pantone 專色油墨、ICC 管理的顯示器，以及 Lab 或 OKLCH 等感知色彩模型都不在立方體的範圍內，因此將立方體中的值視為印刷目標時，只能得到近似值。
- 吸附功能刻意採用單純的未加權 RGB 對應，因此應將其視為快速的參考，而非跨影像或整個調色盤進行感知比較的替代方案。
將圖表視為一個值得刻意採納的限制：挑選共用立方體中同一個協調切片的顏色，將任何外部的十六進位值吸附至相同的切片，然後在發布前將產生的配對通過真正的對比檢查工具。216 個刻意選項所帶來的紀律，在今天作為設計與教學工具，比作為相容性修補手段更為實用，而這正是此圖表被建構來支援的角色。
相關閱讀：配色產生器範例：從單一基底產生 6 種配色方案。
相關閱讀：網頁安全色無障礙對比：配對與測試。