瀏覽器安全調色盤恰好包含 216 個顏色，是由六個等距的通道值 — 0、51、102、153、204 和 255 — 在紅、綠、藍三個通道上獨立組合而成。那個單一的公式 6 × 6 × 6，就是「網頁安全色」的全部歷史遺產，也是歷史調色盤中每一個色樣在每個通道上都恰好對齊到這六個層級之一的理由。以十六進位表示，這六個層級分別為 00、33、66、99、CC 和 FF，因此每一個「安全」的 HEX 色碼都僅由這些字元構成。理解這個公式，是後續每一個技巧與每一個錯誤的基礎。
網頁安全色在多數顯示器一次只能顯示 256 種索引色的時代非常實用，而共享的色立方體能減少跨平台頁面上的明顯抖動。今日的螢幕可呈現數百萬甚至數十億種顏色，因此這個調色盤已不再是普通網站樣式設計的相容性需求。它仍然保留作為一個透明的教學工具、一套現成的受限調色盤用於復古設計，以及一個精確的對齊工具，能在專案需要時將任何現代 HEX 對齊回立方體中。
216 個網頁安全色立方體究竟是什麼
這個立方體是六個紅色層級、六個綠色層級與六個藍色層級的笛卡兒積。每個軸都是獨立的，因此選定的紅色值可與任何綠色值和任何藍色值自由配對。這個乘積的大小足以記憶其形態(可辨識的純色、深色與淺色分佈)，也足以用來建立完整的介面。W3C 對 CSS 的歷史性介紹文件記載了這六個等距層級，而 W3C 網頁無障礙倡議的一個範例也獨立列出了一個 216 選項的選色器，其建構方式相同。
從數學上可直接得出兩個結論。首先，這個調色盤並非以感知亮度為基準:51 接近純黑，而 204 接近純白，但它們之間的步進是算術上等距，並非視覺上等距。其次，這個調色盤是確定性的。一個六位數的 HEX「在立方體內」，只有在每一對字元都是 00、33、66、99、CC 或 FF 之一時才成立。任何其他組合都不在安全集合內，即使看起來十分相似。
今日使用立方體的實用技巧
- 將立方體視為受限調色盤，而非相容性解法。當設計需求要求復古風格、低色彩藝術或教學範例時，刻意選擇網頁安全色。對現代工作而言，將立方體視為一種可能的起始調色盤，而非唯一允許的集合。
- 以一個主色加上兩個輔色再加一個強調色為核心。即使有 216 個選項，適度的節制仍比無限制的混用能產生更乾淨的頁面。
- 利用這個網格來教學 HEX 通道。橫向閱讀各列時，紅色通道保持不變，而綠色和藍色改變，這是展示每一對十六進位字元如何對應到 8 位元強度值的清晰方式。
- 依用途而非名稱挑選色樣。這個圖表刻意不為顏色指定主觀名稱。將每個色樣視為純粹的 HEX 值，而不要期待「海洋藍」或「森林綠」這類標籤。
- 刻意將現代 HEX 值對齊回立方體。當品牌色不在立方體內時，可使用最近比對功能找出最接近的成員，然後刻意決定要保留現代值或接受對齊後的替代值。
如何為任何 HEX 找出最接近的立方體比對
- 在瀏覽器中開啟網頁安全色圖表。
- 在色樣網格上方的 HEX 輸入欄位中，輸入一個有效的 3 位數或 6 位數十六進位代碼(字母 A 至 F、數字 0 至 9)。
- 如果您輸入了像是 #abc 的簡寫代碼，請記得 CSS 在比對前會將其展開為 #aabbcc — 圖表會自動套用相同的簡寫規則。
- 點擊尋找比對以對齊數值。工具會將每個 8 位元的紅、綠、藍通道獨立四捨五入到最接近的 51 倍數，再將三個對齊後的層級重新組合成一個六位數的 HEX 代碼，顯示於結果區。
- 以 #3470d0 為例進行驗算:紅色通道 52 四捨五入為 51(因為 51 比 0 更接近)，綠色通道 112 四捨五入為 102(因為 102 比 153 更接近)，藍色通道 208 四捨五入為 204(因為 204 比 255 更接近)。重新組合成 51-102-204，結果為 #3366cc，落在立方體內。
- 點擊 216 個網格中的任何色樣，即會顯示並複製其完整的六位數 HEX 代碼。剪貼簿存取可能會被瀏覽器權限拒絕;若是如此，請手動選取並複製顯示的代碼。
- 將對齊後的結果作為歷史調色盤的參考，然後另行測試實際的前景與背景配對的對比 — 立方體並不保證任何可讀性。
人們在使用 216 調色盤時常見的錯誤
| 錯誤 | 失敗原因 | 更好的習慣 |
|---|---|---|
| 假設「網頁安全」代表無障礙 | 安全性指的是顯示相容性，並非文字對比。 | 將每對文字與背景配對透過專用的對比工具檢測。 |
| 在同一 UI 中混用立方體與非立方體的 HEX | 會稀釋刻意的復古風格，並迫使設計系統處於半受限狀態。 | 堅持全立方式或全現代式，而非混用。 |
| 將立方體視為感知均勻 | 51 的步進在 8 位元空間中是均勻的，但在人類視覺中並非如此。 | 對感知敏感的工作使用 Lab 或 OKLCH;對可預測性需求則使用立方體。 |
| 不必要地將現代品牌限制在 216 色 | 限制了表現力，卻未在當今硬體上換來任何相容性。 | 僅在設計需求要求受限調色盤時才使用立方體。 |
| 忘記 CSS 簡寫展開 | #abc 和 #aabbcc 是同一個顏色;兩者在比對前都必須展開。 | 心中先展開簡寫，然後將任一形式輸入圖表中。 |
這些錯誤都有一個共同的根源:將歷史性的相容性慣例與當前的最佳實務混淆。立方體是有用的參考和乾淨的教學工具，但它無法取代無障礙測試、感知色差計算或現代顯示器校色。
對比與無障礙的錯誤應避免
同一歷史調色盤中的兩種顏色，仍可能產生無法閱讀的文字、無法通過 WCAG 檢查，或在眩光下變得模糊。對比取決於特定的配對、字型大小、字型粗細，以及適用的無障礙標準 — 而非顏色是否來自某個著名的清單。WCAG 2.x 通常將一般文字的對比下限設為 4.5:1，大型或粗體文字則為 3:1，並有更嚴格的 AAA 閾值。請使用顏色對比檢查工具驗證實際的配對，而不是假設一個在 1996 年聞名的調色盤仍能通過 2026 年的審查。
一個相關的錯誤，是將同一色樣同時用於前景與背景，並在中間加上半透明疊加層。半透明層會改變在任何背景上所感知的顏色，因此「安全」的調色盤項目並非使用者實際看到的顏色。在簽核前，請測試包含任何疊加層在內的實際渲染配對。
網頁安全色仍然有其適用之處
這個立方體仍然適合幾種刻意的工作流程。它是 HEX 通道的乾淨教學介面、復古介面與像素風格藝術的現成受限調色盤、將現代 HEX 對齊回固定網格的透明比對工具，以及需要在每位訪客螢幕上顯示相同顏色的可重現教學參考。它也適用於印刷圖表、刺繡圖案、串珠工藝，以及其他將固定調色盤視為特性而非限制的媒材。
對於以品牌為導向的工作、具有數千個獨立標記的資料視覺化，或任何需要相近色調之間細膩漸層的 UI，建議採用基於完整 RGB 或 OKLCH 系統所建構的現代調色盤。請將網頁安全色圖表作為其本質 — 透明的參考與比對工具 — 來使用，明確保留其年代已久的相容性目的，並讓無障礙測試處理立方體原本就不設計解決的部分。
如果您正在權衡選項，避免常見錯誤產生 SVG 圖樣對此有詳細說明。
如果您正在權衡選項，網頁安全色圖表:今日仍需要嗎?對此有詳細說明。