網頁安全色彩 CSS 代碼使用六位數十六進位格式，其中每一對數字代表紅色、綠色和藍色的強度，從 00（關閉）到 FF（255，全開）。歷史上的瀏覽器安全調色盤恰好包含 216 個這樣的代碼，方式是將三個 RGB 通道各自限制為六個值之一 — 0、51、102、153、204 和 255 — 以十六進位寫成 00、33、66、99、CC 和 FF。在三個通道上各自獨立組合六個選擇，可產生 6 × 6 × 6，也就是 216 個唯一的 HEX 項目，例如 #3366CC、#FF9900 和 #009966。調色盤中的每個代碼都遵循這個嚴格的三對結構，因此這個色立方體可以表示為 216 個格式正確的顏色值所組成的 CSS 列表，而非任意拼湊的集合。由於每個通道都是 51 的倍數，網頁安全 CSS 代碼也很容易辨認：像 #3366CC 這樣的十六進位值屬於這個色立方體，因為 0x33（51）、0x66（102）和 0xCC（204）都是 51 的倍數，而 #1234AB 則不是。這種一致的間距正是讓這個調色盤在早期只能同時顯示 256 種索引色的瀏覽器中，成為可靠參考的關鍵。
216 個網頁安全代碼背後的 CSS HEX 格式
CSS 使用前置井字號以及三位或六位十六進位數字來定義顏色字面值。六位數形式寫成 #RRGGBB，是標準的網頁安全 CSS 代碼格式：第一對設定紅色，第二對設定綠色，第三對設定藍色，每個都在 00–FF 的範圍內。三位數形式寫成 #RGB，會透過複製每個數字展開為 #RRGGBB — 因此 #369 會變成 #336699 — 只要三對相同的色立方體顏色在任一種形式下都成立。網頁安全色立方體就是所有 #RRGGBB 字串的集合，其中紅、綠、藍三對各自落在六個允許的層級之一。這條單一規則就產生了整個 216 項的調色盤，這也是為什麼 Web Safe Colors Chart 能用一小段程式碼而非手動輸入的表格來顯示完整清單。
由於這條規則是機械式的，你可以透過檢查每個位元組是否為 51 的倍數來稽核任何宣稱的網頁安全代碼。十進位 51 在十六進位是 33，102 是 66，153 是 99，204 是 CC，255 是 FF。因此完整的允許階梯就是 00、33、66、99、CC、FF — 恰好六個值，間隔均勻地相差 51。記住這六對數字，就足以一眼讀懂任何網頁安全 CSS 代碼，並挑出那些不屬於色立方體的代碼。
為何通道層級是 00、33、66、99、CC 和 FF
這六個層級來自於將 0–255 的範圍平分為五個等距的 51 步進。間隔 51 的六個端點 — 0、51、102、153、204、255 — 完整覆蓋整個位元組範圍，不會重疊或遺漏。每個層級也以兩位數十六進位表示，因為 CSS 顏色字面值要求每個通道剛好兩位十六進位數字。將 51 轉換為 16 進位會得到 33，102 轉換後為 66，153 為 99，204 為 CC，255 為 FF，而 00 則是起點。結果就是六組容易辨識的數對，在十進位與十六進位之間往返轉換時不會出錯。
| 十進位通道值 | 十六進位數字對 | CSS 簡寫數字對 |
|---|---|---|
| 0 | 00 | 00 |
| 51 | 33 | 33 |
| 102 | 66 | 66 |
| 153 | 99 | 99 |
| 204 | CC | CC |
| 255 | FF | FF |
這個表格就是色立方體的完整語法。任何三對都出現在右欄的 #RRGGBB 都是有效的網頁安全 CSS 代碼；任何落在該欄之外的數對都不屬於這個調色盤。W3C 對 CSS 的介紹將這六個等距層級記載為原始的瀏覽器安全色彩定義，因此這條規則擁有長期且具權威性的來源，而非僅是社群慣例。
在樣式表中使用網頁安全代碼
一旦你擁有像 #3366CC 這樣的色立方體項目，就可以直接放入任何接受顏色的 CSS 屬性中。Web Safe Colors Chart 讓你瀏覽這 216 個色票，複製所選項目的完整六位數 HEX，然後直接貼到你的樣式表中。同樣的代碼可用於 color、background-color、border-color、outline-color、fill、stroke 以及任何其他接受顏色的屬性。
- 開啟 Web Safe Colors Chart，在 216 個色票的網格中掃描，直到找到你想要的顏色。
- 點擊該色票；圖表會在較大的結果區域顯示完整的六位數 HEX（例如 #3366CC），以及對應的 RGB 三元組。
- 複製這個六位數值 — 可存取的標籤和 title 屬性一律包含完整代碼，即使色票本身只顯示縮寫提示也是如此。
- 將其貼到你的 CSS 中，並以前置井字號標示：color: #3366CC; 或 background-color: #3366CC;。
- 如果你三個通道的數對各自重複，可以使用三位數簡寫：#369 會展開為 #336699，每個宣告可省下四個字元。
- 或者，如果你的專案統一採用函式標記法，也可以貼上等價的 rgb(51, 102, 204) 形式。
在處理調色盤時，將選定的代碼列為 CSS 自訂屬性，讓相同的值在多條規則之間保持一致：在 :root 中加入 --brand-blue: #3366CC;，然後在其他地方使用 color: var(--brand-blue);。剪貼簿的存取可能會被瀏覽器權限拒絕，但可見的代碼仍然可供手動選取。
CSS 簡寫、rgb() 與十六進位轉換
網頁安全代碼有一個實用的特性：三位數與六位數的 HEX 形式在色立方體中永遠一致，而十進位三元組也必定是 51 的倍數。這使得在這個調色盤內，#RRGGBB、#RGB 和 rgb(r, g, b) 之間的往返轉換完全無損。像 #009966 這樣的代碼可分解為紅色 0、綠色 153、藍色 102 — 這些值在任何標記法中都毫無歧義，因此 HEX to RGB converter 只是純粹的格式轉換，而非顏色位移。簡寫展開規則是內建於 CSS，而非色立方體：#0C9 會展開為 #00CC99，因為解析器在查詢前會複製每個十六進位數字，而 00、CC、99 都落在允許的層級，所以展開後的值仍然是有效的網頁安全代碼。
當你需要對應一個不在色立方體中的 HEX 時，Web Safe Colors Chart 會將每個通道獨立四捨五入到最接近的 51 倍數，然後重新組合這三個對齊後的層級。例如，輸入 #3470D0 會變成：
- 紅色 0x34 = 52 → 最接近的 51 倍數為 51 → 0x33
- 綠色 0x70 = 112 → 最接近的 51 倍數為 102 → 0x66
- 藍色 0xD0 = 208 → 最接近的 51 倍數為 204 → 0xCC
重新組合後，對齊後的 CSS 代碼為 #3366CC。由於三個軸各自獨立且間距均勻，這種逐通道的四捨五入等同於在未加權的 RGB 色立方體中進行最近鄰搜尋。這是一條確定性且易於稽核的規則，而非感知上的配對，因此不要預期視覺上最接近的色票一定會與感知均勻的 CIELAB 結果一致。
網頁安全 CSS 代碼無法保證的事
「網頁安全」這個標籤是關於 8 位元顯示器如何呈現色立方體色的歷史相容性宣稱，並非對現代螢幕、無障礙、印刷或品牌識別的承諾。如今的瀏覽器能呈現數百萬甚至數十億種不同的顏色，因此對於一般的網站樣式而言，網頁安全狀態已不再是必要條件 — 它是一種刻意的限制或學習輔助，而非預設值。這個標籤也與文字易讀性無關：一個色票可能屬於這個色立方體，卻仍無法在所選的背景上通過 WCAG 對比標準；或在某個背景上通過，卻在另一個背景上失敗。
選定代碼後，請將實際的前景／背景配對透過專用的對比工具進行檢測，而不是假設某個知名調色盤能保證可讀性。字級、字重以及適用的 WCAG 準則都會造成影響，而同一個 HEX 在 #FFFFFF 與 #000000 背景上的表現可能截然不同。對於需要感知精度的調色盤決策，特別是涵蓋整張圖片或整個品牌系統時，色立方體的配對只是起點，而非最終答案 — 專業工作流程會在 CIELAB 或 OKLCH 中進行比較、套用 ICC 設定檔，或在整張圖片上最佳化，而非進行逐通道的對齊。
這個色立方體仍然是透明且易於教學的十六進位通道參考，也是從受限調色盤中快速複製可用 CSS 代碼的便利方式。請將它視為一份有歷史文件依據的表格，在簡報需求符合時將其 HEX 值貼入樣式表，並在交付成果時明確說明其過時的相容性用途。
延伸閱讀：Color Palette Generator for Web Design: From HEX to UI。