Why OKLCH CSS variables still need a real fallback

by

I just added CSS export to OKLCH Pixel Palette and ran into a subtle compatibility detail worth sharing.

A custom property accepts almost any token sequence. That means this declaration can be stored even when the browser cannot render OKLCH:

--brand: oklch(62% 0.18 265);

The failure happens later when var(--brand) is used as a color, so putting a HEX declaration immediately before it is not a dependable fallback. The exported file now writes HEX custom properties first, then overrides them inside (color: oklch(50% 0 0)).

That gives older browsers a valid sRGB value while modern browsers keep the perceptual OKLCH version. Variable names remain stable and include the palette order and role.

You can try it at . What would be more useful next: a Tailwind theme, Sass map, or Godot resource?

5 views

Add a comment

Replies

Be the first to comment