Convert hex, rgb() or hsl() colors to oklch() — one per line, batch-friendly, computed per CSS Color Module Level 4 with the original kept as a comment.
Show calculation steps
Processed privately in your browser — nothing you paste is uploaded, logged or stored.
Migrate a palette in one paste
Moving design tokens to OKLCH starts with converting what you have. Paste colors one per line — bare hex, rgb(), hsl(), even name: #hex pairs from token files — and get each back as oklch() with the original preserved in a comment. Lines that are not colors pass through unchanged and get flagged, so converting a whole variables file is safe.
Worked example
Input: Output:
#3b82f6 oklch(62% 0.188 259.8) /* was #3b82f6 */
brand-dark: #1e3a8a brand-dark: oklch(31.5% 0.135 262.1) /* was #1e3a8a */
rgb(16 185 129) oklch(69.7% 0.149 162.5) /* was rgb(16 185 129) */Accuracy
- The conversion implements the sRGB → OKLab → OKLCH pipeline from CSS Color Module Level 4 (the Björn Ottosson matrices) — the same math browsers run. The automated test suite pins reference values such as pure red ≈ oklch(62.8% 0.258 29.2).
- Round trips are exact: converting back yields the identical hex.
Why bother converting
- Editing in OKLCH is sane: nudge lightness without hue shift, build scales that look even, compare chroma across hues meaningfully.
- v4 Tailwind themes and modern CSS both speak oklch() natively — converted tokens drop straight into an @theme block.
Limitations
- Named CSS colors (like
rebeccapurple) are not parsed — use their hex form. - Alpha channels are not carried through in this batch format; convert the base color and re-apply alpha with the slash syntax (
oklch(62% 0.19 260 / 50%)).
How to use the HEX to OKLCH Converter
- Paste colors one per line — #hex, rgb() or hsl(), with or without a "name:" prefix.
- Click "Convert to OKLCH".
- Each line comes back as oklch() with the original kept as a comment.
- Copy the batch into your CSS or token files.
Frequently asked questions
How accurate is the conversion?
It implements the sRGB → OKLab → OKLCH pipeline from CSS Color Module Level 4 (the Björn Ottosson matrices) — the same math browsers use. The test suite verifies reference values like pure red ≈ oklch(62.8% 0.258 29.2).
Why convert a whole palette to OKLCH?
Because editing colors in OKLCH is sane: nudge lightness without shifting hue, compare chroma across hues meaningfully, and generate consistent scales. Converting existing hex tokens is the first step of that migration.
Is oklch() safe to use in production CSS?
Yes in modern browsers (2023+). For legacy support, declare the hex first and oklch() second — the converter's comments keep both values side by side for exactly that.
Can it convert rgb() and hsl() too?
Yes — any mix of #hex, rgb()/rgba() and hsl()/hsla() lines converts in one batch; unrecognized lines are left unchanged and flagged instead of breaking the run.
