CSS color-mix()

Adam Argyle

Met de CSS-functie color-mix() kun je kleuren mengen in een van de ondersteunde kleurruimten, rechtstreeks vanuit je CSS.

Vóór color-mix() gebruikten ontwikkelaars CSS-preprocessors of calc() op kleurkanalen om een kleur donkerder, lichter of minder verzadigd te maken.

.color-mixing-with-sass {
  /* Sass: equally mix red with white */
  --red-white-mix: color.mix(red, white);
}

Sass heeft geweldig werk geleverd door de CSS-specificatie voor kleuren voor te blijven. Er was alleen nog geen echte manier om kleuren te mengen in CSS. Om in de buurt te komen, moet je de wiskunde van gedeeltelijke kleurwaarden doen. Hier volgt een vereenvoudigd voorbeeld van hoe CSS tegenwoordig mengen kan simuleren:

.color-mixing-with-vanilla-css-before {
  --lightness: 50%;
  --red: hsl(0 50% var(--lightness));

  /* add "white" to red
     by adding 25% to the lightness channel
  */
  --lightred: hsl(0 50% calc(var(--lightness) + 25%);
}

color-mix() biedt de mogelijkheid om kleuren te mengen in CSS. Ontwikkelaars kunnen kiezen in welke kleurruimte ze mengen en hoe dominant elke kleur in de mix moet zijn.

.color-mixing-after {
  /* equally mix red with white */
  --red-white-mix: color-mix(in oklab, red, white);

  /* equally mix red with white in srgb */
  --red-white-mix-srgb: color-mix(in srgb, red, white);
}

Dat is wat we willen. Flexibiliteit, kracht en uitgebreide API's. Geniet.

Kleuren mengen in css

CSS bestaat in een wereld met meerdere kleurruimtes en kleurengamma's. Daarom is het niet optioneel om de kleurruimte voor mengen op te geven. Bovendien kunnen verschillende kleurruimten de resultaten van een mix drastisch veranderen. Als je weet wat de effecten van een kleurruimte zijn, kun je de gewenste resultaten behalen.

Probeer deze color-mix()-tool voor een interactieve introductie: - Verken de effecten van elke kleurruimte. - Ontdek de effecten van tintinterpolatie bij het mengen in een cilindrische kleurruimte (lch, oklch, hsl en hwb). - Wijzig de kleuren die worden gemengd door op een van de bovenste 2 kleurvakken te klikken. - Gebruik de schuifregelaar om de mengverhouding te wijzigen. - De gegenereerde color-mix() CSS-code is onderaan beschikbaar.

Mengen in de verschillende kleurruimtes

De standaardkleurruimte voor mengen (en kleurovergangen) is oklab. Het levert consistente resultaten op. U kunt ook alternatieve kleurruimten opgeven om de mix aan uw behoeften aan te passen.

Neem bijvoorbeeld black en white. De kleurruimte waarin ze mengen, maakt niet zo veel verschil, toch? Fout.

color-mix(in srgb, black, white);
color-mix(in srgb-linear, black, white);
color-mix(in lch, black, white);
color-mix(in oklch, black, white);
color-mix(in lab, black, white);
color-mix(in oklab, black, white);
color-mix(in xyz, black, white);

Het heeft een groot effect.

Neem blue en white als ander voorbeeld. Ik heb dit specifiek gekozen omdat de vorm van een kleurruimte de resultaten kan beïnvloeden. In dit geval is dat dat de meeste kleurruimtes paars worden als ze van wit naar blauw gaan. Het toont ook aan dat oklab een betrouwbare kleurruimte is voor mengen. Het komt het dichtst in de buurt van de verwachtingen van de meeste mensen over het mengen van wit en blauw (geen paars).

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

Leren wat de effecten van een kleurruimte met color-mix() zijn, is ook handig om kleurverlopen te maken. De Color 4-syntaxis staat ook toe dat verlopen de kleurruimte specificeren, waarbij een verloop de mix over een gebied van de ruimte toont.

.black-to-white-gradient-in-each-space {
  --srgb: linear-gradient(to right in srgb, black, white);
  --srgb-linear: linear-gradient(to right in srgb-linear, black, white);
  --lab: linear-gradient(to right in lab, black, white);
  --oklab: linear-gradient(to right in oklab, black, white);
  --lch: linear-gradient(to right in lch, black, white);
  --oklch: linear-gradient(to right in oklch, black, white);
  --hsl: linear-gradient(to right in hsl, black, white);
  --hwb: linear-gradient(to right in hwb, black, white);
  --xyz: linear-gradient(to right in xyz, black, white);
  --xyz-d50: linear-gradient(to right in xyz-d50, black, white);
  --xzy-d65: linear-gradient(to right in xyz-d65, black, white);
}

Als je je afvraagt welke kleurruimte 'de beste' is, is er geen. Daarom zijn er zoveel opties. Er zouden ook geen nieuwe kleurruimten worden uitgevonden (zie oklch en oklab) als er één 'de beste' was. Elke kleurruimte kan een uniek moment hebben om te schitteren en de juiste keuze zijn.

Als je bijvoorbeeld een levendig mengresultaat wilt, gebruik je hsl of hwb. In de volgende demo worden 2 levendige kleuren (magenta en limoen) gemengd. HSL en HWB leveren allebei een levendig resultaat op, terwijl sRGB en OKLab onverzadigde kleuren opleveren.

Gebruik oklab als je consistentie en subtiliteit wilt. In de volgende demo, waarin blauw en zwart worden gemengd, produceren hsl en hwb overdreven levendige en in tint verschoven kleuren, terwijl srgb en oklab een donkerder blauw produceren.

Besteed 5 minuten aan de color-mix()-playground en test verschillende kleuren en ruimtes om een idee te krijgen van de voordelen van elke ruimte. We verwachten ook meer richtlijnen voor kleurruimten naarmate we ons allemaal aanpassen aan de mogelijkheden ervan in onze gebruikersinterfaces.

De interpolatiemethode voor de kleurtint aanpassen

Als je ervoor hebt gekozen om te mengen in een cilindrische kleurruimte, in wezen elke kleurruimte met een h-kleurkanaal dat een hoek accepteert, kun je aangeven of de interpolatie shorter, longer, decreasing en increasing gaat. In deze HD-kleurengids vind je meer informatie.

Hier is hetzelfde voorbeeld van een blauw-wit mengsel, maar deze keer alleen in de cilindrische ruimtes met verschillende interpolatiemethoden voor tinten.

Hier is nog een Codepen die ik heb gemaakt om kleurinterpolatie te visualiseren, maar dan specifiek voor kleurverlopen. Ik denk dat dit je helpt te begrijpen hoe elke kleurruimte het mengresultaat produceert als tintinterpolatie is gespecificeerd. Bestudeer het maar eens.

Mengen met verschillende kleursyntaxis

Tot nu toe hebben we voornamelijk CSS-kleuren met een naam gemengd, zoals blue en white. CSS-kleurmenging is klaar om kleuren uit 2 verschillende kleurruimten te mengen. Dit is nog een reden waarom het belangrijk is om de kleurruimte voor het mengen aan te geven, omdat deze de gemeenschappelijke ruimte instelt voor als de 2 kleuren zich niet in dezelfde ruimte bevinden.

color-mix(in oklch, hsl(200deg 50% 50%), color(display-p3 .5 0 .5));

In het vorige voorbeeld worden de hsl en display-p3 geconverteerd naar oklch en daarna gemengd. Behoorlijk cool en flexibel.

De mengverhoudingen aanpassen

Het is niet erg waarschijnlijk dat je elke keer dat je mengt gelijke delen van elke kleur wilt, zoals de meeste voorbeelden tot nu toe hebben getoond. Goed nieuws: er is een syntaxis om aan te geven hoeveel van elke kleur in de resulterende mix moet worden weergegeven.

Laten we beginnen met een voorbeeld van mixen die allemaal gelijkwaardig zijn (en uit de specificatie):

.ratios-syntax-examples {
  /* omit the percentage for equal mixes */
  color: color-mix(in lch, purple, plum);
  color: color-mix(in lch, plum, purple);

  /* percentage can go on either side of the color */
  color: color-mix(in lch, purple 50%, plum 50%);
  color: color-mix(in lch, 50% purple, 50% plum);

  /* percentage on just one color? other color gets the remainder */
  color: color-mix(in lch, purple 50%, plum);
  color: color-mix(in lch, purple, plum 50%);

  /* percentages > 100% are equally clamped */
  color: color-mix(in lch, purple 80%, plum 80%);
  /* above mix is clamped to this */
  color: color-mix(in lch, purple 50%, plum 50%);
}

Ik vind dat deze voorbeelden de randgevallen goed verduidelijken. De eerste reeks voorbeelden toont dat 50% niet vereist is, maar optioneel kan worden ingevoerd. Het laatste voorbeeld toont een interessant geval waarin de verhoudingen meer dan 100% zijn als ze bij elkaar worden opgeteld. Ze worden gelijkmatig beperkt tot in totaal 100%.

Als er maar één kleur een verhouding heeft, wordt ervan uitgegaan dat de andere kleur de rest tot 100% is. Hier zijn nog een paar voorbeelden om dit gedrag te illustreren.

color-mix(in lch, purple 40%, plum) /* plum assigned 60% */
color-mix(in lch, purple, 60% plum) /* purple assigned 40% */
color-mix(in lch, purple 40%, plum 60%) /* no auto assignments */

Deze voorbeelden illustreren 2 regels: 1. Als de verhoudingen hoger zijn dan 100%, worden ze beperkt en gelijkmatig verdeeld. 1. Als er maar één verhouding wordt ingevoerd, wordt de andere kleur ingesteld op 100 minus die verhouding.

De laatste regel is iets minder duidelijk: wat gebeurt er als er percentages worden ingevoerd voor beide kleuren en deze niet optellen tot 100%?

color-mix(in lch, purple 20%, plum 20%)

Deze combinatie van een color-mix() resulteert in transparantie, 40% transparantie. Als de verhoudingen niet optellen tot 100%, is de resulterende mix niet ondoorzichtig. Geen van de kleuren wordt volledig gemengd.

color-mix() nesten

Net als bij alle CSS wordt nesting goed en zoals verwacht afgehandeld. Interne functies worden eerst opgelost en retourneren hun waarden naar de bovenliggende context.

color-mix(in lch, purple 40%, color-mix(plum, white))

Je kunt zo veel nesten als je wilt om het gewenste resultaat te krijgen.

Een licht en donker kleurenschema maken

Laten we kleurenschema's maken met color-mix().

Een basiskleurenschema

In de volgende CSS worden een licht en donker thema gemaakt op basis van een hexadecimale merkkleur. Het lichte thema maakt 2 donkerblauwe tekstkleuren en een zeer lichte witte achtergrondkleur. In een mediaquery voor een donkere voorkeur krijgen de aangepaste eigenschappen nieuwe kleuren, zodat de achtergrond donker is en de tekstkleuren licht zijn.

:root {
  /* a base brand color */
  --brand: #0af;

  /* very dark brand blue */
  --text1: color-mix(in oklab, var(--brand) 25%, black);
  --text2: color-mix(in oklab, var(--brand) 40%, black);

  /* very bright brand white */
  --surface1: color-mix(in oklab, var(--brand) 5%, white);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text1: color-mix(in oklab, var(--brand) 15%, white);
    --text2: color-mix(in oklab, var(--brand) 40%, white);
    --surface1: color-mix(in oklab, var(--brand) 5%, black);
  }
}

