不,現代網站並不需要網頁安全色來維持瀏覽器相容性——網頁安全色色表如今是作為 HEX 對照、復古設計,以及教學 6 × 6 × 6 立方體公式的參考資料,而非用來修正顯示行為的解法。216 色的調色盤誕生於許多顯示器一次只能顯示 256 種索引色的年代,使用受限的立方體可降低瀏覽器將頁面顏色抖動成斑駁近似色的機率。如今的電腦、手機與瀏覽器都能輕鬆呈現數百萬甚至數十億種色彩組合,因此只從 00、33、66、99、CC 與 FF 色頻中挑選顏色,已不再影響頁面在一般螢幕上的呈現效果。當你想研究量化立方體、刻意打造復古或低色彩數的作品、講解十六進位色頻如何組合、重現舊有設計,或將現代的 HEX 對齊到最近的 216 立方體色票時,網頁安全色色表依然有其存在的價值。但這不代表每個色票都能自動安全地用於內文或品牌——這些判斷仍取決於實際的對比、色票搭配,以及閱讀頁面的受眾。

216 立方體的由來
216 色的調色盤是六個紅色、六個綠色與六個藍色階的笛卡兒組合。每個色頻只能取十進位的 0、51、102、153、204 或 255,十六進位則寫作 00、33、66、99、CC 與 FF。由於三個色頻彼此獨立,總數為 6 × 6 × 6 = 216 種不重複的組合。W3C 歷史上的CSS 簡介記載了相同的六個等距色頻階,而 W3C 網頁無障礙推動組織的另一個範例則列出一個基於相同概念的 216 選色色彩選擇器。本色表以確定性的紅為主、綠居中、藍為次的順序,生成剛好 216 筆不重複的色票,重現這個建構方式,讓數學邏輯保持透明,而不是隱藏在一份不透明的死硬編碼清單中。
2025 年色表仍有用的時機
即使相容性不再是問題,這份色表仍有實用的現代用途。設計師在為品牌、遊戲或登陸頁打造刻意受限的復古調色盤時會使用它。像素藝術家與 Demo 場景創作者利用受限的立方體,讓檔案保持小巧,並讓視覺效果在不同硬體上保持一致。教師透過這個立方體講解十六進位色頻如何組合——每個色頻六個值、三個色頻、216 個不重複的結果。研究人員與檔案管理員用它精準重現舊版介面。任何只想知道某個現代 HEX 會對齊到 216 立方體中哪個色票的人,可以把 HEX 貼進色表中直接讀出答案。執行上述所有任務時,色表之所以有用,是因為它把立方體視為一種限制、教學輔助或重現工具,而不是相容性的保證。
如何瀏覽、複製並對齊 HEX
- 開啟網頁安全色色表,瀏覽傳統立方體中全部 216 個色票。
- 點擊任一色票,即可在結果區顯示其完整六位數 HEX 值,並附上紅、綠、藍三原色值。
- 使用瀏覽器的剪貼簿快捷鍵複製完整六位數代碼,或在無法存取剪貼簿時讀取可見的標籤與 title 屬性。
- 若要對齊外部顏色,請在對齊工具的輸入欄位中輸入三位數 HEX(如 #abc)或六位數 HEX(如 #3470d0)。
- 按下 Find match,即可看到 216 立方體中最近的成員,並同時顯示完整 HEX 與對齊後的 RGB 色頻。
- 將對齊後的值視為調色盤參考,發布前再用專用的對比工具檢驗實際的前景與背景配對。
最近對齊的計算方式
對齊工具刻意保持簡單且可稽核,這正是色表適合作為教學用途的原因。三位數 CSS 簡寫(例如 #abc)會依照標準簡寫規則展開為 #aabbcc,再進行對齊。接著,每個 8 位元色頻會分別四捨五入到 0、51、102、153、204 或 255 中的最近一個,紅、綠、藍對齊後的值再重新組合成六位數 HEX。由於各軸獨立且等距分佈,將每個色頻對齊到最接近的 51 倍數,等同於在普通的未加權 RGB 立方體中選擇最小的歐幾里得距離。
舉例來說,HEX #3470d0 對應到 #3366cc。紅色頻 0x34 為十進位 52,向下對齊到 51,十六進位寫作 33。綠色頻 0x70 為十進位 112,向下對齊到 102,十六進位寫作 66。藍色頻 0xd0 為十進位 208,向下對齊到 204,十六進位寫作 cc。合併後,對齊的立方體色票為 #3366cc。
這種獨立色頻的做法讓結果可預測且易於驗證,但它並非一套感知色彩差異的計算方式。經 Gamma 編碼的 sRGB 值在感知上並不均勻,因此視覺上最接近的色票,有時會與歐幾里得 RGB 的結果不同。若想更深入研究立方體的建構方式,216 立方體公式指南會更詳細地逐步說明相同的算術。需要感知精度的作業流程,應在 Lab 或 OKLCH 色彩空間中比較顏色、納入 ICC 色彩描述檔,或使用專業工具針對整張影像進行調色盤最佳化。
網頁安全不等於無障礙
「網頁安全」一詞僅描述過去的相容性,與文字易讀性、印刷輸出、品牌識別或當代顯示行為無關。直接取自 216 立方體的兩個色票,作為前景與背景使用時仍可能無法通過 WCAG 對比要求;色表刻意不為顏色標註主觀名稱,也不暗示它等同於 Pantone、CMYK 油墨、材料樣本或經過校色的裝置輸出。請把「安全」理解為「位於傳統立方體內」的簡稱,除此之外別無他意。一旦選定色票,請將實際的文字與背景配對送進支援 WCAG 比率與大字級規則的對比檢查工具中檢驗。色表刻意不介入這類判斷。
色表無法取代的項目
網頁安全色色表涵蓋色彩工作中一塊狹窄但實用的範疇。了解它「不」能做的事,與了解它「能」做的事同樣重要。下方表格將色表的預期用途與它刻意交由其他工具處理的任務進行對照。
| 色表的適用範圍 | 色表不適用的範圍 |
|---|---|
| 一次瀏覽全部 216 個傳統色票 | 為每個色票主觀命名或對應到 Pantone |
| 複製任一立方體色票的完整六位數 HEX | 保證內文或 UI 標籤的可讀性 |
| 將三位數或六位數 HEX 對齊到最近的立方體成員 | 取代感知色彩差異計算工具 |
| 研習 6 × 6 × 6 RGB 立方體公式 | 預設就將現代品牌或資料視覺化限制在 216 種顏色內 |
| 精準重現舊版網頁設計 | 預測 CMYK、ICC 色彩描述檔或經校色之顯示器的行為 |
當任務需要全光譜的品牌色、感知均勻的調色盤、印刷精度的轉換,或無障礙保證時,請跳過本色表——這類作業流程需要各自專屬的工具。當目標正是傳統立方體本身——研習它、從中複製、向它對齊,或刻意在它之中建構時,請使用本色表。
延伸閱讀:線上色彩差異計算工具安全嗎?。