網頁安全色盤正好包含 216 種顏色，由 RGB 三個通道中每個通道的六個允許值組合而成，產生 6 × 6 × 6 個獨特的 HEX 代碼。因此，每個成員都是由一組 {00, 33, 66, 99, CC, FF} 中取出的每通道兩個十六進位數字所定義，這對應到十進位層級 {0, 51, 102, 153, 204, 255}。由於三個選擇彼此獨立，整個色盤形成一個小立方體，嵌在遠遠更大的 RGB 立方體之內，網格中的每一個項目都是合法的網頁安全範例。這份清單源自一個顯示器一次只能顯示 256 種索引色的年代，當時一套共用且可預測的色盤能降低瀏覽器將頁面顏色抖動成斑點近似色的機率。現代螢幕能呈現數百萬甚至數十億種不同顏色，因此這個立方體已不再是普通網站樣式的相容性要求。它留存下來，是作為研究量化 RGB 立方體、建立復古色盤、創作低色彩作品，以及講解十六進位通道運作方式的參考。像是 網頁安全色盤圖表這類工具，能讓你瀏覽全部 216 個項目、複製完整的六位數代碼，或將任何輸入的 HEX 對齊到立方體中最近的成員。
每個範例背後的六個通道層級
216 色網頁安全色盤中的每個範例都由相同的六個層級構成，並重複三次——紅、綠、藍各一次。這組層級是立方體中唯一的變化來源，下表列出每個階梯的十進位與十六進位形式。下方的每個值都可獨立選擇其通道，這就是為什麼總共會有 6 × 6 × 6 種組合。
| 十進位 | HEX 數字 | 在立方體中的角色 |
|---|---|---|
| 0 | 00 | 通道最小值（關閉） |
| 51 | 33 | 零之上的第一階 |
| 102 | 66 | 中低階 |
| 153 | 99 | 中高階 |
| 204 | CC | 高強度階 |
| 255 | FF | 通道最大值（全開） |
在線性 RGB 的概念下，相鄰層級之間的間距是均勻的。正是這種均勻性讓「對齊到最近」函式變得可預測：輸入 HEX 的每個通道會獨立四捨五入到六個允許值中最接近的一個，然後再把三個對齊後的通道重新組合成一個新的六位數代碼。這張圖表是由這些通道層級的笛卡兒積產生，而非從一份不透明、寫死的清單複製而來，這表示它可以逐列、以紅主、綠中、藍次的順序進行稽核。
在無加權的 RGB 立方體中，獨立通道對齊等同於最近距離匹配，因為各軸彼此獨立且間距均勻。然而，它並不是一種感知上的匹配。經過伽碼編碼的 sRGB 值並不具備感知均勻性，因此數學上最接近的色塊，對人眼來說未必是視覺上最接近的色塊。Lab、OKLCH 或基於 ΔE 的工作流程能處理這種差異，但這個舊式立方體刻意保持簡單的通道對齊規則清晰可見。
具體的網頁安全色範例及其 HEX 代碼
瀏覽 216 色立方體時，會面對一個網格，其中每個項目的最後兩個字元都來自集合 {00, 33, 66, 99, CC, FF}。以下範例是這個立方體的一個小型剖面，特別挑選以涵蓋各個角落、灰階軸線，以及一些位於立方體中央、色設計師在需要快速範例來為版面定錨時常會先取用的色調。
| 色塊 | HEX 代碼 | 通道分解 | 作為範例的典型用途 |
|---|---|---|---|
| 黑色 | #000000 | R 00, G 00, B 00 | 背景、淺色表面的內文文字 |
| 白色 | #FFFFFF | R FF, G FF, B FF | 背景、深色表面的內文文字 |
| 純紅 | #FF0000 | R FF, G 00, B 00 | 警告、主要品牌紅 |
| 純綠 | #00FF00 | R 00, G FF, B 00 | 成功狀態、通道最大值展示 |
| 純藍 | #0000FF | R 00, G 00, B FF | 連結、通道最大值展示 |
| 金黃色 | #FFCC00 | R FF, G CC, B 00 | 強調色、次要品牌點綴 |
| 板岩藍 | #336699 | R 33, G 66, B 99 | 標題、經典的安全網頁色調 |
| 磚紅 | #CC3333 | R CC, G 33, B 33 | 錯誤狀態、強調文字 |
| 葉綠 | #66CC66 | R 66, G CC, B 66 | 成功徽章、增長圖表 |
| 中性灰 | #999999 | R 99, G 99, B 99 | 白色背景上的內文文字、分隔線 |
| 深炭灰 | #333333 | R 33, G 33, B 33 | 標題、深色 UI 表面 |
| 淺灰 | #CCCCCC | R CC, G CC, B CC | 邊框、停用狀態 |
表格的每一列都遵守同一條規則：每一對十六進位數字都必須取自 {00, 33, 66, 99, CC, FF}。因為三個通道彼此獨立，你可以從這組集合中任意挑選三個值組合，就會得到一個合法的網頁安全範例。這裡沒有關於順序或和諧性的隱藏要求——唯一的限制就是六階通道規則。這 216 個項目可以依照紅主、綠中、藍次的確定性順序，由這六個來源層級產生，而 W3C 網頁無障礙倡議組織的 216 選色器範例也獨立列出相同的構成方式。
實作範例——將一個 HEX 對齊到立方體
想看一個現代 HEX 如何落入 216 立方體內部，以 #3470d0 為例。匹配器會先展開任何 CSS 簡寫，然後將每個 8 位元通道獨立四捨五入到最近的 51 倍數。#3470d0 每個通道的十進位值分別是 52、112 與 208。
- 紅色通道：52 距離 51 只有 1 個單位，距離 0 卻有 52 個單位，因此對齊結果為 51，寫成 33。
- 綠色通道：112 距離 102 有 10 個單位，距離 153 有 41 個單位，因此對齊結果為 102，寫成 66。
- 藍色通道：208 距離 204 有 4 個單位，距離 255 有 47 個單位，因此對齊結果為 204，寫成 CC。
依照紅綠藍順序將對齊後的層級重新組合，得到 #3366cc。在獨立通道四捨五入的規則下，這就是最接近 #3470d0 的立方體成員。根據 W3C 對 CSS 的歷史性介紹——其中記載了相同的六個等距通道層級——這條規則是把任何 RGB 三元組對應到舊式色盤的標準作法。相同方法也適用於三位數簡寫：像 #abc 這樣的輸入會先展開成 #aabbcc，之後才進行通道對齊。
如何瀏覽與複製範例
- 瀏覽 216 個色塊，選擇任何顏色以顯示並複製其完整的六位數 HEX 值。
- 若要匹配其他顏色，輸入一個有效的三位數或六位數 HEX 代碼，然後選擇「尋找匹配」。
- 將選出的結果作為歷史性色盤參考，再另外測試真實的前景與背景配對的對比度。
互動式網格會顯示簡短的三字元提示，讓 216 個項目的檢視畫面保持精簡；每個色塊的無障礙標籤與 title 則承載完整的六位數值與 RGB 三元組。點擊色塊會在較大的結果區域中開啟完整代碼，方便在瀏覽器封鎖剪貼簿存取時清楚閱讀並手動複製。當你輸入像 #abc 這樣的值時，圖表會以正常的 CSS 行為把簡寫展開成 #aabbcc，之後才執行通道層級的對齊。三位數輸入會在匹配前先展開，六位數輸入則直接進行匹配；至於「tomato」或「rebeccapurple」這類具名顏色則不接受，因為處理它們需要一份外部的名稱對 HEX 對照表，而這份圖表刻意避免引入。
這個流程讓立方體的機械式構成方式保持透明。沒有主觀的顏色名稱、沒有宣稱等同於 Pantone 或 CMYK 油墨，也沒有經過裝置校正的輸出。每個色塊都是由六個來源層級產生，而非從封閉的查找表取出，這表示產生的表格會經過檢查，確認剛好 216 個項目、唯一的 HEX 值，以及通道皆屬於六個允許層級之一。
這些範例在現代工作流程中的適用位置
現代電腦、手機與瀏覽器通常能支援數百萬甚至數十億種可顯示的顏色組合，因此網頁安全色已不再是普通網站樣式的相容性要求。這 216 個範例在幾個特定情境中仍然有用：
- 研究 8 位元通道如何量化為六個階梯。這個立方體是講解十六進位通道運算，以及線性與伽碼編碼色彩差異的乾淨而有限的範例。
- 建立刻意受限的復古色盤。獨立遊戲、像素藝術與懷舊風格的網頁專案，常會想要重現舊式 256 色顯示器的視覺特徵。
- 創作低色彩作品或圖示組。一份固定 216 項的色盤能迫使你做出強烈的色彩選擇，並簡化跨平台的素材重用。
- 精準重現較舊的設計。在檔案保存工作中，有時需要使用原始設計師當年使用的同一組色塊，連同那個時代的相容性脈絡一起重現。
- 展示確定性的輸出結果。由於這個立方體是由六個來源層級依紅主、綠中、藍次的順序產生，你可以逐行稽核，而不必信任一份不透明、寫死的清單。
這裡的「網頁安全」標籤是一個歷史性的名稱。它並不是宣稱每個色塊都對文字、無障礙、列印、品牌或每種現行顯示技術安全。對比度同時取決於前景與背景，並受到字級、字重以及適用的無障礙準則影響，因此在選定任何一對範例之後，請用 顏色對比檢查工具 實際測試該配對，而不要假設一個著名的歷史色盤就一定能保證可讀性。若想更深入地瞭解如何針對性地配對與測試這些色塊，網頁安全無障礙對比指南 會更詳細地說明相同的前景與背景組合。同樣地，現代的品牌識別或資料視覺化，除非創作簡報明確要求此限制，否則不應被侷限於這 216 個選擇。請把這份圖表當作透明的參考、匹配器與複製輔助工具，同時牢記其過時的相容性用途。
延伸閱讀：RGB 轉 HEX 初學者指南：白話入門解說。