# 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

```css
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.

```css
.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.

```css
/* 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.

```css
/* 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.

```css
--brand: #3498db;
--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]]