Farver i praksis: color-mix()

Color-mix() i praksis

color-mix() blander to farver i et givet farverum i en kontrolleret andel.

Syntaksen er:

color-mix(
  in <farverum>,
  <farve-1> <andel i %>,
  <farve-2> <andel i %>
)

Farverum kan være oklab, oklch, hsl eller srbg. Det påvirker, hvordan farverne blandes og dermed det visuelle resultat. oklab giver ofte mere jævn visuel interpolation.

Eksempel:

.element {
  background: color-mix(
    in oklch,
    red 50%,
    lime 50%
  );
}

Andele i color-mix()

Du kan angive en procent for hver af de to farver.

Eksempler:

.element {
  background:
    color-mix(in oklch, red, lime 50%) /* → 50% red, 50% lime */
    color-mix(in oklch, red 25%, lime) /* → 25% red, 75% lime */
    color-mix(in oklch, red 25%, lime 25%) /* → 50% farve + 50% transparens */
    color-mix(in oklch, red 150%, lime 50%) /* → skaleret til 75% red, 25% lime */
}

Praktiske patterns

Visuel mapping fra værdi til farve.

I følgende eksempel bruges --percent direkte til at styre blandingen:

.bar {
  background: color-mix(in oklch, red, lime var(--percent));
}

Det er et godt mønster, fordi:

• koden er let at læse
• data og farve hænger direkte sammen
• du undgår lange if/else-farveskalaer

Interaktiv mapping med slider

Her styrer en slider --percent, og bredden og sætter farven ud fra samme værdi. Det er en god demonstration af, at color-mix() fungerer godt sammen med custom properties og interaktivitet.

color-mix(in oklch longer hue, red, lime var(--percent))

NOTE: longer hue tager den længste vej rundt i farvecirklen fra rød til lime, hvilket ofte giver en mere jævn visuel overgang.

States via mix

Her bruges color-mix() til at skabe hover og active varianter ved at blande farven med hhv. hvid og sort:

button {
  --bg-btn: color-mix(in oklab, blue, var(--mix-with, 0% #fff));
  background: var(--bg-btn);
}

button:hover { --mix-with: 10% #fff; }
button:active { --mix-with: 20% #000; }

• “mix med hvid for hover”
• “mix med sort for active”

Men den bliver hurtigt mindre præcis, hvis du specifikt vil styre fx kun lyshed/chroma, hvorfor du bør kigge nærmere på Relative Color Syntax, som er det næste emne.

Hvornår giver color-mix() mening?

Brug color-mix() når du vil:

• blande to konkrete farver
• mappe data til farve
• lave hurtige state-varianter uden at introducere mange tokens

Hvis du derimod vil aflede en variant af én farve ved at justere lyshed/chroma/hue mere præcist, er Relative Color Syntax ofte tydeligere.

Praktiske anbefalinger

1. Vælg bevidst farverum (oklab / oklch) i stedet for browser-default.
2. Brug custom properties til blandingsandel (--percent, --mix-with).
3. Brug color-mix() til blanding, ikke som erstatning for alle farvetokens.
4. Tjek kontrast, især når du mixer mod sort/hvid til states.