color-mix() & Modern Color
Modern CSS introduces powerful color functions - color-mix() blends colors, oklch() provides perceptually uniform color manipulation, and relative color syntax lets you derive colors from existing ones. These eliminate the need for preprocessor color functions.
Modern Color Functions
- color-mix(in srgb, red 50%, blue 50%) - Blends two colors. Adjust percentages for different mixes
- color-mix for hover states - background: color-mix(in srgb, var(--primary), black 20%). Darkens by 20%
- oklch(L C H) - Perceptually uniform color space: Lightness, Chroma (saturation), Hue
- oklch benefits - Changing lightness in oklch doesn't shift the hue (unlike HSL). Better color palettes
- Relative color syntax - color: oklch(from var(--primary) calc(l + 0.2) c h). Lighten a variable color
- light-dark() - light-dark(#fff, #1a1a2e) returns first in light mode, second in dark mode (with color-scheme)
- Browser support - color-mix() works in all modern browsers. oklch has wide support since 2023
Modern Color Code
/* color-mix: blend colors */
.btn:hover {
background: color-mix(in srgb, var(--primary), black 15%);
/* Darkens primary by 15% - no preprocessor needed! */
}
/* Generate color shades with color-mix */
:root {
--primary: #667eea;
--primary-light: color-mix(in srgb, var(--primary), white 30%);
--primary-dark: color-mix(in srgb, var(--primary), black 20%);
--primary-subtle: color-mix(in srgb, var(--primary), transparent 85%);
}
/* oklch for perceptually uniform colors */
:root {
--brand: oklch(0.65 0.25 265); /* Blue */
--brand-light: oklch(0.85 0.15 265);
--brand-dark: oklch(0.45 0.25 265);
/* Same hue, adjusted lightness - looks natural */
}
/* light-dark() function */
:root { color-scheme: light dark; }
body {
background: light-dark(#ffffff, #0f0f23);
color: light-dark(#333, #e0e0e0);
}Tip
color-mix(in srgb, var(--primary), black 15%) replaces Sass's darken() function - and works with CSS variables at runtime. Generate light, dark, and transparent shades of any variable color without a preprocessor.
CSS variables enable theming and dark mode without preprocessors
Common Mistake
Using HSL for color palettes. HSL hue shifts create perceptually uneven colors - HSL lightness 50% looks different for blue vs yellow. Use oklch() instead for perceptually uniform color palettes where brightness changes look consistent across hues.
Practice Task
Build a color system with modern functions: (1) Define --primary in oklch(), (2) Generate --primary-light and --primary-dark using color-mix(), (3) Create a transparent variant with color-mix(in srgb, var(--primary), transparent 85%), (4) Use light-dark() for auto theme colors.
Quick Quiz
Key Takeaways
- Modern CSS introduces powerful color functions - color-mix() blends colors, oklch() provides perceptually uniform color manipulation, and relative color syntax lets you derive colors from existing ones.
- color-mix(in srgb, red 50%, blue 50%) - Blends two colors. Adjust percentages for different mixes
- color-mix for hover states - background: color-mix(in srgb, var(--primary), black 20%). Darkens by 20%
- oklch(L C H) - Perceptually uniform color space: Lightness, Chroma (saturation), Hue