實際 UI 工作用的色彩轉換器

在 design token 進入正式環境前，轉換色彩格式、檢查對比，並探索相關色盤。

支援 HEX、RGB、HSL 和常見 CSS 色彩。
4.70vs Black
4.46vs White
對比
檢查前景和背景是否容易閱讀。
HEX
RGB
HSL
CMYK

色彩關係

互補色
#6366f1
#f1ef63
相近色
#63acf1
#6365f1
#a863f1
明暗變化
#6467f2
#2529ec
#1013bd
#0b0d7e
#05063f

色彩格式指南

HEX

Web design 常用的精簡格式，通常寫成六位十六進位值。

RGB

以紅、綠、藍光值為基礎，面向螢幕的色彩模型。

HSL

以 hue、saturation、lightness 表示，較容易用人類方式調整明暗和相關 UI 狀態。

CMYK

面向印刷的色彩模型，以 cyan、magenta、yellow 和 black 為基礎。亮色從螢幕轉印刷時可能有落差。

Contrast

對比影響表單、儀表板、價格表、錯誤狀態，以及每個需要快速閱讀的地方。

常見問題

RGB 和 CMYK 為什麼會有些微落差？

螢幕色和印刷色使用不同色域。有些 RGB 色彩無法在 CMYK 中完全重現。

WCAG 對比分數代表什麼？

它衡量前景和背景放在一起時的可讀性。分數越高，通常代表文字越容易閱讀。

品牌色可以拿來當內文字色嗎？

不一定。適合 logo 或 accent 的品牌色，放在內文上可能不夠可讀。需要閱讀時請使用更穩的中性色或調整後的色階。

為什麼不同工具看到的顏色不同？

螢幕、色彩描述檔、瀏覽器和印刷流程都可能讓同一個數值呈現不同效果。轉換結果可當實用參考，最後仍要在目標媒介測試。