What is the CSS color-mix() Function?
color-mix() is a powerful color function introduced in the CSS Color Module Level 5 specification. It allows developers to mix two colors directly in CSS without pre-calculating or using CSS variable tricks. It supports 8 color spaces, each producing different mixing results.
Supported Color Spaces
- oklch: Perceptually uniform, most natural mixing results — recommended
- oklab: Similar to oklch, perceptually uniform
- srgb: Standard RGB, linear interpolation may produce unnatural midpoints
- srgb-linear: Linear RGB, physically accurate but perceptually uneven
- lch: CIELCH space, perceptually uniform but less than oklch
- lab: CIELAB space, traditional perceptually uniform space
- hsl: Hue-Saturation-Lightness, hue interpolation may produce unexpected vivid colors
- hwb: Hue-Whiteness-Blackness, good for creating soft tones
Practical Applications of color-mix()
color-mix() has wide applications in modern CSS: creating theme color variants (e.g., darkening for hover states), generating semi-transparent overlay colors, building gradient color scales, implementing dark/light mode switching, and creating color derivation rules in design systems.
What is the CSS color-mix() function?
color-mix() is a CSS Color Level 5 function that mixes two colors directly in CSS. Syntax: color-mix(in color-space, color1 percentage, color2 percentage). Supports srgb, oklch, lch, and more.
What's the difference between color spaces?
Different spaces produce different results: srgb interpolates linearly in RGB (can be unnatural); oklch is perceptually uniform (most natural); hsl interpolates on the hue wheel (can be unexpected). We recommend oklch.
What's the browser compatibility?
color-mix() is supported in Chrome 111+, Firefox 113+, Safari 16.2+. This tool checks your browser in real-time.
How do I copy the generated CSS?
Click 'Copy CSS' to copy the color-mix() code to your clipboard. Paste directly into your CSS file.
Is my data uploaded to a server?
No. All calculations run locally in your browser. No data is uploaded.