Modern CSS includes powerful color features: color-mix() for dynamic blending, oklch() for perceptually uniform colors, and relative color syntax for transformations. But not every browser supports every feature. Progressive enhancement lets you use the new tools where available while maintaining a solid experience everywhere.
The Fallback Pattern
.button {
/* Fallback: static hex */
background: #4f46e5;
/* Enhancement: dynamic hover shade */
background: color-mix(in srgb, #4f46e5 85%, black);
}Browsers that support color-mix() use the second declaration (CSS cascading means the last valid declaration wins). Older browsers ignore the second line and use the hex fallback. The user gets a functional button either way.
CSS Custom Properties as the Bridge
CSS custom properties (variables) have excellent browser support (95%+ globally). PaletteRx's CSS Variable exports work as the universal baseline. From that foundation, you can layer modern features:
:root {
--primary: #4f46e5;
--primary-hover: #3730a3; /* Pre-computed fallback */
}
@supports (background: color-mix(in srgb, red, blue)) {
:root {
--primary-hover: color-mix(in srgb, var(--primary) 85%, black);
}
}PaletteRx's Role
PaletteRx exports pre-computed hex values, which work in every browser. These are your fallback layer. The modern CSS features (color-mix, oklch, relative color syntax) are enhancement layers you add on top when your project's browser support allows it.
@supports blocks for modern features where they add value (dynamic hover states, perceptual gradients). Your site works everywhere and looks better where possible.