color-mix() computes an intermediate color by blending two colors in a chosen interpolation color space. It is useful for deriving shades and blended hues without manually calculating new color values. section 11.3.4
The first argument selects the interpolation method, followed by the two colors. For example, color-mix(in oklch, blue, red) produces an intermediate purple. Because color spaces arrange colors differently, the same pair can produce noticeably different results. section 11.3.4
Build a palette from one green
Define a middle color, then derive darker and lighter variants with black and white: --green-30: color-mix(in srgb, var(--middle-green), black 40%); --green-70: color-mix(in srgb, var(--middle-green), white 40%). Percentages skew the result toward the specified color; an omitted percentage receives the remaining share. section 11.3.4
Choose the interpolation space according to the visual result you want:
- Use a polar space such as hsl or oklch when blending different hues toward an intermediate hue. section 11.3.4
- Use srgb when mixing a color with white or black to create lighter or darker shades of that color. section 11.3.4
- Treat color-mix() as progressive enhancement where necessary: browser support was insufficient in mid-2024 to rely on it without fallback styles. section 11.3.4
