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

[Canonical HTML page](https://gradiently.design/sv/guide/css-color-mix)

color-mix() låter webbläsaren göra färgmatematiken du förr gjorde i en preprocessor eller på känn. Välj rätt färgrum så kan en varumärkesfärg ge en hel palett av toner, nyanser och genomskinliga versioner.

## The short version

- CSS-funktionen color-mix blandar två färger i ett namngivet färgrum, till exempel color-mix(in oklab, #7c3aed 40%, white).
- Om du bara anger ett procentvärde får den andra färgen resten; utan något blir blandningen hälften av varje.
- Att blanda i oklab håller ljusheten jämn och undviker de grå mitterna som sRGB-blandning ger mellan avlägsna nyanser.
- Att blanda en färg med transparent är det renaste sättet att göra en genomskinlig version av en färg som lagrats i en anpassad egenskap.
- color-mix() fungerar i alla aktuella större webbläsare, så den är säker i produktion med en vanlig färg som reserv för mycket gamla.

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()

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

Färgrummet kommer först och skrivs ut. Nyansbaserade rum som oklch och hsl accepterar också en nyansriktning: shorter, longer, increasing eller decreasing.

| Du skriver | Webbläsaren använder | Anteckningar |
| --- | --- | --- |
| Inga procentvärden | 50 % och 50 % | En jämn blandning |
| Ett procentvärde, säg 30 % | 30 % och 70 % | Den andra färgen får resten |
| Två som summerar till 100 % | Som skrivet | Den tydligaste formen att läsa senare |
| Två som summerar till mer än 100 % | Skalas ned till 100 % | 60 % och 60 % beter sig som 50 % och 50 % |
| Två som summerar till mindre än 100 % | Skalas upp, och görs sedan genomskinlig | 20 % och 30 % ger ett resultat med halv opacitet |

Hur procentvärden löses. Sista raden förvånar folk: en summa under 100 gör resultatet delvis genomskinligt.

## 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](https://gradiently.design/sv/guide/gradient-interpolation) förklarar samma val för gradienter, och effekten syns lättast där.

- sRGB: platt grått i mitten: `linear-gradient(to right, #0000ff, #ffff00)`
- oklab: ljusare, renare mitt: `linear-gradient(in oklab to right, #0000ff, #ffff00)`
- oklch: färdas via cyan och grönt: `linear-gradient(in oklch to right, #0000ff, #ffff00)`

Blått till gult i tre rum. Mittpunkten på varje remsa är exakt det `color-mix()` returnerar vid 50 procent i det rummet: `#808080` i sRGB, ett ljust blågrått i oklab.

- **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](https://gradiently.design/sv/guide/oklch-explained). 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.

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

En skala i sju steg från en färg. Byt `--brand` mot vilken hex som helst så följer skalan.

- brand-100: #e1dbff
- brand-200: #c5b7fe
- brand-300: #aa92fa
- brand-400: #926bf4
- brand-500: #7c3aed
- brand-600: #5a28b0
- brand-700: #3b1877

Vad skalan ovan blir för `#7c3aed`, beräknad i oklab. Blandade i sRGB blir tonerna lite gråare och nyanserna lite plattare.

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](https://gradiently.design/sv/guide/tints-tones-shades) 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.

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

En tonad etikett och ett hovringsläge från samma variabel. Ingen andra färg att underhålla.

## 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](https://caniuse.com/mdn-css_types_color_color-mix). 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.

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

Reserven först, förbättringen sedan. Kaskaden gör resten.

Ett helt tema byggt på de här mönstren, med ljust och mörkt läge, finns i [CSS-variabler för teman](https://gradiently.design/sv/guide/css-custom-properties-theming).

## 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](https://gradiently.design/sv/guide/muddy-gradients).

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.

## FAQ

### Vad gör color-mix() i CSS?

Den blandar två färger i ett färgrum du anger och returnerar resultatet, till exempel `color-mix(in oklab, red 30%, white)`.

### Vilket färgrum ska jag använda med color-mix()?

Använd oklab för toner, nyanser och det mesta blandandet, oklch när du vill att nyansen ska färdas, och srgb för att blanda med transparent.

### Hur gör jag en färg genomskinlig med color-mix()?

Blanda den med `transparent`: `color-mix(in srgb, var(--brand) 20%, transparent)` ger varumärkesfärgen med 20 procents opacitet.

### Stöds color-mix() i alla webbläsare?

Den fungerar i aktuella versioner av Chrome, Edge, Firefox och Safari. Deklarera en vanlig färg först som reserv för äldre webbläsare.

### Vad händer om procentvärdena inte summerar till 100?

Summor över 100 skalas ned. Summor under 100 skalas upp och resultatet blir delvis genomskinligt.