Is my color data sent to a server?

No. Parsing, conversion, and contrast checks all run in your browser. The page makes no network calls for the tool.

Why should I use OKLCH?

OKLCH is perceptually uniform: the same numeric lightness looks equally bright across hues, and interpolating between two OKLCH values stays inside the intended hue. That makes it the current best default for design tokens and gradients.

Is alpha preserved in every format?

Yes. HEX gains a two-digit alpha suffix (#rrggbbaa), and rgb()/hsl()/oklch() all emit the slash-alpha modern syntax. Opaque colors stay in the shorter form.

Why does my OKLCH round-trip back with slightly different numbers?

OKLCH can express colors outside the sRGB gamut. When it does, the sRGB components get clamped, which produces a close but non-identical OKLCH on the way back. Stay within the gamut if exact round-trips matter.

What contrast ratio do I need?

WCAG 2.1 requires 4.5:1 for normal body text (AA) and 7:1 for AAA. Large text (18pt+ or 14pt bold) only needs 3:1 for AA. The tool flags each threshold.

$color-converter

Converters

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.

Color input

Accepts HEX (#rgb, #rrggbb, #rrggbbaa), rgb(), hsl(), oklch(), named colors, and bare hex.

α 1.00

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)`

WCAG contrast (assuming fully opaque)

Sample text

on black (0,0,0)5.71:1 AA

Sample text

on white (255,255,255)3.68:1 AA Large

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.

// how-to

How to convert between HEX, RGB, HSL, and OKLCH

Paste any CSS color and see the equivalent in HEX, RGB, HSL, and OKLCH with alpha preserved. Runs entirely in your browser.

Paste or pick a color
Type a color in any CSS format — #3b82f6, rgb(59 130 246), hsl(217 91% 60%), oklch(63% 0.17 258), or use the native color picker to seed the field.
Read the converted formats
HEX, RGB, HSL, and OKLCH appear side-by-side. Alpha is preserved through every conversion and shown in the preview swatch.
Copy the format you need
Each row has a copy button. Paste the HEX into Figma, the OKLCH into a Tailwind v4 theme, or the RGB into a canvas call.
Check WCAG contrast
The tool reports the contrast ratio against black and white so you can pick readable text colors at a glance.

// faq

? Is my color data sent to a server?: No. Parsing, conversion, and contrast checks all run in your browser. The page makes no network calls for the tool.
? Why should I use OKLCH?: OKLCH is perceptually uniform: the same numeric lightness looks equally bright across hues, and interpolating between two OKLCH values stays inside the intended hue. That makes it the current best default for design tokens and gradients.
? Is alpha preserved in every format?: Yes. HEX gains a two-digit alpha suffix (#rrggbbaa), and rgb()/hsl()/oklch() all emit the slash-alpha modern syntax. Opaque colors stay in the shorter form.
? Why does my OKLCH round-trip back with slightly different numbers?: OKLCH can express colors outside the sRGB gamut. When it does, the sRGB components get clamped, which produces a close but non-identical OKLCH on the way back. Stay within the gamut if exact round-trips matter.
? What contrast ratio do I need?: WCAG 2.1 requires 4.5:1 for normal body text (AA) and 7:1 for AAA. Large text (18pt+ or 14pt bold) only needs 3:1 for AA. The tool flags each threshold.