3. semester / Tema 13C: Frontend Design

Farver i praksis: Relative Color Syntax

Praktisk brug af Relative Color Syntax til states, afledte tokens, alpha og farverelationer.

Se undervisningsslides

Relevante links

Relative Color Syntax i praksis

Relative Color Syntax (RCS) lader dig definere en farve i forhold til en anden farve ved at justere lyshed, chroma, hue eller alpha.

Syntaksen er:

color-function(
  from <base-farve>
  <kanal 1> <kanal 2> <kanal 3> / <alpha>
)

<color-function> henviser til farvefunktioner som bl.a. oklch(), hsl(), srgb(). <base-farve> er den base-farve, du vil aflede fra, og <kanal 1>, <kanal 2>, <kanal 3> er de kanaler, du vil justere (fx l for lyshed, c for chroma, h for hue). Alpha kan justeres separat i forhold til originalfarven.

.element {
  background:
    hsl(from var(--base-color) calc(l + 10%) s l / 0.5);
}

Her justeres lysheden med calc(l + 10%) og alpha sættes til 0.5, mens hue og saturation bevares.

RCS er oplagt til UI-states og små farvesystemer, hvor du vil bevare relationen til en base-farve.

Praktiske patterns fra øvelserne

Farverelationer

Følgende øvelse viser, hvordan man kan aflede komplementære og triadiske farver ved at rotere hue:

.complementary {
  background: hsl(from var(--origin) calc(h + 180) s l);
}
.triadic-1 {
  background: hsl(from var(--origin) calc(h + 120) s l);
}
.triadic-2 {
  background: hsl(from var(--origin) calc(h + 240) s l);
}

Alpha uden at ændre farven

Du kan let justere alpha uden at ændre farvens øvrige karakteristika:

.transformed {
  background: hsl(from var(--original-color) h s l / 0.5);
}

Her bevares hue, saturation og lightness, mens alpha sættes til 0.5 for at skabe en transparent version af originalfarven.

Hover/active ved at justere lyshed

Endnu et eksempel på, hvordan man kan justere lysheden uden at ændre på chroma og hue:

button:hover {
  background: oklch(from var(--color) calc(l + .05) c h);
}

Her øges lysheden med 5% på hover.

Det er ofte mere præcist end color-mix() til states, fordi du siger direkte, hvad der ændres.

Afledte farver og states (RCS vs color-mix)

Her kan du se en direkte sammenligning mellem color-mix() og RCS til at skabe hover/active states:

button {
  background: oklch(from var(--bg-btn) calc(var(--lightness, l)) c h);
}

button:hover { --lightness: l - .1; }
button:active { --lightness: l - .2; }

Afled et lille farvesystem fra én farve

Følgende er en god token-øvelse. Her afledes --surface, --border, --heading og --text fra én --color.

Det kunne ende i noget i stil med:

article {
  --surface: var(--color);
  --border: oklch(from var(--color) 80% c h);
  --heading: oklch(from var(--color) calc(l * 0.35) c h);
  --text: oklch(from var(--heading) calc(l + 0.1) c h);
}

Her afledes border ved at sætte lysheden til 80%, heading ved at sænke lysheden kraftigt (35% af originalen) og text ved at tage heading og gøre den 10% lysere.

Det er præcis den slags teknik, der gør CSS mere vedligeholdelsesvenlig:

færre hardcodede one-off farver
tydelig relation mellem tokens
nemmere at lave varianter pr. komponent

Hvornår giver Relative Color Syntax mening?

Brug Relative Color Syntax når du vil:

aflede state-farver fra en base-farve
bygge små farvesystemer
justere alpha uden at skifte farvetone
arbejde med hue-rotationer og farverelationer

Hvis du primært vil blande to farver i en andel, er color-mix() ofte enklere.

Praktiske anbefalinger

Start med en base-token og afled varianter derfra.
Justér én kanal ad gangen, når du kan (fx kun l).
Brug RCS til intention (“mørkere”, “mere transparent”, “roter hue”) frem for magiske tal uden forklaring.
Tjek kontrast efter afledning, især når du sænker lyshed eller chroma.