Modern CSS Color Functions

CSS has evolved to include powerful color manipulation functions and new color spaces that enable more sophisticated and accurate color handling in web design.

Browser Support

Modern color functions are supported in recent browser versions:

Chrome 111+
Firefox 113+
Safari 16.4+
Edge 111+

Color Spaces

LCH Colors

LCH (Lightness, Chroma, Hue) provides a perceptually uniform color space:

.element {
  /* lch(lightness chroma hue) */
  color: lch(50% 50 180);
  background: lch(80% 40 130 / 0.8); /* with alpha */
}

Lab Colors

Lab color space provides precise color definition:

.element {
  /* lab(lightness a-axis b-axis) */
  color: lab(50% 40 50);
  background: lab(80% -20 30 / 0.9); /* with alpha */
}

Oklab and Oklch

Optimized versions of Lab and LCH for digital displays:

.element {
  color: oklab(60% -0.1 0.1);
  background: oklch(70% 0.15 180);
}

Color Mixing

`color-mix()`

Mix colors in various color spaces:

.element {
  /* Basic color mixing */
  background: color-mix(in srgb, blue, red 50%);
  
  /* Mix in different color spaces */
  color: color-mix(in lch, #ff0000, #00ff00);
  border-color: color-mix(in oklch, currentColor, black 20%);
  
  /* Multiple color stops */
  background: color-mix(in srgb, blue 25%, red 75%);
}

/* Practical examples */
.button {
  --btn-color: #0066cc;
  
  /* Create hover state */
  background: var(--btn-color);
  
  &:hover {
    background: color-mix(in oklch, var(--btn-color), white 20%);
  }
  
  &:active {
    background: color-mix(in oklch, var(--btn-color), black 20%);
  }
}

Relative Colors

`color()`

Create colors relative to a base color:

.element {
  /* Adjust lightness */
  color: color(display-p3 1 0 0 lighter(20%));
  
  /* Adjust saturation */
  background: color(display-p3 0 1 0 more-saturated(30%));
}

Color Spaces with `from`

Create colors in one space based on another:

.element {
  /* Convert between color spaces */
  color: lch(from srgb #ff0000);
  background: oklch(from display-p3 #ff0000);
}

Color Contrast

`color-contrast()`

Select the most readable color from a list:

.text {
  /* Choose most readable color */
  color: color-contrast(var(--background-color) vs 
    black, white, #0066cc
  );
}

Practical Examples

Theme System

:root {
  --brand-color: oklch(60% 0.15 180);
  
  /* Create color variations */
  --brand-light: color-mix(in oklch, var(--brand-color), white 30%);
  --brand-dark: color-mix(in oklch, var(--brand-color), black 30%);
  
  /* Create accessible text colors */
  --text-on-brand: color-contrast(var(--brand-color) vs
    white, black
  );
}

.button {
  background: var(--brand-color);
  color: var(--text-on-brand);
  
  &:hover {
    background: var(--brand-light);
  }
  
  &:active {
    background: var(--brand-dark);
  }
}

Gradient Generator

.gradient {
  --start-color: oklch(70% 0.15 180);
  --end-color: oklch(50% 0.15 220);
  
  background: linear-gradient(
    to right,
    var(--start-color),
    color-mix(in oklch, var(--start-color), var(--end-color)),
    var(--end-color)
  );
}

Color Palette Generation

:root {
  --primary: oklch(60% 0.15 180);
  
  /* Generate palette */
  --primary-50: color-mix(in oklch, var(--primary), white 90%);
  --primary-100: color-mix(in oklch, var(--primary), white 70%);
  --primary-200: color-mix(in oklch, var(--primary), white 50%);
  --primary-300: color-mix(in oklch, var(--primary), white 30%);
  --primary-400: color-mix(in oklch, var(--primary), white 10%);
  --primary-500: var(--primary);
  --primary-600: color-mix(in oklch, var(--primary), black 10%);
  --primary-700: color-mix(in oklch, var(--primary), black 30%);
  --primary-800: color-mix(in oklch, var(--primary), black 50%);
  --primary-900: color-mix(in oklch, var(--primary), black 70%);
}

Best Practices

1. Choose Appropriate Color Spaces

/* ✓ Good - use perceptual color spaces for UI */
.button {
  background: oklch(60% 0.15 180);
  color: oklch(95% 0 0);
}

/* ✗ Bad - RGB can be unpredictable */
.button {
  background: rgb(0, 100, 200);
  color: rgb(240, 240, 240);
}

2. Use Color Mixing for Variations

/* ✓ Good - consistent color relationships */
.card {
  --card-bg: oklch(60% 0.15 180);
  background: var(--card-bg);
  border-color: color-mix(in oklch, var(--card-bg), black 20%);
}

/* ✗ Bad - manual color adjustments */
.card {
  background: #0066cc;
  border-color: #004d99;
}

3. Consider Color Contrast

/* ✓ Good - automatic contrast */
.text {
  color: color-contrast(var(--bg-color) vs
    black, white
  );
}

/* ✗ Bad - manual contrast */
.text {
  color: white;
}

Common Use Cases

Design Systems: Creating consistent color palettes
Theming: Dynamic color generation and manipulation
Accessibility: Ensuring readable color combinations
Animation: Smooth transitions between colors
Dark Mode: Generating dark mode colors automatically

Tips and Tricks

1. Color Space Conversion

/* Convert existing colors to modern spaces */
.element {
  --legacy-color: #0066cc;
  --modern-color: oklch(from srgb var(--legacy-color));
}

2. Progressive Enhancement

/* Fallback first */
.button {
  background: #0066cc;
  background: oklch(60% 0.15 180);
}

3. Dynamic Colors

/* Create dynamic color variations */
.card {
  --base: oklch(60% 0.15 180);
  --hover: color-mix(in oklch, var(--base), white 20%);
  --active: color-mix(in oklch, var(--base), black 20%);
  
  background: var(--base);
  
  &:hover { background: var(--hover); }
  &:active { background: var(--active); }
}

Modern CSS color functions provide powerful tools for creating sophisticated color systems that are both visually appealing and accessible. They enable more precise color control and make it easier to maintain consistent color relationships across your design system.