Why OKLCH CSS variables still need a real fallback
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 @supports (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 https://oklchpalette.ru/create. What would be more useful next: a Tailwind theme, Sass map, or Godot resource?

Replies