# color-mix() in CSS: kleuren mengen in de browser

[Canonical HTML page](https://gradiently.design/nl/guide/css-color-mix)

color-mix() laat de browser het kleurwerk doen dat je vroeger in een preprocessor of op het oog deed. Kies de juiste kleurruimte en één merkkleur levert een heel palet aan tinten, schakeringen en doorschijnende versies.

## The short version

- De CSS-functie color-mix mengt twee kleuren in een benoemde kleurruimte, bijvoorbeeld color-mix(in oklab, #7c3aed 40%, white).
- Geef je maar één percentage op, dan krijgt de andere kleur de rest; zonder percentages is de mix half om half.
- Mengen in oklab houdt de helderheid gelijkmatig en voorkomt de grijze middens die sRGB-mengen tussen verre tinten geeft.
- Een kleur mengen met transparent is de zuiverste manier om een doorschijnende versie te maken van een kleur die in een custom property staat.
- color-mix() werkt in alle huidige grote browsers, dus het is veilig voor productie, met een gewone kleur als terugval voor heel oude.

De **color-mix CSS**-functie, `color-mix()`, mengt twee kleuren in een kleurruimte naar keuze en geeft een nieuwe kleur terug. Schrijf `color-mix(in oklab, #7c3aed 40%, white)` en je krijgt een lichtviolet dat voor 40 procent uit violet en voor 60 procent uit wit bestaat, waarneembaar gemengd. Het werkt in elke huidige grote browser. Samen met custom properties maakt het van één merkkleur tinten, schakeringen, hoverstaten en doorschijnende overlays, zonder één vastgecodeerde hex.

## color-mix()-syntaxis

```css
/* color-mix(in <colour space>, <colour> [<percentage>], <colour> [<percentage>]) */

.a { color: color-mix(in oklab, #7c3aed, white); }          /* 50% each */
.b { color: color-mix(in oklab, #7c3aed 40%, white); }      /* 40% violet, 60% white */
.c { color: color-mix(in oklab, #7c3aed, black 30%); }      /* 70% violet, 30% black */
.d { color: color-mix(in srgb, #7c3aed 50%, transparent); } /* violet at half opacity */
.e { color: color-mix(in oklch shorter hue, #2563eb, #f59e0b); }
```

De kleurruimte komt eerst en wordt voluit geschreven. Op tint gebaseerde ruimtes zoals oklch en hsl accepteren ook een tintrichting: shorter, longer, increasing of decreasing.

| Wat je schrijft | Wat de browser gebruikt | Opmerkingen |
| --- | --- | --- |
| Geen percentages | 50% en 50% | Een gelijke mix |
| Eén percentage, zeg 30% | 30% en 70% | De andere kleur krijgt de rest |
| Twee die optellen tot 100% | Zoals geschreven | De duidelijkste vorm om later te lezen |
| Twee die optellen tot meer dan 100% | Teruggeschaald naar 100% | 60% en 60% gedraagt zich als 50% en 50% |
| Twee die optellen tot minder dan 100% | Opgeschaald, daarna doorschijnend gemaakt | 20% en 30% geeft een resultaat met halve dekking |

Hoe percentages worden opgelost. De laatste rij verrast mensen: een totaal onder 100 maakt het resultaat gedeeltelijk transparant.

## In welke kleurruimte je mengt

De kleurruimte bepaalt het pad tussen de twee kleuren. In sRGB middelt de browser rood-, groen- en blauwgetallen, wat makkelijk te beredeneren is maar niet is hoe ogen zien. Twee verre tinten gaan onderweg door een doffe grijstint. In oklab volgt de mix de waargenomen helderheid en kleur, dus het midden blijft zuiver en de stappen ogen gelijkmatig. [Verloopinterpolatie](https://gradiently.design/nl/guide/gradient-interpolation) legt dezelfde keuze uit voor verlopen, en daar is het effect het makkelijkst te zien.

- sRGB: vlak grijs in het midden: `linear-gradient(to right, #0000ff, #ffff00)`
- oklab: lichter, zuiverder midden: `linear-gradient(in oklab to right, #0000ff, #ffff00)`
- oklch: reist door cyaan en groen: `linear-gradient(in oklch to right, #0000ff, #ffff00)`

Blauw naar geel in drie ruimtes. Het midden van elke strook is precies wat `color-mix()` bij 50 procent in die ruimte teruggeeft: `#808080` in sRGB, een licht blauwgrijs in oklab.

- **oklab** voor tinten, schakeringen en het meeste dagelijkse mengen. Gelijkmatige helderheid, geen grijze dip.
- **oklch** wanneer je wilt dat de tint reist, bijvoorbeeld twee merkkleuren mengen tot een derde die er op het kleurenwiel tussenin ligt.
- **srgb** voor mengen met `transparent` of om aan te sluiten op oudere ontwerptools die in sRGB mengen.
- **srgb-linear** voor fysiek gebaseerd lichtmengen, dat in het midden helderder oogt.

Voor de achtergrond over waarom waarnemingsgebaseerde ruimtes zich beter gedragen, zie [OKLCH uitgelegd](https://gradiently.design/nl/guide/oklch-explained). Recente versies van de specificatie laten je de kleurruimte weglaten, met oklab als standaard, maar de ondersteuning voor die verkorting is nieuwer, dus schrijf `in oklab` expliciet.

## Tinten en schakeringen uit één merkkleur

Het nuttigste patroon is een schaal die uit één variabele wordt opgebouwd. Meng naar wit voor tinten, naar zwart voor schakeringen. Verander de variabele en elke stap wordt bijgewerkt, ideaal voor producten met meerdere merken of thema’s die de gebruiker kiest.

```css
:root {
  --brand: #7c3aed;

  --brand-100: color-mix(in oklab, var(--brand) 20%, white);
  --brand-200: color-mix(in oklab, var(--brand) 40%, white);
  --brand-300: color-mix(in oklab, var(--brand) 60%, white);
  --brand-400: color-mix(in oklab, var(--brand) 80%, white);
  --brand-500: var(--brand);
  --brand-600: color-mix(in oklab, var(--brand) 80%, black);
  --brand-700: color-mix(in oklab, var(--brand) 60%, black);
}
```

Een schaal van zeven stappen uit één kleur. Verwissel `--brand` voor een willekeurige hex en de schaal volgt.

- brand-100: #e1dbff
- brand-200: #c5b7fe
- brand-300: #aa92fa
- brand-400: #926bf4
- brand-500: #7c3aed
- brand-600: #5a28b0
- brand-700: #3b1877

Waar de schaal hierboven op uitkomt voor `#7c3aed`, berekend in oklab. Gemengd in sRGB komen de tinten iets grijzer uit en de schakeringen iets vlakker.

Mengen met puur wit en zwart is een beginpunt. Voor warmere tinten meng je naar gebroken wit zoals `#fdf6ec`; voor rijkere schakeringen naar diep marineblauw in plaats van zwart. Zo voelt de schaal als jouw merk in plaats van een generieke reeks. [Tinten, tonen en schakeringen](https://gradiently.design/nl/guide/tints-tones-shades) behandelt de kleurtheorie.

## Transparantie met color-mix()

Vóór `color-mix()` betekende een doorschijnende versie van een kleur in een variabele dat je de kanalen apart moest opslaan. Nu meng je met `transparent`. Het deel dat je houdt is de dekking.

```css
.badge {
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
}

.button:hover {
  background: color-mix(in oklab, var(--brand), black 12%);
}
```

Een getinte badge en een hoverstaat uit dezelfde variabele. Geen tweede kleur om te onderhouden.

## Veelgemaakte fouten met color-mix()

- **De kleurruimte weglaten** in code die in oudere browsers moet draaien. De hele declaratie wordt genegeerd, niet alleen de ruimte.
- **Voor elke schakering met zwart mengen.** Schakeringen van verzadigde kleuren worden dof; meng liever naar een diepe versie van de tint.
- **Verwachten dat percentages onder 100 dekkend blijven.** `color-mix(in oklab, red 20%, blue 30%)` is half transparant.
- **hsl gebruiken voor tinten.** Helderheid in hsl is niet waarnemingsgebaseerd, dus een geel en een blauw met dezelfde mix lijken helemaal niet dezelfde stap.

## Browserondersteuning en terugvallen

`color-mix()` is sinds 2023 beschikbaar in Chrome, Edge, Firefox en Safari, en de huidige ondersteuning staat op [caniuse](https://caniuse.com/mdn-css_types_color_color-mix). Moet je heel oude browsers dekken, declareer dan eerst een gewone kleur en laat de gemengde die overschrijven. Browsers die de tweede regel niet begrijpen negeren hem.

```css
.card {
  background: #ede9fe;
  background: color-mix(in oklab, var(--brand) 15%, white);
}
```

Eerst de terugval, dan de verbetering. De cascade doet de rest.

Een volledig thema op basis van deze patronen, met lichte en donkere modus, staat in [CSS-variabelen voor theming](https://gradiently.design/nl/guide/css-custom-properties-theming).

## Kleuren mengen voor verlopen

`color-mix()` is handig in verlopen, waar het een middelste stop uit twee merkkleuren kan berekenen zodat de overgang nooit door modder gaat. `linear-gradient(135deg, var(--a), color-mix(in oklch, var(--a), var(--b)), var(--b))` geeft je een derde stop op het tintpad tussen de twee. Het onderliggende probleem staat in [modderige verlopen](https://gradiently.design/nl/guide/muddy-gradients).

Als je merkkleur in een Gradiently Mark leeft, bevat het recept van de Mark al een familie verwante kleuren die goed samenwerken, en in de Markt kun je zoeken op kleurwoorden zoals “diep violet” om er een te vinden die rond jouw begintint is gebouwd.

## FAQ

### Wat doet color-mix() in CSS?

Het mengt twee kleuren in een kleurruimte die je noemt en geeft het resultaat terug, bijvoorbeeld `color-mix(in oklab, red 30%, white)`.

### Welke kleurruimte moet ik gebruiken met color-mix()?

Gebruik oklab voor tinten, schakeringen en het meeste mengen, oklch wanneer je wilt dat de tint reist, en srgb voor mengen met transparent.

### Hoe maak ik een kleur transparant met color-mix()?

Meng hem met `transparent`: `color-mix(in srgb, var(--brand) 20%, transparent)` geeft de merkkleur met 20 procent dekking.

### Wordt color-mix() in alle browsers ondersteund?

Het werkt in huidige versies van Chrome, Edge, Firefox en Safari. Declareer eerst een gewone kleur als terugval voor oudere browsers.

### Wat gebeurt er als de percentages niet optellen tot 100?

Totalen boven 100 worden teruggeschaald. Totalen onder 100 worden opgeschaald en het resultaat wordt gedeeltelijk transparant.