Hvordan angiver du farver i CSS?

Question

Accepted Answer

CSS tilbyder flere farveformater. De producerer de samme farver — valget handler om læsbarhed og om du har brug for gennemsigtighed.

```css
.a { color: red; }                      /* named keyword (~150 of them) */
.b { color: #ff5733; }                  /* hex: #RRGGBB */
.c { color: #ff5733cc; }                /* hex with alpha: #RRGGBBAA */
.d { color: rgb(255 87 51); }           /* red green blue (0–255) */
.e { color: rgb(255 87 51 / 0.8); }     /* with 80% opacity */
.f { color: hsl(9 100% 60%); }          /* hue saturation lightness */
.g { color: hsl(9 100% 60% / 0.5); }    /* HSL with alpha */
```

## Hvorfor HSL ofte er det mest brugbare

HSL beskriver farve som **H**ue (0–360° på farvehjulet), **S**aturation og **L**ightness — som svarer til hvordan mennesker tænker på farve, hvilket gør variationer intuitive:

```css
:root { --brand-h: 220; }
.primary       { background: hsl(var(--brand-h) 80% 50%); }
.primary-light { background: hsl(var(--brand-h) 80% 70%); } /* just raise lightness */
.primary-dark  { background: hsl(var(--brand-h) 80% 30%); } /* just lower it */
```

At generere en lysere/mørkere nuance er trivielt — ændrer et tal. At gøre det med hex eller rgb kræver genberegning af alle kanaler.

## Alpha / gennemsigtighed

```css
background: rgb(0 0 0 / 0.5); /* 50% transparent black — for overlays */
```

Syntaksen `/ alpha` (0 = transparent, 1 = uigennemsigtig) er hvordan du laver semi-transparente farver, nyttige til overlays og skygger. (Bemærk: `opacity` på et element toner *hele* elementet ud, inklusiv børn — alpha farver toner kun den farve ud.)

## Moderne formater

```css
color: oklch(70% 0.15 220); /* perceptually-uniform; better for color systems */
```

## Hvorfor det er vigtig

At kende formaterne lader dig vælge det rigtige værktøj: hex/rgb til engangsfarver, **HSL/OKLCH til designsystemer** (let, intuitiv nuancevariationer), og syntaksen `/ alpha` til gennemsigtighed.

HSL gør det især meget nemmere at bygge konsistente, tematisérbare farvepaneler.