使用步驟
- 輸入顏色，例如
- 從列表中複製需要的格式。
- 設定背景色，檢視對比度以及 WCAG AA/AAA 是否達標。
- 點選色階中的顏色即可切換過去。
引數說明
- HEX / RGB
- 螢幕顏色的紅、綠、藍分量（0–255）。#rrggbbaa 和 rgb(… / 50%) 可以表示透明度。
- HSL / HSV
- 色相、飽和度、亮度（或明度），方便手動調亮或調暗顏色。
- OKLCH
- CSS Color 4 中的感知均勻色彩空間。調整亮度時色相和鮮豔程度保持穩定，非常適合生成配色和暗色主題。
- CMYK
- 簡單公式換算，僅供參考。實際印刷顏色取決於印廠的色彩配置檔案（ICC），精確數值請向印廠確認。
- 對比度
- WCAG 2.2 的 AA 級要求正文 4.5:1、大字（18pt 或 14pt 粗體）3:1；AAA 級分別為 7:1 和 4.5:1。
示例
#0f766e 等於 rgb(15 118 110)、hsl(175 77% 26%)、oklch(51.1% 0.086 186.4)。在白色背景上的對比度約為 5.5:1，任何字號都滿足 WCAG AA。
常用顏色的各種寫法
CSS 命名顏色及其數值。這裡的 CMYK 是數學換算，正式印刷請以印刷廠的色彩配置為準：
| CSS 名稱 | 顏色 | HEX | RGB | HSL | CMYK |
|---|---|---|---|---|---|
| red | 紅 | #ff0000 | rgb(255 0 0) | hsl(0 100% 50%) | 0%, 100%, 100%, 0% |
| orange | 橙 | #ffa500 | rgb(255 165 0) | hsl(39 100% 50%) | 0%, 35%, 100%, 0% |
| gold | 金 | #ffd700 | rgb(255 215 0) | hsl(51 100% 50%) | 0%, 16%, 100%, 0% |
| green | 綠 | #008000 | rgb(0 128 0) | hsl(120 100% 25%) | 100%, 0%, 100%, 50% |
| teal | 青 | #008080 | rgb(0 128 128) | hsl(180 100% 25%) | 100%, 0%, 0%, 50% |
| blue | 藍 | #0000ff | rgb(0 0 255) | hsl(240 100% 50%) | 100%, 100%, 0%, 0% |
| navy | 藏青 | #000080 | rgb(0 0 128) | hsl(240 100% 25%) | 100%, 100%, 0%, 50% |
| purple | 紫 | #800080 | rgb(128 0 128) | hsl(300 100% 25%) | 0%, 100%, 0%, 50% |
| hotpink | 亮粉 | #ff69b4 | rgb(255 105 180) | hsl(330 100% 71%) | 0%, 59%, 29%, 0% |
| brown | 棕 | #a52a2a | rgb(165 42 42) | hsl(0 59% 41%) | 0%, 75%, 75%, 35% |
| gray | 灰 | #808080 | rgb(128 128 128) | hsl(0 0% 50%) | 0%, 0%, 0%, 50% |
用哪種格式
**HEX：**CSS 和設計軟體裡最短的寫法，每兩位十六進位制數代表紅、綠、藍。
**RGB：**同樣的資訊用十進位制表示，rgb(255 0 0 / 50%) 還能加透明度。
**HSL：**按色相、飽和度、亮度描述，只改最後一個數就能做出同一顏色的深淺系列。
**OKLCH：**較新的 CSS 格式，亮度每變一檔，人眼感覺的變化也差不多，適合做無障礙配色。
常見問題
文字對比度多少合適？
正文至少 4.5:1（WCAG AA）。純黑配白底是 21:1；常見的 #767676 灰字配白底是 4.54:1，剛好達標。
為什麼 CMYK 和 Photoshop 裡的不一樣？
Photoshop 會通過特定印刷機和紙張的 ICC 配置檔案進行轉換，本工具使用的是純數學公式，適合估算，不能作為印刷打樣依據。
HSL 和 OKLCH 有什麼區別？
HSL 只是 RGB 的簡單變換，同樣「亮度」的黃色和藍色，看起來明暗差別很大。OKLCH 按人眼感知設計，亮度相同的顏色看起來一樣亮。
現在能在 CSS 裡直接用 OKLCH 嗎？
可以，當前主流瀏覽器都已支援 oklch()。
隱私說明
本工具完全在瀏覽器中執行，檔案和文字都在你的裝置上處理，不會上傳到我們的伺服器。