color-mix() i CSS: blanda färger i webbläsaren

CSS-funktionen color-mix, color-mix(), blandar två färger i ett färgrum du väljer och returnerar en ny färg. Skriv color-mix(in oklab, #7c3aed 40%, white) och du får en blek violett som är 40 procent violett och 60 procent vit, blandad perceptuellt. Den fungerar i alla aktuella större webbläsare. Tillsammans med anpassade egenskaper gör den en varumärkesfärg till toner, nyanser, hovringslägen och genomskinliga överlägg utan en enda hårdkodad hex.

Syntaxen för 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); }

Vilket färgrum du ska blanda i

Färgrummet avgör vägen mellan de två färgerna. I sRGB medelvärdesbildar webbläsaren röda, gröna och blå tal, vilket är snabbt att resonera om men inte hur ögon ser. Två avlägsna nyanser passerar ett trist grått på vägen. I oklab följer blandningen upplevd ljushet och färg, så mitten förblir ren och stegen ser jämna ut. Gradientinterpolation förklarar samma val för gradienter, och effekten syns lättast där.

• oklab för toner, nyanser och det mesta vardagliga blandandet. Jämn ljushet, inget grått dyk.
• oklch när du vill att nyansen ska färdas, till exempel för att blanda två varumärkesfärger till en tredje som ligger mellan dem på hjulet.
• srgb för att blanda med transparent eller matcha äldre designverktyg som blandar i sRGB.
• srgb-linear för fysikaliskt baserad ljusblandning, som ser ljusare ut i mitten.

För bakgrunden till varför perceptuella rum beter sig bättre, se OKLCH förklarat. Nyare versioner av specifikationen låter dig utelämna färgrummet och falla tillbaka på oklab, men stödet för den genvägen är nyare, så skriv in oklab uttryckligen.

Toner och nyanser från en varumärkesfärg

Det mest användbara mönstret är en skala byggd av en enda variabel. Blanda mot vitt för ljusare toner, mot svart för mörkare nyanser. Ändra variabeln så uppdateras varje steg, vilket är idealiskt för produkter med flera varumärken eller teman som användaren väljer.

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

Att blanda med rent vitt och svart är en startpunkt. För varmare toner, blanda mot ett benvitt som #fdf6ec; för rikare nyanser, blanda mot en djup marinblå i stället för svart. Det håller skalan i känslan av ditt varumärke snarare än en generisk ramp. Toner, nyanser och skuggningar tar upp färgteorin.

Genomskinlighet med color-mix()

Före color-mix() betydde en genomskinlig version av en färg lagrad i en variabel att man lagrade kanalerna separat. Nu blandar du med transparent. Mängden du behåller är 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%);
}

Vanliga misstag med color-mix()

• Att utelämna färgrummet i kod som måste köras i äldre webbläsare. Hela deklarationen släpps, inte bara rummet.
• Att blanda med svart för varje nyans. Nyanser av mättade färger blir matta; blanda i stället mot en djup version av nyansen.
• Att vänta sig att procentvärden under 100 förblir ogenomskinliga. color-mix(in oklab, red 20%, blue 30%) är halvt genomskinlig.
• Att använda hsl för toner. Ljusheten i hsl är inte perceptuell, så ett gult och ett blått i samma blandning ser inte alls ut som samma steg.

Webbläsarstöd och reserver

color-mix() har funnits i Chrome, Edge, Firefox och Safari sedan 2023, och aktuellt stöd listas på caniuse. Om du behöver täcka mycket gamla webbläsare, deklarera en vanlig färg först och låt den blandade åsidosätta den. Webbläsare som inte förstår den andra raden ignorerar den.

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

Ett helt tema byggt på de här mönstren, med ljust och mörkt läge, finns i CSS-variabler för teman.

Att blanda färger för gradienter

color-mix() är praktisk inuti gradienter, där den kan beräkna ett mittstopp av två varumärkesfärger så att blandningen aldrig passerar lera. linear-gradient(135deg, var(--a), color-mix(in oklch, var(--a), var(--b)), var(--b)) ger dig ett tredje stopp på nyansvägen mellan de två. Det underliggande problemet tas upp i leriga gradienter.

Om din varumärkesfärg bor i en Gradiently-Mark rymmer Markens recept redan en familj av besläktade färger valda för att fungera tillsammans, och Marknaden låter dig söka på färgord som ”djup violett” för att hitta en byggd kring den nyans du utgår från.