網頁安全色是指通過所有瀏覽器安全測試的 216 種 RGB 組合，方式是只從六個等距的層級（0、51、102、153、204 和 255）中挑選紅、綠、藍通道，因此 6 × 6 × 6 恰好等於 216 個獨特色塊。網頁安全色色表上的每個項目都會顯示其完整的六位數 HEX 碼，這是 Windows 瀏覽器、設計工具和程式碼編輯器都能直接接受而不需要轉換的格式。「在 Windows 上」的說法並非巧合：原始的網頁安全色調色盤之所以如此定義，部分原因在於 Windows 和 Macintosh 系統各自保留了共享 256 色索引顯示模式中不同的子集，剩下 216 種顏色在兩個平台上都能一致地呈現。現代的 Windows 機器（以及每個近期的 Edge、Chrome、Firefox 或 Brave 版本）都能顯示數百萬甚至數十億種顏色，因此這個色立方體如今只是一種歷史與創作上的參考，而不是相容性的必要條件。若要在 Windows PC 上使用這個色表，整個功能都在瀏覽器中運作，無需安裝、無需外掛，也無需下載任何檔案。

web safe colors on windows
Windows 上的網頁安全色：找出最近的立方體對應色

216 種網頁安全色究竟是什麼

這個調色盤是三個獨立通道的笛卡兒積，每個通道僅限於六個數值。W3C 歷史性的 CSS 簡介記錄了同樣定義這個立方體的六個等距層級。另一份獨立的 W3C 網頁可及性倡議範例也單獨列出了 216 種顏色的選色器。將這兩份參考資料與簡單的算術結合，就能得出恰好 216 個色塊，每一個都能直接從六個通道層級重現，無需查閱任何不透明的清單。

以實際的 Windows 用語來說，這代表你可以稽核色表所顯示的每一個顏色。沒有隱藏的對應表、沒有專屬的調色盤檔案、沒有任何意外。點擊色塊，色表就會在你可以手動反白的結果區域中回傳其完整的六位數 HEX，即使瀏覽器拒絕剪貼簿存取也沒問題。這個表格是以確定性的紅為主、綠居中、藍為次的順序產生，而不是從硬編碼的參考資料複製而來，並且色表會驗證結果恰好包含 216 個條目，每個都有獨特的 HEX 值，且其通道全都屬於六個允許的層級之一。

為何「在 Windows 上」對這個調色盤仍然重要

這個調色盤之所以被命名為「網頁安全」的歷史原因，可追溯到 Windows、Macintosh 與早期在兩者上運作的瀏覽器所使用的 8 位元索引色。256 色顯示無法同時呈現所有可能的 RGB 組合；作業系統各自為視窗外觀與選單保留了約 20 種顏色，因此保證在兩個平台上都不必透過抖動即可呈現的顏色交集，縮減到約 216 種。數份歷史參考資料指出，實際上只有 212 種顏色在所有平台上完全一致，因為 Windows Internet Explorer 無法正確顯示少數幾個藍色和綠色通道的極端值，例如 #0033FF、#3300FF 和 #00FF33。因此，這個立方體既是 Windows 時代的產物，也是 Mac 時代的產物。

在目前的 Windows 10 或 Windows 11 機器上，相容性的情況已徹底改變。Edge、Chrome、Firefox、Opera 和 Brave 都支援 24 位元或 30 位元色彩，因此設計師可以使用數百萬個數值中的任何一個。216 立方體之所以留存，是因為它教導了量化 RGB 立方體的運作方式、支援刻意的復古藝術作品，並為低色彩插圖提供小巧、可重現的調色盤。請把這個色表視為透明的參考和教學工具，而非相容性檢查清單。

在 Windows 瀏覽器中瀏覽、複製並擷取 HEX 值

網頁安全色色表可在 Windows 上任何現代瀏覽器中運作，因此你不需要安裝外掛、下載調色盤檔案，或開啟另外的設計程式。頁面上幾乎所有工作流程都涵蓋在三項操作中。

  1. 瀏覽 216 個色塊。開啟色表並捲動互動式格狀圖。每個色塊都帶有簡短的三字元提示，以保持格狀圖的精簡，而其可存取標籤和 title 屬性則包含完整的六位數值和 RGB 三元組，因此螢幕閱讀器和 Windows 輔助工具仍會公開精確的代碼。
  2. 選取色塊並複製其六位數 HEX。點擊任何儲存格，即可在較大的結果區域中顯示完整代碼。色表會嘗試複製到剪貼簿；若 Windows 或瀏覽器拒絕剪貼簿存取，該值仍會保持可見，以便用鍵盤手動選取。
  3. 輸入另一個 HEX 並找出其最近的立方體對應色。在輸入欄位中輸入有效的三位數或六位數 HEX 碼，然後選擇找出對應色。結果區域會更新為擷取到的色塊，接著你可以使用專門的 色彩對比檢查器來測試其前景與背景對比，而不是假設這個舊式調色盤能保證可讀性。

