$color-converter
Parse any CSS color and see it in HEX, RGB, HSL, and OKLCH side-by-side. Alpha is preserved, and a WCAG contrast check against black and white helps pick readable text colors.
Accepts HEX (#rgb, #rrggbb, #rrggbbaa), rgb(), hsl(), oklch(), named colors, and bare hex.
| Format | Value | |
|---|---|---|
| HEX | #3b82f6 | |
| RGB | rgb(59 130 246) | |
| HSL | hsl(217.22 91.22% 59.8%) | |
| OKLCH | oklch(62.31% 0.188 259.81) |
How to use the color converter
Paste any CSS color and this tool shows the equivalent in HEX, RGB, HSL, and OKLCH. That covers the four formats you actually meet in modern CSS, design tokens, and screenshot pickers. Alpha is preserved through every conversion, so a semi-transparent brand color round-trips without surprises.
- Type or paste a color. The input accepts
#3b82f6,rgb(59 130 246),hsl(217 91% 60%),oklch(63% 0.17 258), named colors, and the bare 6-digit hex a designer hands you in Slack. - Use the picker for a starting point. The native color picker next to the input seeds the text field, then you can fine-tune in any format.
- Copy the format you need. Each row has a copy button. Drop the HEX into Figma, the OKLCH into a Tailwind v4 theme, or the RGB into a canvas call.
- Check contrast. The WCAG contrast ratios against black and white tell you at a glance whether this color passes AA (4.5:1) or AAA (7:1) as body text, or only large text (3:1).
When to pick which format
- HEX — design handoff and anywhere you need a compact, universally supported string.
- RGB / RGBA — programmatic use, canvas, and legacy environments. The modern space syntax is fine in every current browser.
- HSL — hand-tweaking a theme by adjusting hue, saturation, or lightness. It matches how humans think about color, but the lightness axis is perceptually uneven across hues.
- OKLCH — the current best default for a design system. Same numeric lightness looks equally bright across hues, and interpolation between two OKLCH values stays inside the intended hue instead of sliding through muddy grays.
Note that OKLCH can express colors outside the sRGB gamut. When that happens, the sRGB components are clamped — the round-trip will be close but not exact, and the preview swatch reflects the in-gamut result.