color-mix() and relative color syntax
Blend colors together and create color variations using modern CSS color functions.
color-mix() Function
color-mix() blends two colors together in a specified color space. It enables design token–driven color variations without Sass or JavaScript.
.button-hover {
background: color-mix(in oklch, royalblue 80%, black 20%);
/* 80% royalblue mixed with 20% black */
}color-mix() Syntax
Full syntax: color-mix(in <color-space>, <color-1> [percentage], <color-2> [percentage]). Percentages must sum to 100%.
/* Mix equally */
color-mix(in srgb, red, blue);
/* 50% red + 50% blue */
/* Weighted mix */
color-mix(in oklch, white 30%, navy 70%);All lessons in this course
- calc() for Dynamic Calculations
- min() max() and clamp() for Fluid Values
- repeat() and minmax() in Grid
- color-mix() and relative color syntax