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

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

color-mix() lader browseren tage den farveregning, du før lavede i en præprocessor eller på øjemål. Vælg det rette farverum, og én brandfarve kan give en hel palet af lysere, mørkere og gennemsigtige udgaver.

## The short version

- CSS-funktionen color-mix blander to farver i et navngivet farverum, for eksempel color-mix(in oklab, #7c3aed 40%, white).
- Giver du kun én procent, får den anden farve resten. Uden nogen er blandingen halvt og halvt.
- At blande i oklab holder lysheden jævn og undgår de grå midter, som sRGB-blanding giver mellem fjerne farvetoner.
- At blande en farve med transparent er den renseste måde at lave en gennemsigtig udgave af en farve, der er gemt i en custom property.
- color-mix() virker i alle nuværende store browsere, så den er sikker i produktion med en almindelig farve som reserve til meget gamle.

**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

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

Farverummet kommer først og skrives ud. Farverum baseret på farvetone som oklch og hsl tager også en retning for farvetonen: shorter, longer, increasing eller decreasing.

| Du skriver | Browseren bruger | Noter |
| --- | --- | --- |
| Ingen procenter | 50% og 50% | En jævn blanding |
| Én procent, for eksempel 30% | 30% og 70% | Den anden farve får resten |
| To, der giver 100% | Som skrevet | Den klareste form at læse senere |
| To, der giver mere end 100% | Skaleret ned til 100% | 60% og 60% opfører sig som 50% og 50% |
| To, der giver mindre end 100% | Skaleret op, så gjort gennemsigtig | 20% og 30% giver et resultat med halv opacitet |

Sådan opløses procenter. Den sidste række overrasker folk: en sum under 100 gør resultatet delvist gennemsigtigt.

## 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](https://gradiently.design/da/guide/gradient-interpolation) forklarer det samme valg for gradienter, og effekten er lettest at se dér.

- sRGB: fladt gråt i midten: `linear-gradient(to right, #0000ff, #ffff00)`
- oklab: lysere, renere midte: `linear-gradient(in oklab to right, #0000ff, #ffff00)`
- oklch: rejser gennem cyan og grøn: `linear-gradient(in oklch to right, #0000ff, #ffff00)`

Blå til gul i tre rum. Midtpunktet i hver stribe er præcis det, `color-mix()` returnerer ved 50 procent i det rum: `#808080` i sRGB, en lys blågrå i oklab.

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

```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 syv trin fra én farve. Byt `--brand` ud med en hvilken som helst hex, og skalaen følger med.

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

Hvad skalaen ovenfor opløses til for `#7c3aed`, beregnet i oklab. Blandet i sRGB bliver de lyse nuancer lidt grålige, og de mørke lidt fladere.

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

```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 badge og en hover-tilstand fra den samme variabel. Ingen anden farve at vedligeholde.

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

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

Reserve først, forbedring bagefter. Kaskaden klarer resten.

Et helt tema bygget på disse mønstre, med lyse og mørke tilstande, står i [CSS-variabler til temaer](https://gradiently.design/da/guide/css-custom-properties-theming).

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

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.

## FAQ

### Hvad gør color-mix() i CSS?

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

### Hvilket farverum skal jeg bruge med color-mix()?

Brug oklab til lysere og mørkere nuancer og det meste blanding, oklch når du vil have farvetonen til at rejse, og srgb til blanding med transparent.

### Hvordan gør jeg en farve gennemsigtig med color-mix()?

Bland den med `transparent`: `color-mix(in srgb, var(--brand) 20%, transparent)` giver brandfarven ved 20 procent opacitet.

### Understøttes color-mix() i alle browsere?

Den virker i nuværende versioner af Chrome, Edge, Firefox og Safari. Erklær først en almindelig farve som reserve til ældre browsere.

### Hvad sker der, hvis procenterne ikke giver 100?

Summer over 100 skaleres ned. Summer under 100 skaleres op, og resultatet bliver delvist gennemsigtigt.