網頁安全顏色圖表顯示一個固定的 216 色彩色方塊，由六個等距的通道階級 (0、51、102、153、204、255) 所組成，而選擇正確的方法意味著將你的目標——瀏覽以尋找靈感、複製已知的色票，或將任意十六進位色碼對應到方塊中——對應到三種工具模式之一，而不是把圖表當成一個萬用的查詢表。選錯模式會浪費時間:設計師搜尋配色需要瀏覽格，開發人員重建舊顏色需要複製輔助工具，而任何想把現代十六進位色碼對應到舊式色板的人則需要對應工具。現代瀏覽器和顯示器能呈現數百萬甚至數十億種顏色，因此這份圖表不再是普通 CSS 的相容性要求;它仍然作為一個透明的參考、教學輔助工具，以及為復古或低色彩數專案而自我施加的限制而存在。一開始先說明你實際上需要這份圖表做什麼，正確的切入點就會變得顯而易見。
216 色網頁安全方塊究竟是什麼
這個方塊是一組封閉的 RGB 三元組集合。每個通道 (紅、綠、藍) 都限制為剛好六個值，可獨立選擇:
| 十進位 | 十六進位 |
|---|---|
| 0 | 00 |
| 51 | 33 |
| 102 | 66 |
| 153 | 99 |
| 204 | CC |
| 255 | FF |
三個通道各自獨立地提供六種選擇，共產生 6 × 6 × 6 = 216 種獨特顏色，圖表以紅色為主、綠色居中、藍色為次的確定性順序呈現。W3C 的 CSS 簡介 記錄了這六個等距階級，而 W3C 的 網路無障礙倡議範例 獨立使用 216 種選擇的顏色選擇器作為教學範例。這個限制的歷史原因是顯示器相容性:當許多系統一次只能顯示 256 色索引色時，共用一個 216 色的方塊能降低瀏覽器將頁面顏色抖動成斑駁近似色的機會。圖表的原始資料在發佈前會檢查是否剛好 216 筆、十六進位色碼是否唯一，以及通道是否屬於六個允許的階級。
圖表的三種工作流程模式
圖表以一個格狀呈現三種用途。決定哪種模式適合你的工作是「選擇正確方法」的核心，因為每種模式回答不同的問題，並回傳不同類型的結果。
| 模式 | 觸發條件 | 提供內容 | 最適合 |
|---|---|---|---|
| 瀏覽格狀 | 尚未有選定顏色 | 點擊後顯示視覺色票加上完整六位數十六進位色碼 | 尋找靈感、研究配色、教授十六進位通道 |
| 複製色票 | 已知要使用的色票 | 完整六位數十六進位色碼並支援複製 | 重現較舊的設計、精確複用色值 |
| 對應至最接近的方塊 | 持有一個任意三位數或六位數的十六進位色碼 | 透過逐通道四捨五入取得最接近的方塊項目 | 將現代 CSS 顏色對應到舊式色板 |
每一列也意味著不同的閱讀深度。瀏覽要求你注視螢幕。複製預設你已知道要選取哪一行、哪一欄，或哪個行列交叉點。對應則預設你已用其他格式持有來源顏色，並想將它轉換到方塊中。把這些模式混用——例如一邊掃視格狀，一邊在對應工具中輸入——通常比選定一個模式並完成該模式的工作還要花時間。
為你的情況選擇正確的方法
先回答一個問題:我有起始顏色，還是我需要一個?如果什麼都沒有，先開啟瀏覽格。方塊的結構獎賞系統化的探索——固定兩個通道、滑動一個通道，可以看到顏色以純粹的 RGB 術語如何變化，這也是向學生教授十六進位通道的好方法。如果你從螢幕擷圖、舊樣式表或品牌色表中有一個目標色票，請在格狀中掃視直到視覺上找到它，然後點一下以確認色值。如果你已從現代設計工具取得十六進位色碼，只想以方塊術語表示，請完全跳過格狀，直接前往對應工具。
方塊本身不是配色產生器。它不會建議互補、類似、三分或分裂互補關係，因為全部 216 個項目都位於規則 RGB 晶格的角落，而非位於由色相衍生的位置上。當任務是從選定基礎色進行配色運算時，配色產生器 可從任意十六進位色碼推導這些和諧關係。網頁安全圖表更接近於一個由剛好 216 個具名位置加上最近色速記組成的受控色板，把圖表當成通用配色工具往往會產生平坦、等距的結果，在實際 UI 工作中看起來非常機械化。
如何將十六進位色碼對應到最近的方塊項目
對應工具是多數讀者低估的模式，因為逐通道四捨五入非常簡單，可以在紙上完成。開啟 網頁安全顏色圖表，在輸入欄位中輸入三位數或六位數十六進位色碼，然後選擇 Find match。圖表會先使用一般 CSS 簡寫規則將像 #abc 這樣的簡寫值展開為 #aabbcc，接著將每個 8 位元通道各自獨立地四捨五入到六個允許階級 (0、51、102、153、204、255) 中最近的一個。重組後的結果會出現在較大的結果區域，其中無障礙標籤永遠包含完整的六位數十六進位色碼加上 RGB 三元組，無論密集格狀中所呈現的簡短三字元提示為何。
- 在 /color/web-safe-colors/ 開啟圖表，並找到輸入欄位。
- 輸入你的三位數或六位數十六進位色碼。
- 選擇 Find match。
- 在較大的結果區域讀取對應後的項目;即使你的輸入是三位數，也會顯示完整的六位數十六進位色碼。
- 點擊結果色票以複製十六進位色碼，或當瀏覽器權限阻擋剪貼簿存取時，手動選取可見的程式碼。
實作範例。將 #3470d0 對應至方塊:
- 紅色通道:0x34 = 十進位 52。相鄰的兩個允許階級為 51 (距離 1) 和 102 (距離 50)。四捨五入為 51。
- 綠色通道:0x70 = 十進位 112。相鄰的階級為 102 (距離 10) 和 153 (距離 41)。四捨五入為 102。
- 藍色通道:0xd0 = 十進位 208。相鄰的階級為 204 (距離 4) 和 255 (距離 47)。四捨五入為 204。
- 重新組合:51、102、204 → 十六進位 33、66、CC → #3366CC。
因為每個通道各自獨立四捨五入，規則可簡化為「只與兩個相鄰階級比較，絕不與全部六個比較」——這正是讓結果容易手動稽核的原因。這種建構方式等同於在一般未加權的 RGB 方塊中取最近距離，因為各軸獨立且等距，但它並非感知色彩差異的計算。
選色時需牢記的限制
方塊是基於歐幾里得逐通道四捨五入所建立，並非基於感知色彩模型。Gamma 編碼的 sRGB 並非感知均勻，因此數學上最接近的色票可能與視覺上最接近的不同，尤其在飽和的中間色調——人眼對此處的小幅變化最為敏感。專業工作流程會在 Lab 或 OKLCH 中比較顏色、考量 ICC 描述檔，或對整張影像最佳化配色;圖表刻意保留舊式色板的簡單建構方式，而不進行上述任何操作。如需更完整的誤用清單——例如將方塊視為品牌色板或對比保證——請參考 網頁安全顏色使用祕訣與常見錯誤避免指南，其中有更詳細的說明。
「網頁安全」這個標籤也是歷史名稱，並非品質聲明。216 色選擇色板中沒有任何一項能保證文字可讀性、無障礙對比、可預期的 CMYK 轉換、品牌級印刷再現，或在經過校正的顯示器上的一致性。現代電腦、手機和瀏覽器支援數百萬乃至數十億種可顯示的色彩組合，因此圖表不再是普通網站樣式所必需的。它對於研究量化 RGB 方塊、刻意選用受限的復古色板、製作低色彩數的美術作品、教授十六進位通道，或重現較舊的設計仍然有用。請把它當作透明的參考與複製輔助工具，同時清楚記住它過時的相容性目的。
取得色票後該怎麼做
選定方塊中的項目是工作流程的起點，而非終點。對比度同時取決於前景與背景、所選字型大小與粗細，以及你套用的無障礙標準，因此請把圖表視為配色決策，而把下一個工具視為可讀性決策。透過 顏色對比檢查工具 將你選定的色票與實際的文字與背景配對進行測試，以確認符合 WCAG AA 或 AAA，而非相信某個著名的歷史色板必然可讀。
從圖表延伸出的兩個實用細節在下一步很重要。第一，剪貼簿存取可能會被瀏覽器權限拒絕;發生這種情況時，圖表上可見的程式碼仍可供手動選取，你可以將六位數十六進位色碼貼到任何對比工具或樣式表中使用。第二，在密集格狀中，每個色票會顯示三個字元的縮寫提示以保持 216 個項目清晰可辨;而其無障礙標籤與 title 則包含完整的六位數色值與 RGB 三元組——因此螢幕閱讀器和複製工具會取得完整形式，即使視覺閱讀者看到的是簡短形式。將完整六位數十六進位色碼向前傳遞 (而非縮寫提示)，才能讓後續的 CSS 與對比檢查保持準確。
最後，除非創意簡報明確要求該限制，否則請勿將現代品牌或資料視覺化限制在這 216 個選項內。圖表擅長的是透明度與可重現性，而不是涵蓋現有產品需要的所有色彩。當限制出於創意時，將它與現代色彩工具搭配使用;當限制出於無障礙考量時，將它與對比工具搭配使用。