Color Format Converter

About this tool

Why convert color formats?

How to use this converter

Format reference

Migration patterns

Pro tips

Free tool No sign-up

Input · Paste CSS or any text with colors

Examples:

6 unique · 6 occurrences

Rewritten as OKLCH✓ 6 colors swapped

:root {
  --color-primary: oklch(0.624 0.21 283.4);
  --color-accent:  oklch(0.44 0.16 303.4);
  --color-success: oklch(0.699 0.134 165.5);
  --color-warning: oklch(0.767 0.158 68.4);
  --color-danger:  oklch(0.72 0.18 10.2);
  --color-text:    oklch(0.956 0.023 291.4 / 0.92);
}

Rewrite as

Convert between hex, rgb, hsl, oklch, oklab, hwb, and named colors. Bulk mode — paste a whole stylesheet and convert every color at once with one click.

🎨

Convert a whole stylesheet at once

Most online converters do one color at a time. This one detects every hex, rgb, hsl, oklch, hwb, lab, lch, and named color in pasted CSS — and rewrites them all in one click. Designed for migration work.

🌈

Modern color spaces, accurately

OKLCH, OKLAB, and Lab/LCh aren't the same as HSL. Naive converters treat them as drop-in replacements and produce wrong colors. We use Color.js (the reference implementation) so OKLCH ↔ sRGB round-trips are perceptually correct.

⚡

Built for the modern CSS migration

Tailwind 4, modern design tokens, and 2026-era browsers all favour OKLCH for predictable lightness and accessibility. Convert your existing palette today and ship it tomorrow with one paste.

🔢

Click any value to copy it

Every cell in the conversion table is its own copy button — grab just the OKLCH for one design token, or click "Copy rewritten" to grab the whole input with all colors swapped.

▶

Paste your input

Drop in CSS, design tokens, or just a list of colors. The converter automatically detects every supported format anywhere in the text — values, comments, code blocks, prose. No need to format your input first.

Read the conversion table

Each detected color shows its swatch and every format side by side: HEX, RGB, HSL, OKLCH, OKLAB, HWB. Click any cell to copy that single value to your clipboard.

Pick a target format

In the bottom bar, pick the format you want to migrate to (OKLCH for modern CSS, RGB for compatibility, HEX for the simplest output). The "Rewritten" preview updates live with the swap.

Copy or download

Click "Copy rewritten" to grab the entire input back with every color converted, or "Download" to save it as a .css file. Original whitespace, comments, and selectors are all preserved.

⇄

Input	HEX	RGB	HSL	OKLCH
`#7c6cff`	`#7c6cff`	`rgb(124 108 255)`	`hsl(247 100% 71%)`	`oklch(0.65 0.22 290)`
`rebeccapurple`	`#663399`	`rgb(102 51 153)`	`hsl(270 50% 40%)`	`oklch(0.42 0.16 295)`
`rgb(46, 184, 138)`	`#2eb88a`	`rgb(46 184 138)`	`hsl(157 60% 45%)`	`oklch(0.69 0.13 165)`
`hsl(35, 90%, 55%)`	`#f5a826`	`rgb(245 168 38)`	`hsl(35 90% 55%)`	`oklch(0.76 0.17 65)`
`rgba(255, 108, 138, 0.92)`	`#ff6c8aeb`	`rgb(255 108 138 / 0.92)`	`hsl(348 100% 71% / 0.92)`	`oklch(0.71 0.21 13 / 0.92)`
`oklch(0.65 0.22 295)`	`#7c6cff`	`rgb(124 108 255)`	`hsl(247 100% 71%)`	`oklch(0.65 0.22 295)`

Tokens

:root {
  --primary: #7c6cff;
  --accent:  rebeccapurple;
  --success: rgb(46, 184, 138);
  --warning: hsl(35, 90%, 55%);
  --danger:  #ff6c8a;
}

→ OKLCH

:root {
  --primary: oklch(0.65 0.22 290);
  --accent:  oklch(0.42 0.16 295);
  --success: oklch(0.69 0.13 165);
  --warning: oklch(0.76 0.17 65);
  --danger:  oklch(0.71 0.21 13);
}

Mixed

/* before — mixed legacy formats */
.button {
  background: #7c6cff;
  color: rgba(255, 255, 255, 0.95);
  border: 1px solid hsl(247, 100%, 60%);
}

/* after — all OKLCH, alpha preserved */
.button {
  background: oklch(0.65 0.22 290);
  color: oklch(0.99 0 0 / 0.95);
  border: 1px solid oklch(0.58 0.24 290);
}

✦

rebeccapurple

rgb(46, 184, 138)

hsl(35, 90%, 55%)

rgba(240, 238, 255, 0.92)

OKLCH is perceptually uniform

Lightness in OKLCH means visual lightness — `oklch(0.5 …)` always looks half-bright, regardless of hue. HSL's lightness, by contrast, varies dramatically across hues (yellow at 50% looks much brighter than blue at 50%). For accessible color systems, OKLCH is the right base.

Migrating? Test on real backgrounds

Some colors at the gamut edge (very saturated reds, neon greens) won't round-trip exactly between OKLCH and sRGB — they get clamped. Visually compare the rewritten output against your original on real surfaces before committing to a migration.

Alpha is preserved

Convert `rgba(255,108,138,0.92)` to OKLCH and the `/0.92` alpha follows along. Same with hex shorthand: an 8-digit hex like `#ff6c8aeb` carries its alpha into every other format. Useful for design-token migrations where opacity is meaningful.

Browser support is excellent

OKLCH and OKLAB hit baseline browser support in 2023, and `color()` functions in 2024. For 2026 production use, no fallback is needed unless you're supporting Safari < 15.4. The CSS Color Module 4 spec is where the web is going.