網頁安全色彩構成一組固定 216 色的調色盤，由紅、綠、藍三個色道中每個色道的六個允許強度所組成 —— 0、51、102、153、204 和 255 —— 在十六進位中寫為 00、33、66、99、CC 和 FF。在三個色道上獨立組合六種選擇，可產生 6 × 6 × 6 種組合，也就是剛好 216 種獨特顏色。這種量化方式是所有網頁安全調色盤概念的根源：任何位於 216 立方體內的配色方案，都具備可預測的色道運算、在舊式顯示器上一致的外觀，以及一眼就能教會或審核的簡單規則。使用 網頁安全色彩圖表 來瀏覽完整的立方體、複製任何六位數 HEX 色碼，或將任意顏色吸附到最接近的立方體成員。
216 這個數字並非行銷選擇。它是兩個事實的乘積：那個時代的多數顯示器可顯示 256 種索引色，而保留其中 40 種供系統使用，便留下穩定的 216 色彩色子集。瀏覽器、設計師與 W3C 共同採納了立方體的建構方式，以便在某台機器上選定的顏色，有可能在另一台機器上無需抖動即可呈現。現代顯示器可顯示數百萬甚至數十億種顏色，因此這個調色盤已不再是相容性要求 —— 它是一種刻意的設計限制、教學工具，以及可快速取得可重現復古配色的來源。任何從立方體建構的調色盤概念，都會自動繼承這些特性。
調色盤概念在 216 立方體中的起點
216 立方體是以決定性方式建構的：每個色道只能是六個數值之一，且任何組合皆為有效。這正是來自此集合的調色盤概念可預測的原因。你並不是在瀏覽一份策展過的裝飾性色彩清單 —— 你是在從一個量化過的 RGB 晶格中挑選座標。圖表以紅優先、綠居中、藍在後的順序，將六個來源強度做笛卡兒積產生，讓背後的數學運算清楚可見，而不是隱藏在硬編碼清單之後。
以下是六個允許的色道強度，以及它們在 HEX 色碼中的呈現方式：
| 十進位強度 | 十六進位數字 | 概略角色 |
|---|---|---|
| 0 | 00 | 關閉 / 純黑 |
| 51 | 33 | 低 |
| 102 | 66 | 中低 |
| 153 | 99 | 中 |
| 204 | CC | 中高 |
| 255 | FF | 全開 / 純亮 |
每個網頁安全 HEX 色碼只是一種說明方式，指出紅、綠、藍三色道分別選了六個數值中的哪三個。例如，#003366 代表紅色為 00、綠色為 33、藍色為 66 —— 一種可透視檢查的深藍色。由於色道選擇彼此獨立，立方體沿每個軸提供大致相等的視覺階梯，這使它成為幾乎任何配色方案的乾淨起點網格。
你可以從立方體建構的六種調色盤模式
因為立方體是一組小巧且行為良好的集合，你可以直接從中建構最常見的調色盤模式，無需任何外部選色工具。下方模式描述的是所選色塊之間的關係與大略的視覺方向；確切的六位數色碼則直接取自圖表。
- 單色漸層。將紅與綠鎖定在固定強度，只讓藍（或另一個單一色道）走過全部六個數值。這會產生六階的色階，適用於背景、懸停狀態或資料著色。
- 類比暖色或冷色帶。挑選三個主要色道僅相差一個強度的色塊。它們在立方體上彼此相鄰，呈現統一的色溫感。
- 互補分割。挑選一個基準色塊，再挑選第二個在三個軸中至少兩個上大致反相的色塊。圖表的最接近配對功能可將任意顏色吸附到立方體，讓你幾乎能為任何顏色找到互補色。
- 中性骨幹加上單一強調色。在灰階軸附近使用三個色塊 —— 紅、綠、藍近乎相等 —— 擔任內文、表面與分隔線的角色，再從同一立方體中加上一個飽和的強調色。
- 復古高對比配對。將 #000000 與 #FFFF00、#00FFFF、#FF00FF，或其中一個飽和的中階色塊配對。這些組合喚起 90 年代初期作業系統調色盤的風格，在大多數顯示器上依然清晰易讀。
- 四分之一色調印刷模擬。挑選色道僅落在 00、66、CC 或 FF 的色塊。如此產生的四階子集讀起來像是刻意的半色調，適合低色彩數的美術與點陣圖樣式。
這些模式並不新鮮 —— 它們正是設計師在 216 色代表整個可見調色盤時用來建構配色方案的方式。將其視為一項限制，通常是達到協調外觀的最快途徑，這也是從立方體衍生出的調色盤概念，至今仍在現代復古與粗獷主義設計中流傳的原因之一。
如何使用圖表建構網頁安全調色盤
這是一套將圖表轉化為成品調色盤的實用工作流程。
- 開啟網頁安全色彩圖表，以紅優先、綠居中、藍在後的順序掃視 216 個色塊，直到某個候選顏色吸引你的目光。
- 點擊色塊以選取它。圖表會在較大的結果區顯示完整的六位數 HEX 色碼，並將其複製到你的剪貼簿；若瀏覽器封鎖剪貼簿存取，該色碼仍可顯示供手動選取。
- 為每個需要的調色盤角色重複此步驟 —— 主要、次要、表面、強調色與分隔線，是一組典型的五角色配置。
- 若你的設計簡報從立方體外的品牌色開始，請將其三位數或六位數 HEX 貼入「尋找配對」欄位並按下按鈕。圖表會將 CSS 簡寫（例如 #abc）展開為 #aabbcc，分別將每個 8 位元色道四捨五入到最近的 0、51、102、153、204 或 255，再重新組裝結果。
- 例如，#3470d0 的色道為 0x34（52）、0x70（112）和 0xD0（208）。分別四捨五入：52 吸附到 51（0x33），112 吸附到 102（0x66），208 吸附到 204（0xCC）。重新組裝的結果為 #3366CC，你可以對照立方體加以驗證。
- 將選定的 HEX 色碼集中放在樣式表頂端的註解區塊中，並將其視為固定調色盤，而非建議。
來自立方體的現成配對靈感
某些配對之所以有效，是因為立方體的建構方式，而非任何裝飾性考量。以下是幾個你可以對照圖表驗證，並為自己的專案調整的起點。確切的對比度取決於你所選的前景、背景、字級與字重，因此務必單獨測試實際的配對 —— 例如使用 顏色對比檢查工具 —— 而不要假設歷史調色盤就一定能保證可讀性。
- 冷調企業風。以 #003366 為基底搭配 #FFFFFF 文字，加上 #CCCCCC 分隔線，以及 #FFCC00 作為單一強調色。
- 柔和文件主題。#FFFFCC 背景、#333300 內文文字，以及 #006600 連結顏色 —— 每個數值都落在立方體內。
- 高能量復古 UI。#000000 背景、#00FF00 主要動作、#FF00FF 次要動作、#FFFF00 醒目提示。
- 中性編輯風格。#FFFFFF 表面、#999999 次要文字、#333333 內文，以及一個飽和的 #CC0000 強調色用於重點引文。
這些清單刻意維持在 216 立方體的 HEX 格式之內，這正是它們能在舊版瀏覽器、點陣圖模型或教學素材上無需任何色彩管理變數即可重現的原因。
216 調色盤概念仍符合需求的時機
現代網頁並不受限於 216 色，除非設計簡報明確要求，否則你不應將當代品牌限制在立方體內。立方體仍在一小組明確界定情境中佔有一席之地。
| 情境 | 216 立方體的助益 |
|---|---|
| 復古或懷舊 UI 重現 | 忠於該時代，並可在舊系統上重現 |
| 十六進位色道教學 | 每個色道僅六個數值，讓運算清楚可見 |
| 低色彩數美術與像素素材 | 可預測的色階與簡易的抖動控制 |
| 量化 RGB 研究與資料視覺化原型 | 相等的色道階梯產生乾淨的階梯圖 |
| 品牌識別限制練習 | 迫使從刻意縮小的集合中做出果斷選擇 |
在這些情境之外，立方體的角色是參考而非規則。W3C 的 CSS 介紹 將這套六強度建構記錄為歷史性的瀏覽器安全背景，而 W3C 網路無障礙倡議範例 則獨立列出 216 色彩色選擇器 —— 兩者皆可作為主要參考來源，而非現代樣式的強制規範。
從 216 色塊中挑選時應避免的陷阱
設計師在取用網頁安全調色盤時，常反覆出現三種常見錯誤。
- 將「網頁安全」視為無障礙。這個名稱描述的是歷史瀏覽器行為，而非對比。兩個網頁安全色塊在較小的內文字級下，仍可能未達 WCAG 對比要求。務必針對你所遵循的規則，實際測試該配對。
- 不必要地將品牌調色盤限制在 216 色。將現代識別限制在立方體內，會犧牲你的受眾在當前顯示器上所期待的重要色彩選擇。請將圖表作為吸附或配對的參考，而非創作上的天花板。
- 假設「最接近立方體」等同於「感知上最接近」。圖表分別對每個色道做四捨五入，這等同於在未加權的 RGB 立方體中計算歐氏距離。未加權的 RGB 並不具備感知均勻性，因此在視覺上最接近的色塊，有時可能與色道吸附結果不同。若你需要為影像或照片找出視覺上最接近的色塊，請改在 Lab 或 OKLCH 中進行比較。
在牢記這些防護措施的前提下使用，網頁安全色彩圖表會成為調色盤靈感的快速、透明來源：建構具決定性、便於人工審核，且仍是教授十六進位色道如何實際映射到量化色彩立方體的最簡潔方式。
延伸閱讀：Windows 上的漸層產生器：在 Edge 中建構 CSS。
延伸閱讀：從影像產生調色盤：從一個 HEX 開始。