Color Conversion

When converting existing colors to oklch, convert the color values but leave everything else unchanged — don't change gradient interpolation, don't restructure the CSS.

Supported input formats

Conversion examples

/* Before */color: #3b82f6;background: #1e293b;border-color: #e2e8f0;
/* After */color: oklch(0.623 0.188 259.815);background: oklch(0.279 0.037 260.031);border-color: oklch(0.929 0.013 255.508);

/* Before */color: rgb(59, 130, 246);border: 1px solid rgba(0, 0, 0, 0.1);
/* After */color: oklch(0.623 0.188 259.815);border: 1px solid oklch(0 0 0 / 0.1);

Alpha uses the forward-slash syntax. Omit alpha when it's 1.

What to leave alone

• CSS keywords: currentColor, inherit, initial, unset, transparent
• Gradient interpolation methods — only convert the color stops, not the function itself
• Colors in third-party library configs that expect hex input

Bulk conversion

When converting an entire file:

1. Replace all hex colors with their oklch equivalents
2. Replace all rgb(), rgba(), hsl(), hsla() function calls
3. Leave gradient functions unchanged — only convert the color stops within them
4. Leave currentColor, inherit, transparent, and CSS keywords as-is
5. Preserve comments and formatting