CSS Color Mix
The color-mix() function allows you to mix two colors together in a specified color space. It returns a new color value based on the percentages of the input colors.
1. Syntax
color-mix(in <color-space>, <color1> <percentage>?, <color2> <percentage>?);<color-space>: The color space to perform the mixing in (e.g.,srgb,hsl,lch,oklab,oklch).<color>: The colors to mix.<percentage>: (Optional) The amount of that color to include.
2. Basic Mixing
If no percentages are specified, the colors are mixed 50/50.
.mixed {
/* 50% red, 50% blue in sRGB space */
background-color: color-mix(in srgb, red, blue); /* Result: Purple */
}3. Controlling Proportions
You can specify how much of each color to use.
/* 30% red, 70% blue (implied) */
color: color-mix(in srgb, red 30%, blue);
/* 10% red, 10% blue. The remaining 80% is transparency (alpha) */
color: color-mix(in srgb, red 10%, blue 10%);4. Color Spaces Matter
The result of the mix depends heavily on the interpolation color space.
srgb: Standard mixing. Can sometimes result in muddy colors in the middle.hsl: Mixes hue, saturation, and lightness. Can go through different hues on the color wheel.oklch: Perceptually uniform. Often produces the most vibrant and expected gradients/mixes.
/* Mixing Blue and Yellow */
/* Goes through gray/muddy center */
background: color-mix(in srgb, blue, yellow);
/* Goes through green (around the color wheel) */
background: color-mix(in hsl, blue, yellow);5. Creating Tints and Shades
A common use case is creating lighter (tint) or darker (shade) versions of a brand color without defining new variables.
--brand: <a href='/?search=%233498db' class='obsidian-tag'>#3498db</a>;
--brand-light: color-mix(in srgb, var(--brand), white 20%);
--brand-dark: color-mix(in srgb, var(--brand), black 20%);programming/css/css programming/css/colors-and-backgrounds programming/css/css-functions