由於這個表格是由六個通道層級以確定性方式產生，而非從隱藏的清單複製，因此你可以取樣任何 Windows 端的來源——螢幕擷圖、從 Figma 框架中取出的像素、從設計系統中擷取的值——並根據「每個通道都必須等於 00、33、66、99、CC 或 FF 其中之一」的規則，驗證色表回傳的結果。

每個色塊背後的六個通道層級

每個色塊都是一個紅、一個綠和一個藍值的組合，且每個通道都被限制在六個層級之一。十進位與十六進位的配對如下。

十進位十六進位通道角色
000通道關閉
5133高於零的第一步
10266第二步
15399第三步
204CC第四步
255FF通道完全開啟

將像 #3366CC 這樣的色塊讀回十進位會得到 51、102 和 204，也就是這個表格所依據的三個數值。如果你從照片、SVG 或任何 Windows 設計工具中取樣顏色，每個通道都會落在 0 到 255 之間的某處，而這個立方體會將其強制對應到這六列中最接近的一列。

最近對應色功能的運作方式

對應工具將這個立方體視為一個規則的三維格狀圖，並將每個通道獨立四捨五入到最接近的 51 倍數。由於三個軸是獨立且等距的，其結果等同於在普通的未加權 RGB 立方體中進行最近鄰搜尋。這並非感知色彩差異的計算；sRGB 值採用 gamma 編碼，並不具備感知均勻性，因此專業工作流程可能會傾向使用 CIEDE2000 比較。這個色表刻意保留了舊式調色盤的簡單建構方式，而且這個表格並未以主觀名稱標示顏色，也未暗示其等同於 Pantone、CMYK 油墨或裝置校色輸出。

CSS 三位數縮寫會先進行展開。像 #abc 這樣的值會在對應之前變成 #aabbcc，正如 CSS 解析器所讀取的方式。一旦每個 8 位元通道完成四捨五入，這三個擷取到的層級就會重新組合成最終的六位數 HEX。

一個計算範例：輸入 #3470d0。

  • 紅色 0x34 等於十進位的 52。最接近的允許層級是 51 和 102；52 距離 51 只有一步，因此擷取為 51，寫作 33。
  • 綠色 0x70 等於 112。相鄰層級為 102 和 153；112 距離 102 為十，因此擷取為 102，寫作 66。
  • 藍色 0xD0 等於 208。相鄰層級為 204 和 255；208 距離 204 為四，因此擷取為 204，寫作 CC。
  • 重新組合：#3366CC。獨立通道擷取使結果可預測且易於稽核；視覺上最接近的色塊偶爾會與歐氏 RGB 的結果不同，這是因為人眼對紅、綠、藍變化的權重並不相等。

網頁安全色無法保證的事

名稱中的「安全」一詞是歷史遺留，而非品質聲明。在任何 Windows 專案上都值得留意三項限制。

首先，網頁安全並不代表文字安全。可及性取決於所選前景與所選背景之間的對比、字型大小與粗細，以及適用的 WCAG 準則。一個鮮豔的 #FF0000 搭配一個鮮豔的 #FFFF66，雖然兩者都屬於這個立方體，卻可能無法通過一般文字的對比測試。在發佈前，務必將實際的配對通過對比檢查器進行測試；就 Windows 工作流程而言，請遵循 Windows 上的色彩對比檢查器中的步驟。

其次，網頁安全並不代表印刷安全、品牌安全或顯示器校色安全。這個色表並未以主觀名稱標示顏色，也未暗示其等同於 Pantone、CMYK 油墨或任何裝置校色輸出。將立方體中的色塊轉換為 CMYK 是另一個步驟，未經校色的螢幕顏色不會與印刷打樣一對一相符。

第三，網頁安全並未限制設計系統的其他部分。現代的資料視覺化和品牌工作幾乎總是需要超過 216 種顏色。當需求要求量化、復古或教學用途的調色盤時，請使用這個立方體；若不符合需求，則跳過它。

何時使用 216 立方體，何時應跳過

透過簡短的比較，有助於將色表對應到實際的 Windows 端工作。

情境使用立方體跳過立方體
現代產品網站的品牌調色盤否 — 大多數團隊需要超過 216 種顏色。是 — 從全彩工具中挑選，例如 調色盤產生器。
復古 8 位元藝術或像素插畫是 — 限制本身就是重點。否。
教學 RGB 通道或 HEX 縮寫是 — 每個色塊都可稽核。否。
對可及性至關重要的 UI 文字否 — 屬於立方體並不能保證對比。是 — 使用專門的對比工具測試該配對。
印刷或 CMYK 生產否 — 立方體是螢幕參考。是 — 明確轉換螢幕顏色。

一旦 Windows 端的工作流程指向這個色表，下方的連結會直接帶你前往上述的互動式格狀圖、HEX 輸入欄和最近對應色尋找工具。

如需更深入的瞭解，請參閱 從 HEX 碼產生調色盤：配對一套配色方案。