顏色格式轉換

📖 工具介紹

把同一个顏色在 HEX、RGB、HSL、HSV、CMYK 五种写法之间来回换算，附带 WCAG 對比度检查和配色生成。设计稿上取到的一个色值，粘进来就能拿到所有格式，还能直接复制成 CSS 变量。全部在本机计算，不上传。

做界面的人拿到設計稿的色值，需要立刻換成各種寫法貼進代碼。做 PPT 或海報的人可以用配色方案快速找幾個過渡色。寫無障礙檢查報告的人，用對比度數值當依據，比憑感覺說"看得清"更有說服力。

做界面的人拿到設計稿的色值，需要立刻換成各種寫法貼進代碼。做 PPT 或海報的人可以用配色方案快速找幾個過渡色。寫無障礙檢查報告的人，用對比度數值當依據，比憑感覺說"看得清"更有說服力。

• 爲什麼 CMYK 和印刷出來不一樣？屏幕色域比印刷大，轉換隻是近似，正式印刷請打樣。
• 對比度多少算合格？正文一般要求 4.5 比 1 以上，大號字可以放寬到 3 比 1。
• 能一次算多個顏色嗎？當前一次處理一個色值，批量需求可以反覆粘貼。
• 配色方案能直接用嗎？它是色相旋轉的數學結果，建議再按實際畫面微調。

✨ 功能特點

• 双向换算：填 HEX 出 RGB/HSL/HSV/CMYK，也可以只填 RGB 三个分量反推 HEX。
• 取色器：点色块直接选色，改完立即换算，不用手打。
• 對比度：算出该色对纯白与纯黑的對比度，并按 WCAG 给出 AA 是否通过。
• 文字建议：對比度更高的那个方向就是推荐文字色，避免自己拿眼睛猜。
• 配色生成：暗部阶、亮部阶、互补、类似色、三角配色五种方案。
• CSS 变量：一键生成可直接贴进样式表的变量写法。

🚀 使用方式

1. 在 HEX 框里粘入色值，或用取色器选一个顏色。
2. 点【轉換】，右侧列出五种格式与十进制值。
3. 看對比度区块，确认文字用黑还是白。
4. 换配色方案下拉，取走需要的那几个色块。
5. 点【复制色值】拿走 HEX，或复制 CSS 变量区里的文本。

⚠️ 注意事項

• 印刷請以打樣為準CMYK 是屏幕色的近似换算，与印刷实际出片会有偏差，正式印刷请以打样为准。
• 對比度口徑有限對比度按 WCAG 2.1 相对亮度公式算，只覆盖纯白与纯黑两种底色。
• 配色是數學推導配色方案由 HSL 色相旋转得到，是数学推导结果，不等于设计上的最优搭配。
• 不識別顏色名本工具不做顏色名称识别，也不做图片取色。
• CMYK 會有偏差屏幕色域比印刷大，轉換隻是近似，正式印刷請打樣。