OKLCH.xyz

CSS to OKLCH Bulk Converter

Convert every color in a CSS file to OKLCH without touching names, comments or URLs.

4 colors converted
Input CSS
:root {
  --primary: oklch(0.623 0.188 259.81);
  --surface: oklch(1 0 0);
  --accent: oklch(0.556 0.23 292.58);
  /* keep this comment and the url below untouched */
  --bg-image: url("/hero.png");
  --danger: oklch(0.637 0.208 25.33);
}

Migrate a stylesheet in one paste

Single-color converters are fine for one value, but real migrations mean whole files. This tool rewrites only the color values it recognizes and leaves the rest of your CSS — structure, comments, URLs and SVG data — exactly as it was.

Frequently asked questions

Can I process an entire CSS file?

Yes. Paste a whole file — variable names, comments and indentation are preserved; only color values are rewritten to oklch().

Will it break URLs or SVG data?

No. The matcher only targets hex and rgb()/hsl()/hwb() color functions, so url(), strings and path data are left alone.

Can I convert only hex colors?

Switch the mode to 'Only HEX' to leave rgb()/hsl() untouched.

Related tools