🍋
Menu
CSS

Color Mix

CSS color-mix() Function

A function that blends two colors in a specified color space by a given percentage, replacing manual hex math.

Détail technique

CSS color mix is part of the CSS specification maintained by the W3C CSS Working Group. Browser rendering engines (Blink, WebKit, Gecko) implement the specification through their layout and paint pipeline stages. Understanding the rendering pipeline — Style → Layout → Paint → Composite — is key to writing performant CSS. Properties that trigger layout recalculation (width, height, margin) are more expensive than those that only trigger compositing (transform, opacity).

Exemple

```css
/* Example: Color Mix */
.element {
  /* Apply color mix to this element */
  display: block;
  margin: 0 auto;
}
```

Outils associés

Termes associés