顏色格式轉換器
貼任一格式(hex / rgb / hsl / oklch / oklab / CSS 命名色),即時雙向轉換五種格式,並推薦最接近的 Tailwind class。完全在瀏覽器跑。
偵測格式: hex
預覽: #1e90ff
最接近 CSS 命名色: dodgerblue (ΔE 0.000)
Hex
#1e90ff
RGB
rgb(30, 144, 255)
HSL
hsl(210, 100%, 56%)
OKLCH
oklch(65.2% 0.19 253.2)
OKLab
oklab(65.2% -5.5% -18.2%)
近似 Tailwind class
- bg-blue-500ΔE 0.036
- bg-sky-500ΔE 0.071
- bg-indigo-500ΔE 0.106
›如何使用
- 輸入框貼任何格式的顏色:
#1e90ff、rgb(30, 144, 255)、hsl(210, 100%, 56%)、oklch(64% 0.19 250)、dodgerblue都可以。 - 右側即時顯示五種格式,點任一行的
Copy直接複製。 - 下方會列出最接近的 Tailwind class(用 OKLab 感知距離 ΔE 排序),做品牌色對應很方便。
- 整個工具狀態會同步到 URL hash(
#1e90ff),可以直接複製網址分享配色。
Tips
- OKLCH 是新一代色彩格式 (CSS Color Level 4),Tailwind v4 已內建支援,在亮度感知上比 HSL 更準。
- ΔE 是顏色距離指標,越小越接近;ΔE < 1 一般人眼分不出來。
- 支援 8 位 hex(含 alpha):
#1e90ff80代表 50% 不透明。