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

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

/* 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); }

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 legt dezelfde keuze uit voor verlopen, en daar is het effect het makkelijkst te zien.

• 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. 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.

: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);
}

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

.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%);
}

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

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

Een volledig thema op basis van deze patronen, met lichte en donkere modus, staat in CSS-variabelen voor 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.

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.