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

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

color-mix() lar nettleseren gjøre fargeregningen du før gjorde i en preprosessor eller på øyemål. Velg riktig fargerom, så kan én merkevarefarge gi en hel palett av lyse, mørke og gjennomskinnelige varianter.

## The short version

- color-mix i CSS blander to farger i et navngitt fargerom, for eksempel color-mix(in oklab, #7c3aed 40%, white).
- Oppgir du bare én prosentandel, får den andre fargen resten. Uten prosentandeler blir blandingen halvparten av hver.
- Blanding i oklab holder lysheten jevn og unngår den grå midten sRGB-blandinger gir mellom fjerne fargetoner.
- Å blande en farge med transparent er den ryddigste måten å lage en gjennomskinnelig versjon av en farge lagret i en egendefinert egenskap på.
- color-mix() virker i alle nåværende store nettlesere og er trygt i produksjon med en vanlig farge som reserve for svært gamle versjoner.

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

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

Fargerommet står først og skrives eksplisitt. Fargetonebaserte rom som oklch og hsl tar også en retning: shorter, longer, increasing eller decreasing.

| Du skriver | Nettleseren bruker | Merknader |
| --- | --- | --- |
| Ingen prosentandeler | 50% og 50% | En jevn blanding |
| Én prosentandel, for eksempel 30% | 30% og 70% | Den andre fargen får resten |
| To som blir 100% til sammen | Som skrevet | Tydeligst å lese senere |
| To som blir mer enn 100% til sammen | Skalert ned til 100% | 60% og 60% virker som 50% og 50% |
| To som blir mindre enn 100% til sammen | Skalert opp, deretter gjort gjennomskinnelig | 20% og 30% gir halv opasitet |

Slik tolkes prosentandeler. Siste rad overrasker mange: en sum under 100 gjør resultatet delvis gjennomsiktig.

## 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](https://gradiently.design/nb/guide/gradient-interpolation) forklarer samme valg for gradienter, der effekten er lettest å se.

- sRGB: flat grå midte: `linear-gradient(to right, #0000ff, #ffff00)`
- oklab: lysere, renere midte: `linear-gradient(in oklab to right, #0000ff, #ffff00)`
- oklch: gjennom cyan og grønt: `linear-gradient(in oklch to right, #0000ff, #ffff00)`

Blått til gult i tre fargerom. Midten av hver stripe er akkurat det `color-mix()` returnerer ved 50 prosent i det rommet: `#808080` i sRGB, en lys blågrå i oklab.

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

```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 med sju trinn fra én farge. Bytt `--brand` til en hvilken som helst hex-verdi, så følger skalaen.

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

Det skalaen over blir for `#7c3aed`, beregnet i oklab. Blandet i sRGB blir de lyse nyansene litt gråere og de mørke litt flatere.

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

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

Et tonet merke og en pekertilstand fra samme variabel. Ingen ekstra farge å vedlikeholde.

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

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

Reserve først, forbedring deretter. Kaskaden gjør resten.

Et helt tema bygget på disse mønstrene, med lys og mørk modus, finnes i [CSS-variabler til temaer](https://gradiently.design/nb/guide/css-custom-properties-theming).

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

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.

## FAQ

### Hva gjør color-mix() i CSS?

Den blander to farger i et fargerom du navngir og returnerer resultatet, for eksempel `color-mix(in oklab, red 30%, white)`.

### Hvilket fargerom bør jeg bruke med color-mix()?

Bruk oklab til lyse og mørke nyanser og de fleste blandinger, oklch når fargetonen skal bevege seg, og srgb til blanding med transparent.

### Hvordan gjør jeg en farge gjennomsiktig med color-mix()?

Bland den med `transparent`: `color-mix(in srgb, var(--brand) 20%, transparent)` gir merkevarefargen med 20 prosent opasitet.

### Støttes color-mix() i alle nettlesere?

Den virker i nåværende versjoner av Chrome, Edge, Firefox og Safari. Deklarer en vanlig farge først som reserve for eldre nettlesere.

### Hva skjer hvis prosentandelene ikke blir 100 til sammen?

Summer over 100 skaleres ned. Summer under 100 skaleres opp, og resultatet blir delvis gjennomsiktig.