Presets

Color Space

Different color spaces produce different mixing results. OKLCH and OKLab are perceptually uniform and often produce more natural results.

Colors

+
50%50%

Saved Configurations

Result

color-mix(in srgb, #3498db, #e74c3c)
Color 1
Mixed
Color 2

Color Scale

0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
100% Color 1100% Color 2

Color Space Comparison

sRGB
sRGB Linear
Lab
OKLab
LCH
OKLCH

Note: Preview uses sRGB approximation. Actual browser rendering may differ per color space.

Generated CSS

/* CSS Color Mix - Generated by Brix340 Tools */

/* Basic Usage */
.mixed-color {
  background-color: color-mix(in srgb, #3498db, #e74c3c);
}

/* With CSS Custom Properties */
:root {
  --color-primary: #3498db;
  --color-secondary: #e74c3c;
  --color-mixed: color-mix(in srgb, #3498db, #e74c3c);
}

/* Color Scale (Tints & Shades) */
:root {
  --color-10: color-mix(in srgb, #3498db 10%, #e74c3c);
  --color-20: color-mix(in srgb, #3498db 20%, #e74c3c);
  --color-30: color-mix(in srgb, #3498db 30%, #e74c3c);
  --color-40: color-mix(in srgb, #3498db 40%, #e74c3c);
  --color-50: color-mix(in srgb, #3498db 50%, #e74c3c);
  --color-60: color-mix(in srgb, #3498db 60%, #e74c3c);
  --color-70: color-mix(in srgb, #3498db 70%, #e74c3c);
  --color-80: color-mix(in srgb, #3498db 80%, #e74c3c);
  --color-90: color-mix(in srgb, #3498db 90%, #e74c3c);
}

/* Interactive State Example */
.button {
  background-color: #3498db;
  transition: background-color 0.2s ease;
}

.button:hover {
  background-color: color-mix(in srgb, #3498db 80%, #e74c3c);
}

.button:active {
  background-color: color-mix(in srgb, #3498db 60%, #e74c3c);
}

/* Transparency Mixing */
.semi-transparent {
  background-color: color-mix(in srgb, #3498db 50%, transparent);
}

/* Fallback for Older Browsers */
.mixed-color {
  background-color: #8e728c; /* Fallback */
  background-color: color-mix(in srgb, #3498db, #e74c3c);
}

/* @supports Feature Detection */
@supports (background-color: color-mix(in srgb, red, blue)) {
  .modern-mix {
    background-color: color-mix(in srgb, #3498db, #e74c3c);
  }
}

CSS color-mix() Reference

Basic Syntax

color-mix(in colorspace, color1, color2)
color-mix(in colorspace, color1 percentage, color2)
color-mix(in colorspace, color1 p1%, color2 p2%)

Color Spaces

  • srgb - Standard web colors
  • oklch - Modern perceptual (recommended)
  • lab - Perceptually uniform
  • hsl - Hue-based mixing
  • hwb - Whiteness/blackness based

Use Cases

  • Creating tints (mix with white)
  • Creating shades (mix with black)
  • Hover/active states
  • Dynamic color palettes
  • Semi-transparent overlays

Browser Support

  • Chrome 111+
  • Firefox 113+
  • Safari 16.2+
  • Edge 111+

~90% global coverage (Dec 2024)

Examples

/* 50-50 mix */
color-mix(in srgb, blue, red)

/* 25% blue, 75% red */
color-mix(in oklch, blue 25%, red)

/* With transparency */
color-mix(in srgb, blue 50%, transparent)

/* CSS Variables */
color-mix(in lab, var(--primary), white 20%)

Tips

  • Use oklch/oklab for perceptually smooth gradients
  • Percentages don't need to add to 100%
  • Mix with transparent for opacity effects
  • Perfect for dynamic theme generation
  • Always provide fallback colors for older browsers