Dit wordt allemaal bereikt door wit of zwart te mengen met een merkkleur.

Gemiddeld kleurenschema

Je kunt nog een stap verder gaan door meer dan alleen lichte en donkere thema's toe te voegen. In de volgende demo wordt een kenmerk van de HTML-tag [color-scheme="auto"] geüpdatet als de radiogroep wordt gewijzigd. Hierdoor kunnen kiezers een kleurenthema voorwaardelijk toepassen.

Deze demo voor gevorderden toont ook een techniek voor kleurenthema's waarbij alle themakleuren in :root staan. Zo kun je ze allemaal samen bekijken en aanpassen als dat nodig is. Later in de stylesheet kun je de variabelen gebruiken zoals ze zijn gedefinieerd. Zo hoef je niet in de stylesheet te zoeken naar kleuraanpassingen, omdat ze allemaal in het eerste :root-blok staan.

Interessantere use cases

Ana Tudor heeft een geweldige demo met een paar use cases om te bestuderen:

color-mix() debuggen met DevTools

Chrome DevTools biedt uitstekende ondersteuning voor color-mix(). Het herkent en markeert de syntaxis, maakt een voorbeeld van de mix naast de stijl in het deelvenster Stijlen en maakt het mogelijk om alternatieve kleuren te kiezen.

In DevTools ziet het er ongeveer zo uit:

Veel plezier met mixen!