color-mix() i CSS: bland farver i browseren

CSS-funktionen color-mix, color-mix(), blander to farver i et farverum, du vælger, og returnerer en ny farve. Skriv color-mix(in oklab, #7c3aed 40%, white), og du får en lys violet, der er 40 procent violet og 60 procent hvid, blandet perceptuelt. Den virker i alle nuværende store browsere. Sammen med custom properties gør den én brandfarve til lysere og mørkere nuancer, hover-tilstande og gennemsigtige overlays uden en eneste hårdkodet hex.

color-mix()-syntaks

/* 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 farverum du skal blande i

Farverummet bestemmer vejen mellem de to farver. I sRGB tager browseren gennemsnittet af rød-, grøn- og blåtal, hvilket er hurtigt at ræsonnere om, men ikke sådan, øjne ser. To fjerne farvetoner passerer gennem et kedeligt gråt på vejen. I oklab følger blandingen den opfattede lyshed og farve, så midten forbliver ren, og trinnene ser jævne ud. Gradientinterpolation forklarer det samme valg for gradienter, og effekten er lettest at se dér.

• oklab til lysere og mørkere nuancer og det meste dagligdags blanding. Jævn lyshed, intet gråt dyk.
• oklch, når du vil have farvetonen til at rejse, for eksempel at blande to brandfarver til en tredje, der ligger mellem dem på hjulet.
• srgb til blanding med transparent eller til at matche ældre designværktøjer, der blander i sRGB.
• srgb-linear til fysisk baseret lysblanding, som læses lysere i midten.

For baggrunden for, hvorfor perceptuelle rum opfører sig bedre, se OKLCH forklaret. Nyere versioner af specifikationen lader dig udelade farverummet og falde tilbage på oklab, men understøttelsen af den genvej er nyere, så skriv in oklab eksplicit.

Lysere og mørkere nuancer fra én brandfarve

Det mest nyttige mønster er en skala bygget af én enkelt variabel. Bland mod hvid for lysere nuancer, mod sort for mørkere. Ret variablen, og hvert trin opdateres, hvilket er ideelt til produkter med flere brands eller temaer, brugeren selv vælger.

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

At blande med ren hvid og sort er et udgangspunkt. Til varmere lyse nuancer kan du blande mod en råhvid som #fdf6ec. Til rigere mørke nuancer kan du blande mod en dyb marineblå i stedet for sort. Så føles skalaen som dit brand frem for en generisk rampe. Toner, nuancer og skygger dækker farveteorien.

Gennemsigtighed med color-mix()

Før color-mix() betød en gennemsigtig udgave af en farve, der var gemt i en variabel, at man gemte kanalerne hver for sig. Nu blander du med transparent. Den mængde, du beholder, er opaciteten.

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

Almindelige color-mix()-fejl

• At udelade farverummet i kode, der skal køre i ældre browsere. Hele deklarationen droppes, ikke kun rummet.
• At blande med sort til hver mørk nuance. Mørke nuancer af mættede farver bliver kedelige. Bland i stedet mod en dyb udgave af farvetonen.
• At forvente, at procenter under 100 forbliver uigennemsigtige. color-mix(in oklab, red 20%, blue 30%) er halvt gennemsigtig.
• At bruge hsl til lysere nuancer. Lyshed i hsl er ikke perceptuel, så en gul og en blå ved samme blanding ligner slet ikke det samme trin.

Browserunderstøttelse og reserver

color-mix() har været tilgængelig i Chrome, Edge, Firefox og Safari siden 2023, og den nuværende understøttelse står på caniuse. Skal du dække meget gamle browsere, så erklær først en almindelig farve og lad den blandede overskrive den. Browsere, der ikke forstår den anden linje, ignorerer den.

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

Et helt tema bygget på disse mønstre, med lyse og mørke tilstande, står i CSS-variabler til temaer.

At blande farver til gradienter

color-mix() er praktisk inde i gradienter, hvor den kan beregne et midterste stop ud fra to brandfarver, så blandingen aldrig passerer gennem mudder. linear-gradient(135deg, var(--a), color-mix(in oklch, var(--a), var(--b)), var(--b)) giver dig et tredje stop på farvetonens vej mellem de to. Det underliggende problem er dækket i mudrede gradienter.

Bor din brandfarve i en Gradiently Mark, rummer Markens opskrift allerede en familie af beslægtede farver, valgt til at virke sammen, og Markedet lader dig søge på farveord som »dyb violet« for at finde en bygget om den farvetone, du starter fra.