網頁安全色盤是當紅、綠、藍三個通道各自從六個等距的層級中獨立選取時所產生的 216 個十六進位顏色集合——以十進位表示是 0、51、102、153、204 和 255，以十六進位表示則是 00、33、66、99、CC 和 FF——而 6 × 6 × 6 共得出 216 個顏色。在 iPhone 上，這 216 個色塊通常會在 Safari 中檢視，而非透過原生 App，因此一個輕量、適合行動裝置且能快速載入、讓你點選即可複製的色盤圖表，就是在裝置上實際運用這個色盤的方式。網頁安全色圖表正是為這種工作流程而設計：它將整個色方塊呈現為互動式網格，支援點選以選取完整的六位數 HEX，也能接受任何 3 位或 6 位數的 HEX 輸入，讓你無須離開瀏覽器分頁，就能將現有顏色對齊到色方塊中最近似的成員。
為何 216 色方塊在現代 iPhone 上仍然可見
在現今的 iPhone 上，Safari 能夠顯示數百萬甚至數十億種顏色而不產生任何抖動，因此 216 色方塊已不再是日常網頁樣式的相容性要求。這個色盤之所以延續下來，是基於三個在行動裝置上仍然重要的實務理由。
首先，這個色方塊是一個刻意受限的設計工具。設計師與開發者有時會想要復古的 8 位元風格、低色彩插圖，或是一個色彩空間小到可以用肉眼檢視的教學輔助。W3C 對 CSS 的歷史性介紹列出了與這個圖表相同的六個通道層級與 216 種組合，因此這個色盤是被記錄為標準參考，而非僅僅是口耳相傳的說法。
其次，同樣的六層級構造讓這個色方塊在小螢幕上易於理解。每個色塊都可以用三個通道字母來描述，這些字母來自字母集合 {0, 3, 6, 9, C, F}，能夠整潔地壓縮成一個精簡的網格，在手機上捲動順暢，無需額外的縮放手勢。
第三，將任意的 HEX 對齊到色方塊會產生可預期且可稽核的結果。這個圖表會將每個 8 位元通道各自獨立四捨五入到最近的 51 倍數，這等同於在未加權的 RGB 色方塊中取最近距離，因為這些層級是等距的。這讓它在教學、除錯以及重現較舊設計時相當實用，無需使用專業的色彩差異模型。
如何在 iPhone Safari 中瀏覽並複製網頁安全色
在 iPhone 上，這個圖表的操作方式與其他任何適合觸控的網頁工具相同。216 個色塊的完整網格會以決定性的「紅主、綠中、藍次」順序，從六個來源層級呈現。每個方塊會顯示一個三字元的簡寫提示，以維持小螢幕上的網格精簡；而每個方塊背後的無障礙標籤與 title 屬性，則保留了完整的六位數值及其 RGB 三元組，供螢幕閱讀器使用。
- 在 iPhone 上開啟 Safari，並載入網頁安全色圖表頁面。
- 用手指捲動網格，直到找到你想使用的色塊。
- 點選一次色塊即可選取；較大的結果區域會更新，顯示完整的六位數 HEX 以及對應的 RGB 三元組。
- 點選複製控制項，或長按顯示的色碼，從 iOS 上下文選單中選擇「拷貝」。
- 切換到備忘錄、郵件、訊息或你慣用的編輯器，將 HEX 貼到任何需要的地方。
若瀏覽器權限拒絕存取剪貼簿，可見的六位數代碼仍會留在畫面上，讓你手動反白並複製。這個圖表是根據六個來源通道層級產生，而非從一份不透明、寫死的清單中複製而來。
如何在 iPhone 上將任何 HEX 對齊到最近的色方塊成員
如果你手上已經有一個 HEX 顏色，想知道 216 個色塊中哪一個與它最接近，
- 在 Safari 中開啟網頁安全色圖表。
- 在輸入欄位中輸入或貼上 3 位數縮寫（例如 #abc）或完整的 6 位數 HEX（例如 #3470d0）。
- 點選「尋找對應」。
- 在結果區域中讀取對齊後的色塊及其完整的六位數 HEX。
3 位數的值會依照標準的 CSS 縮寫規則展開後再進行比對——#abc 會變成 #aabbcc——接著每個 8 位元通道會各自獨立四捨五入到最近的 51 倍數。因此通道值為 52、112、208 的 #3470d0 會四捨五入為 51、102、204，以十六進位寫回就是 33、66、CC，得到 #3366cc。
這種四捨五入等同於在普通的未加權 RGB 色方塊中取最近距離，因為各個軸是獨立且等距的。它並非感知性的色彩差異計算；經過 gamma 編碼的 sRGB 值並非感知均勻，專業的工作流程可能會改用 Lab 或 OKLCH 來比較色彩。然而，對於手機上的日常色盤比對，這種獨立通道的做法既可預期，又能在現場輕鬆稽核。
定義 216 色盤的六個通道層級
這個色盤是根據一組簡短的通道數值清單所建立。216 個色塊中，每一個的紅、綠、藍元件都必須是這六個數字之一。任何落在這份清單之外的 HEX——例如 #3470d0——都自動落在網頁安全集合之外，若想進入這個集合就必須進行對齊。
| 十進位 (0–255) | 十六進位值 | 通道字母 |
|---|---|---|
| 0 | 00 | 0 |
| 51 | 33 | 3 |
| 102 | 66 | 6 |
| 153 | 99 | 9 |
| 204 | CC | C |
| 255 | FF | F |
這個圖表是以上述六個層級在三個通道上的笛卡兒積所產生，保證恰好產生 216 個唯一項目，沒有重複也沒有缺漏。一個獨立的W3C 網頁無障礙倡議範例也列出了由同一色方塊所建構的 216 色選擇器，因此這個構造並非此工具所獨有。
六個通道字母 {0, 3, 6, 9, C, F} 在手機上也是一個實用的記憶捷徑。每個色塊都會顯示三字元的簡寫提示，以維持 216 個項目的網格精簡；而完整的六位數值連同其 RGB 三元組，則保存在該色塊的無障礙標籤與 title 屬性中，供螢幕閱讀器使用。
「網頁安全」在 iPhone 上的意義與局限
「網頁安全」這個標籤是歷史性的，並非對每一個色塊品質的評斷。其原本的目的是在瀏覽器與作業系統之間共用一個 216 色的子集——在當時，頁面通常一次只能顯示 256 種索引色，因此落在共用色方塊之外的任何顏色都很容易產生抖動。現代的 iPhone、Mac 與 PC 能夠乾淨地呈現遠多於 216 種的顏色，因此這個色盤在日常相容性上已不再是必要的。
有幾件事情是「網頁安全」所不涵蓋的：
- 文字無障礙性。對比取決於前景與背景的配對，加上字型大小、粗細以及適用的無障礙標準。色方塊中的某一色塊並不會自動適合作為另一色塊上的可閱讀文字。
- 印刷。這 216 個顏色是螢幕端的 RGB 數值。它們並非 Pantone 等效色、CMYK 色票庫，也無法預測顏色在特定印刷機或材質上的重現結果。
- 品牌一致性。將現代的品牌系統或資料視覺化限制在 216 色之內，是一種創意選擇，而非技術上的必要。
- 感知接近度。此比對器以獨立通道進行四捨五入，雖然可預期，但與感知性的色彩差異分數並不相同。兩個色塊在數值上可能最接近，視覺上卻可能感覺差距更大。
換言之，應將 216 色方塊視為一個透明的參考、比對與複製輔助工具，而非保證所選配對具有無障礙性、品牌安全性或印刷準確性。
在 iPhone 上出貨前，請將圖表與對比檢查搭配使用
因為「網頁安全」並不代表可閱讀性，在 iPhone 上最保險的工作流程，是先使用這個圖表挑選顏色，再檢查實際的配對結果。這個圖表應作為歷史性的色盤參考，而對比則應另外透過針對前景與背景的工具，依據 WCAG AA 與 AAA 標準進行測試。
在手機上的一個實務步驟：
- 在 Safari 中開啟網頁安全色圖表，點選以選取一個色塊，或貼上一個 HEX 並點選「尋找對應」。
- 將產生的六位數 HEX 複製到剪貼簿。
- 在同一瀏覽器中開啟對比檢查工具，將該值貼為前景，並設定一個對比鮮明的背景——反之亦然。
- 在將組合套用至 CSS、設計工具或程式碼編輯器之前，先將得到的比例對照 AA（內文 4.5:1，大字 3:1）與 AAA（內文 7:1，大字 4.5:1）的門檻進行檢視。
若想更深入了解如何在 iPhone 上的 Safari 中執行這項對比檢查，如何在 iPhone 上使用色彩對比檢查工具一文涵蓋了相同的背景情境。W3C 網頁無障礙倡議同樣發布了一個以此色方塊建構的 216 色選擇器範例，可在出貨前驗證配對時作為有用的第二意見。
若你正在權衡各種選擇，iPhone 上的漸層產生器：在 Safari 中建立 CSS對此有詳細說明。