color-mix() i CSS: bland farger i nettleseren

Funksjonen color-mix i CSS, color-mix(), blander to farger i et fargerom du velger og returnerer en ny farge. Skriv color-mix(in oklab, #7c3aed 40%, white), så får du en lys fiolett som er 40 prosent fiolett og 60 prosent hvit, blandet ut fra synsinntrykket. Den virker i alle nåværende store nettlesere. Sammen med egendefinerte egenskaper gjør den én merkevarefarge til lyse og mørke nyanser, pekertilstander og gjennomskinnelige overlegg uten en eneste hardkodet hex-verdi.

Syntaks for color-mix()

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

Hvilket fargerom du bør blande i

Fargerommet bestemmer veien mellom de to fargene. I sRGB tar nettleseren gjennomsnittet av tallene for rødt, grønt og blått. Det er enkelt å forstå, men samsvarer ikke med synet. To fjerne fargetoner går gjennom matt grått på veien. I oklab følger blandingen opplevd lyshet og farge, så midten holder seg ren og trinnene virker jevne. Gradientinterpolasjon forklarer samme valg for gradienter, der effekten er lettest å se.

• oklab for lyse og mørke nyanser og de fleste vanlige blandinger. Jevn lyshet, ingen grå fordypning.
• oklch når du vil at fargetonen skal bevege seg, for eksempel for å blande to merkevarefarger til en tredje som ligger mellom dem i sirkelen.
• srgb for blanding med transparent eller samsvar med eldre designverktøy som blander i sRGB.
• srgb-linear for fysisk basert lysblanding, som virker lysere i midten.

Se OKLCH forklart for bakgrunnen til hvorfor perseptuelle fargerom fungerer bedre. Nyere versjoner av spesifikasjonen lar deg utelate fargerommet og bruke oklab som standard, men støtten for kortformen er nyere. Skriv derfor in oklab eksplisitt.

Lyse og mørke nyanser fra én merkevarefarge

Det nyttigste mønsteret er en skala bygget fra én variabel. Bland mot hvitt for lyse nyanser og mot svart for mørke. Endrer du variabelen, oppdateres hvert trinn. Det passer derfor godt til produkter med flere merkevarer eller temaer valgt av brukeren.

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

Blanding med rent hvitt og svart er et utgangspunkt. For varmere lyse nyanser blander du mot en brukket hvit som #fdf6ec. For fyldigere mørke nyanser blander du mot dyp marineblå fremfor svart. Da føles skalaen som merkevaren din fremfor en generisk overgang. Lyse, dempede og mørke nyanser dekker fargeteorien.

Gjennomsiktighet med color-mix()

Før color-mix() måtte kanalene lagres separat for å lage en gjennomskinnelig versjon av en farge i en variabel. Nå blander du med transparent. Andelen du beholder, er opasiteten.

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

Vanlige feil med color-mix()

• Å utelate fargerommet i kode som må fungere i eldre nettlesere. Hele deklarasjonen forkastes, ikke bare fargerommet.
• Å blande med svart for alle mørke nyanser. Mettede farger blir matte. Bland heller mot en dyp versjon av fargetonen.
• Å forvente at prosentandeler under 100 forblir ugjennomsiktige. color-mix(in oklab, red 20%, blue 30%) er halvt gjennomsiktig.
• Å bruke hsl til lyse nyanser. Lyshet i hsl er ikke perseptuell, så gult og blått med samme blanding ser ikke ut som samme trinn.

Nettleserstøtte og reserver

color-mix() har vært tilgjengelig i Chrome, Edge, Firefox og Safari siden 2023. Nåværende støtte finnes på caniuse. Hvis du må dekke svært gamle nettlesere, deklarerer du en vanlig farge først og lar blandingen overstyre. Nettlesere som ikke forstår den andre linjen, ignorerer den.

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

Et helt tema bygget på disse mønstrene, med lys og mørk modus, finnes i CSS-variabler til temaer.

Bland farger til gradienter

color-mix() er nyttig inni gradienter, der den kan beregne et midtstopp fra to merkevarefarger, så blandingen aldri blir grumsete. linear-gradient(135deg, var(--a), color-mix(in oklch, var(--a), var(--b)), var(--b)) gir et tredje stopp på fargetoneveien mellom de to. Grunnproblemet dekkes i grumsete gradienter.

Hvis merkevarefargen ligger i en Mark fra Gradiently, har oppskriften allerede en familie av beslektede farger valgt for å fungere sammen. Markedet lar deg søke med fargeord som «dyp fiolett» for å finne en som bygger på fargetonen du starter med.