網頁安全色彩：完整的 216 色 W3Schools 調色盤

216 種網頁安全色彩是由通道層級 0、51、102、153、204 和 255 所定義的精確 6×6×6 RGB 立方體,確保在所有 256 色顯示器上無需抖動即可呈現完全一致的結果。此調色板起源於 1990 年代末期,當時 8 位元色深是業界標準,W3Schools 將其記錄為跨瀏覽器與跨平台設計的可靠子集。雖然現代螢幕可支援數百萬種顏色,但網頁安全立方體仍是設計師的歷史參考依據,適用於需要匹配舊系統、打造復古主題,或在電子郵件範本與嵌入式裝置中確保一致的 fallback 色彩等情境。「網頁安全色表」工具讓您能瀏覽完整的 216 色彩集,點選任何色塊即可顯示其 HEX 碼,並立即複製以便用於 CSS、HTML 或設計軟體中。您也可以輸入任何 3 位數或 6 位數的 HEX 值,工具會將其對齊至最接近的網頁安全通道匹配值,省去將現有設計轉換為此調色板時的猜測工作。

為何 216 色彩色板在今日仍然重要

儘管 24 位元色彩如今已是普遍標準,216 種網頁安全色彩在多種情境下仍具實際價值。舊版電子郵件用戶端(如 Microsoft Outlook 2007-2019)在處理 HTML 電子郵件時仍使用 8 位元色彩渲染,導致非安全色彩產生不可預測的抖動。嵌入式系統(如數位看板與工業控制面板)通常運行在低色深硬體上,會將超出色域的顏色映射至最接近的可用值,可能使品牌色彩失真。復古網頁設計專案、像素藝術與 8 位元遊戲開發會刻意採用網頁安全調色板,以重現真實的 1990 年代美學。此外,部分無障礙指南建議將網頁安全色彩作為老舊硬體或色彩感知有限使用者的 fallback 選項,即使現代 CSS 功能失效,也能確保內容保持可讀。透過使用網頁安全色表,設計師能快速驗證色彩是否安全,避免在這些環境中發生意外的色彩偏移。

如何從色表中瀏覽並複製網頁安全色彩

在您的瀏覽器中開啟網頁安全色表。
捲動瀏覽 216 色彩格,找出符合您專案需求的色塊。
點擊色塊以在預覽區域中顯示其六位數 HEX 碼(例如 #336699)。
點擊 HEX 碼旁的複製按鈕,將其放入剪貼簿。
將該代碼直接貼入您的 CSS、HTML 或設計軟體中(例如 color: #336699;)。
若要測試對比度,請開啟色彩對比度檢查工具,貼上前景與背景的 HEX 碼,並驗證是否符合 WCAG AA 或 AAA 標準。

將任何 HEX 色彩匹配至最接近的網頁安全值

當您需要將現有色彩轉換為網頁安全調色板時,色表的匹配功能可省去手動計算的麻煩。在輸入欄位中輸入有效的 3 位數(例如 #F00)或 6 位數(例如 #FF0000)HEX 碼,然後選擇尋找匹配。該工具會將每個 RGB 元件四捨五入至 0、51、102、153、204、255 序列中最接近的層級,瞬間將色彩對齊至最近的網頁安全通道值。例如,#FF3366(RGB 255, 51, 102)已經是網頁安全色,而 #FF3467(RGB 255, 52, 103)則會四捨五入為 #FF3366。這能確保您的設計在符合調色板限制的前提下,保留最接近的色相。該工具還會並排顯示原始色彩與匹配後的色彩,讓您在套用變更前評估視覺差異。

網頁安全色彩與現代調色板的主要差異

特性	網頁安全色彩(216)	現代 24 位元色彩
色深	8 位元(共 256 色)	24 位元(1670 萬色)
RGB 通道層級	0、51、102、153、204、255(每通道 6 個)	0–255(每通道 256 個)
抖動風險	無(在 256 色顯示器上不會抖動)	高(在 8 位元系統上會產生抖動)
使用情境	舊系統、電子郵件範本、復古設計	現代網頁、印刷與數位媒體
HEX 格式	始終為六位數(例如 #336699)	三位數或六位數(例如 #369 或 #336699)
無障礙 fallback	建議用於老舊硬體	需要額外的 fallback 規則

使用網頁安全色彩測試無障礙對比度

即使使用網頁安全色彩,對比度仍必須符合 WCAG 標準才能確保可讀性。從色表中選取前景與背景配對後,請開啟色彩對比度檢查工具以驗證合規性。WCAG 2.2 要求一般文字(AA)的最低對比度為 4.5:1,大型文字或增強無障礙性(AAA)則為 7:1。例如,網頁安全配對 #000000(黑色)與 #FFFFFF(白色)可達到完美的 21:1 對比度,而 #333333(深灰色)與 #CCCCCC(淺灰色)僅產生 5.7:1,可通過 AA 但未達 AAA。對比度檢查工具提供即時回饋,讓您在最終確定設計前調整色彩。此步驟對於針對低視力或色盲使用者的專案至關重要,同時也攸關是否符合《美國殘疾人士法案》(ADA)與第 508 條等法規要求。

網頁安全調色板的實際應用

設計師在復古美學之外的各種情境中也會使用這 216 種網頁安全色彩。電子郵件行銷活動仰賴此調色板,以確保在 Outlook、Gmail 與 Apple Mail 等處理色彩方式不同的用戶端中呈現一致的效果。嵌入式系統(如醫療裝置與工業 HMI)通常會限制色深以降低硬體成本,使網頁安全色彩成為 UI 元素的實用選擇。像素藝術家與遊戲開發者使用此調色板來創作真實的 8 位元與 16 位元圖形,因為它與任天堂娛樂系統(NES)和 Sega Genesis 等經典主機的色彩限制相符。此外,此調色板在 CSS 中也作為色彩支援有限的瀏覽器之 fallback 選項,例如使用以下規則:

body {
  background-color: #FFFFFF; /* Modern browsers */
  background-color: #FFF;    /* 3-digit fallback */
  background-color: #CCCCCC; /* Web-safe fallback */
}

將網頁安全色彩納入您的工作流程中,可為那些不適用現代色彩標準的環境做好未來防護。如需更進階的色彩工具,可探索調色板產生器,從單一基礎色彩建立和諧的配色方案,或使用 RGB 轉 HEX 轉換器在不同格式間快速轉換。

另請參閱:如何在幾分鐘內為網頁設計產生漸層色彩。

若您正在權衡各種選項,免費調色板產生器:從單一 HEX 建立配色方案對此有詳細介紹。