color-mix, oklch, and Relative Colors: My 2026 Color Workflow
CSS color functions finally rival a designer's color tool. Here is how I build palettes and variants without a preprocessor. For most of my career, generating color variants meant hardcoding a scale of hex values or using a Sass function. I would spend thirty minutes in a color picker nudging hex values, hoping the hover state looked right. Modern CSS color functions changed this entirely. With color-mix, oklch, and relative color syntax, I can derive an entire palette from a few base values, all in native CSS that updates at runtime. The project that pushed me to adopt these was a white-label SaaS dashboard. Each customer got their own brand color, and every UI element needed to derive hover states, active states, disabled states, and background tints from that single color. Before color functions, I had a Sass mixin that generated fifty CSS variables per brand color. With color-mix, I have five lines of CSS. color-mix for Variants color-mix blends two colors in a given color space. The most common use is creating tints (mixing with white) and shades (mixing with black) from a single base color. :root { --brand:…