CMYK 色表調色盤靈感可以從一個固定的、依標準定義的來源開始:148 個不透明的 CSS 命名色,每個都對應一個精確的 sRGB HEX 和 RGB 對應值,你可以直接複製到設計工作流程中。當你需要為印刷品快速構思調色盤概念時,從命名顏色出發可以給你一個可預期的基準,而不必憑記憶猜測十六進位色碼。這些標準化的名稱——例如 tomato、rebeccapurple 或 darkseagreen——描述的是 sRGB 色域中的精確位置,因此兩位設計師使用同一個名稱時,永遠指的是同一個顏色。這種可靠性讓命名顏色成為調色盤發想的有用起點:挑選一個基準名稱、複製其 HEX,然後在其周圍加入互補色或類似色。HTML 顏色名稱對照表 列出 CSS Color 4 標準化的每一個不透明關鍵字,並提供即時色塊、小寫的 #RRGGBB 值、小數形式的 rgb(r, g, b),以及一鍵複製 HEX 功能,讓你不必翻閱靜態印刷參考資料,就能快速試聽各種名稱。

為什麼 CSS 命名色是 CMYK 調色盤的良好起點
印刷工作仰賴人與工具之間可預期的色彩溝通。憑記憶或從鬆散取樣的色塊建立的 CMYK 調色盤常常會出現偏差,因為原始數值並未被明確鎖定。CSS 命名顏色從源頭解決了偏差問題:規格中的每一個名稱都對應到一個精確的 sRGB 座標,而名稱本身即為共識的識別符。這表示在任何樣式表、設計工具或參考表中,「tomato」都是同一個值,你可以從參考表中取出 HEX,在後續任何轉換步驟中直接使用。
對調色盤發想而言,這一點很重要,因為 CMYK 調色盤最困難的部分在於選擇一個專案中每位成員都會以相同方式釋的基準色。一旦基準色確定——例如珊瑚紅或柔和薄荷綠——調色盤的其餘部分便能以該固定點為基準,針對相對對比與和諧度進行推論。一個能明確標示基準色名稱的參考資料,遠比那種只展示漂亮漸層卻讓你自己猜測實際顏色的參考更有用。
同時值得注意的一點是,這 148 個名稱並非知覺上均勻的調色盤、科學分類法或無障礙評等。它們是歷史性的識別符,某些相鄰的名稱在螢幕上看起來可能出奇地相似。請將此對照表視為快速找到穩定基準色的工具,而非評判哪些組合最佳的意見來源。
如何查找命名顏色並複製其 HEX
- 開啟 HTML 顏色名稱對照表,在篩選框中輸入 CSS 顏色名稱的一部分、精確的六位數 #RRGGBB 值,或完整的 rgb(...) 字串。
- 檢視符合的列。每列會顯示標準化關鍵字、渲染色塊、小寫的 #RRGGBB 值,以及小數形式的 rgb(r, g, b)。
- 確認關鍵字、色塊與數值如你所預期。色塊是由所顯示的同一個 HEX 渲染而成,因此若視覺上有出入,表示你的搜尋中有打錯字。
- 點擊你想要那一列的 HEX 值。瀏覽器會在剪貼簿寫入請求完成後,才回報成功。
- 清除篩選以恢復全部 148 列,並試聽其他名稱作為調色盤其他部分的基準。
關鍵字搜尋不區分大小寫,且支援名稱片段比對,因此輸入「seag」會同時回傳 seagreen 和 darkseagreen,你不需要記住完整拼寫。以 # 開頭的搜尋會視為精確的 HEX 比對,完整的 rgb(...) 字串也會進行精確比對,避免簡短的數字片段意外命中不相關的通道值。
你在對照表中會看到兩次的標準化別名
有幾個 CSS 關鍵字是相同 sRGB 值的標準化別名。對照表會將它們保留為各自獨立的合法列,而不是合併它們,因為每一種拼法都是合法的 CSS 識別符,現有樣式表可能依賴其中之一。如果你看到看似重複的項目,那是刻意保留的別名配對,而非資料錯誤。以下配對屬於 CSS Color 4 規格的一部分,在對照表中以獨立列呈現,並具有相同的 HEX 和 RGB 值。
| 主要關鍵字 | 別名關鍵字 | 共用的 sRGB 值 |
|---|---|---|
| aqua | cyan | #00ffff |
| fuchsia | magenta | #ff00ff |
| gray | grey | #808080 |
| darkgray | darkgrey | #a9a9a9 |
| darkslategray | darkslategrey | #2f4f4f |
| dimgray | dimgrey | #696969 |
| lightgray | lightgrey | #d3d3d3 |
| lightslategray | lightslategrey | #778899 |
| slategray | slategrey | #708090 |
美式與英式 gray 拼法在多個名稱中並存,情況類似。當你選擇其中一種拼法作為調色盤基準時,請在整個設計中保持一致,讓檔案讀起來更為清晰。如果你正在維護舊有樣式表,請保留原有拼法,僅在有正當理由時才進行統一化。
從命名顏色到 CMYK 調色盤:實務操作示範
假設你想要一個暖色調的調色盤基準,用於印刷型錄,而且希望基準是 CSS 命名顏色,而非取樣色塊。首先開啟 HTML 顏色名稱對照表,在篩選框中輸入「tomato」。對照表會篩選出符合的關鍵字,以紅橙色顯示渲染色塊,並將數值顯示為小寫字串 #ff6347,以及 rgb(255, 99, 71)。點擊 HEX 即可複製到剪貼簿;若瀏覽器拒絕剪貼簿權限,關鍵字、HEX 和 RGB 文字仍可選取,方便你手動複製。
有了這個基準後,你可以手動或透過工具推導鄰近色。若要快速進行定性解讀,你可以勾勒出三個角色:從基準稍微降低飽和度的柔和暖色中性色、向同一色相深色端拉深的暖色陰影,以及用於標題易讀性的冷色平衡色。HTML 顏色名稱對照表正是為這三個角色挑選候選名稱的合適工具,因為每個候選都對應一個穩定的 HEX,你可以在採用前先以視覺方式確認。
此對照表不會輸出 CMYK 百分比。若要將複製的 HEX 轉換為印刷用的 CMYK,請交給專門的轉換工具,例如 RGB 轉 CMYK 轉換器,它能處理螢幕到印刷的數學運算,無需你手動計算通道。請將此對照表視為查詢步驟,將轉換器視為投影步驟,而不是要求任一工具同時完成兩種工作。
對於希望擴展調色盤而非僅挑選單一基準的設計師,相關文章 以 HTML 命名顏色解說 CMYK 色表 以更聚焦印刷的觀點,說明相同的查詢流程,包括如何依據 CMYK 預期來解讀產生的 HEX 值。
HTML 顏色名稱對照表無法做到的事
此對照表是參考資料,而非產生器。它不會產生 CMYK 百分比、不會執行漸層運算、不會從影像中取樣顏色、不會從基礎色建構調色盤,也不會評等無障礙對比。它同樣不包含 transparent 或 currentColor 關鍵字。Transparent 是帶有 alpha 通道的特殊關鍵字,代表透明黑色而非不透明的命名色塊;currentColor 則解析為元素已有的 computed color 屬性,因此兩者都沒有單一固定的 HEX 值值得列入不透明表格中。將這兩個值排除在 148 列之外,能避免產生誤導性的數字對應。
篩選只會改變哪些列可見,絕不會更動數值本身。搜尋不會將顏色轉換至另一個色彩空間、不會合併別名、也不會虛構模糊同義詞;若沒有任何結果符合查詢,對照表會顯示「無符合」訊息,而不是代入你未要求的相近顏色。搜尋結果會保留規格表的順序,在此實作為依關鍵字的 ASCII 字母順序,因此同一查詢每次都會以相同順序回傳相同的列。
在對比度方面,此對照表本身無法回答無障礙問題。僅憑顏色名稱無法判斷前景與背景的配對是否符合 WCAG 指引,因為對比度取決於具體配對、文字大小、字重以及你所依循的規範。該步驟請使用專門的對比度工具,而不是依賴名稱所暗示的明度。對於調色盤產生、影像取樣或網頁安全色對齊,請使用對應的專門工具,而非要求此參考資料涵蓋所有工作流程。
完成調色盤工作流程的配套工具
完整的 CMYK 調色盤工作流程很少只靠單一參考資料完成。一旦基準 HEX 入手,幾個相鄰工具就能在不損失準確度的情況下完成後續步驟。先前提到的 RGB 轉 CMYK 轉換器接收複製的 HEX,輸出印刷規格所需的 CMYK 百分比。調色盤產生器 接收基礎色,若你希望自動推導調色盤而非手動挑選,可回傳互補色、類似色及三等分和諧配色。對於隨機探索性基準,當命名顏色中沒有合適起點時,隨機顏色產生器可作為發想的種子。
若你想驗證基準的確切通道值,或在 HEX 與整數 RGB 之間反覆轉換,專門的 HEX 轉 RGB 與 RGB 轉 HEX 工具可在不損失精度的情況下完成來回轉換。命名顏色對照表位於這個流程鏈的起點:它標示基準名稱、鎖定 HEX 並複製數值。下游所有步驟都是各自獨立的專門工具,這也是對照表刻意不試圖同時擔任轉換器、產生器或對比度評分工具的原因。
延伸閱讀:RGB 轉 CMYK 新手指南:白話文逐步說明。