跳至主要內容
Lizely

網頁安全顏色對照表

瀏覽完整的歷史 216 顏色網格，並可將任意 HEX 顏色快速對應至最接近的通道級別匹配。

隱私權：你的檔案不會離開裝置，所有處理均在瀏覽器本機完成。

使用方式

  1. 1.瀏覽 216 色塊並選擇任一顏色以顯示並複製其完整的六位 HEX 值。
  2. 2.若要匹配另一顏色，請輸入有效的 3 位元或 6 位元 HEX 碼，並點選「尋找匹配」。
  3. 3.選取結果可作為歷史色調參考，之後應分別測試實際的前景與背景配對對比。

關於網頁安全顏色對照表

網頁安全顏色對照表以互動式網格呈現完整的歷史 216 通道瀏覽器安全色調。每個色塊的紅、綠、藍通道皆來自六個等級：0、51、102、153、204 與 255，以十六進位表示為 00、33、66、99、CC 與 FF。三個通道獨立選擇，共產生 6 × 6 × 6，即 216 種獨特顏色。點選任一色塊可選中並複製完整的六位 HEX 碼，或輸入另一 HEX 顏色以尋找該立方體中最接近的成員。

瀏覽器安全色調來自一個時代，當時許多顯示器一次只能顯示 256 索引色彩。使用共用立方體減少瀏覽器將網頁色彩抖動成斑點近似值的機率。W3C 的歷史介紹說明 CSS 記錄了六個均勻間隔的色彩通道層級，且 W3C 網際網路存取性倡議範例獨立列舉出 216 選項色彩選擇器。產生的表格會檢查是否恰好有 216 筆條目、獨特的十六進位值，以及色彩通道是否屬於六個允許的層級。

現代電腦、手機和瀏覽器通常支援數百萬或數十億種顯示色彩組合，因此網頁安全色彩不再是普通網站樣式相容性的需求。此圖表對於研究量化 RGB 立方體、選擇刻意限制的懷舊色彩調色盤、創作低色彩藝術作品、教學十六進位色彩通道，或重現舊設計仍是有用的。“ 網頁安全 ” 是歷史名稱，並非表示每個色塊都適合文字、存取性、列印、品牌或目前顯示技術。

最接近顏色功能支援輸入三或六位十六進位數字。例如 #abc 會根據標準 CSS 縮寫規則擴充套件為 #aabbcc 後再進行比對。每個 8 位元通道會獨立四捨五入至最接近的 51 倍數，然後將三個通道重新組合。例如 #3470d0 會對應至 #3366cc。此結果等同於在標準無權重 RGB 立方體中的最短距離，因為各軸相互獨立且等距。此方法並非視覺感知的顏色差異計算，也未考慮人類視覺對通道變化的權重。

通道獨立四捨五入使結果可預測且易於審核，但視覺上最接近的色塊有時可能與歐幾裡得 RGB 計算結果不同。Gamma 編碼的 sRGB 值並非視覺上均勻。專業工作流程可能改用 Lab 或 OKLCH 空間、考慮 ICC 檔案，或針對整張圖片最佳化色調。本頁面刻意保留此歷史色調的簡單構造，並未為顏色標註主觀名稱，亦不暗示等同於 Pantone、CMYK 印刷油墨、樣品或裝置校準輸出。

每個色塊顯示縮短的三字元提示以維持 216 項目網格的緊湊性，而其可訪問標籤與標題則包含完整的六位值與 RGB 三元組。選中色塊後，完整值將顯示在較大的結果區域。複製剪貼簿功能可能因瀏覽器權限被拒絕；若發生此情況，仍可手動選擇顯示的碼。此表格依照紅色主、綠色中、藍色次的確定順序由六個原始等級產生，而非複製自一個不透明的硬編碼清單。

該色調條目並非自動可作為前景文字閱讀。對比度取決於前景與背景、字型大小、粗細以及適用的可及性標準。選擇顏色後，應使用 Color Contrast Checker 做實際配對測試，而非假設歷史色調保證可讀性。同樣地，除非創意簡報明確要求此限制，否則不應將現代品牌或資料視覺化限制於這些 216 選項。

方法與來源

此對照表為三個通道等級 0、51、102、153、204 與 255 的笛卡兒積，產生恰好 216 種獨特的 RGB/HEX 記錄。匹配功能在需要時會擴充套件 CSS 三位縮寫，並獨立將每個驗證的 8 位元通道四捨五入至最接近的 51 倍數。

常見問題

網站還需要網頁安全顏色嗎？
不需要。現代顯示裝置與瀏覽器支援的顏色遠多於 216。此色調主要作為歷史參考與有意設計的限制。
最接近顏色是如何計算的？
每個 RGB 通道會獨立四捨五入至最接近的 0、51、102、153、204 或 255，然後重新組合。
「網頁安全」代表文字可及性嗎？
不。文字可及性取決於前景與背景之間的對比度，以及文字的特性。應分別測試實際配對。
為何只有恰好 216 種顏色？
每個 RGB 三個色彩通道允許六種層級，產生 6 × 6 × 6 獨特組合。

相關工具

色彩工具 使用指南

查看全部