color-mix()
Copy HTML
<div class="color-mix"></div>CSS color-mix() playground
Explore color-mix() by adjusting the color space, two colors, and their percentages. In polar spaces such as hsl, hwb, lch, and oklch you can also change hue interpolation and see the browser-resolved color in the generated code.
Report an issue
Copy lab URL
HTML
CSS
Copy CSS
.color-mix {
background-color: color-mix(in srgb, #ff7a8a 50%, #6fd6ff 50%);
}