Wie geben Sie Farben in CSS an?

Question

Accepted Answer

CSS bietet mehrere Farbformate. Sie erzeugen die gleichen Farben — die Wahl hat mit Lesbarkeit und damit zu tun, ob Sie Transparenz benötigen.

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

## Warum HSL oft das nützlichste ist

HSL beschreibt Farbe als **H**ue (0–360° im Farbrad), **S**aturation und **L**ightness — was darauf abgestimmt ist, wie Menschen Farben wahrnehmen, und Variationen intuitiv macht:

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

Einen helleren/dunkleren Farbton zu erzeugen ist trivial — ändern Sie eine Zahl. Das mit hex oder rgb zu tun, erfordert die Neuberechnung aller Kanäle.

## Alpha / Transparenz

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

Die Syntax `/ alpha` (0 = transparent, 1 = undurchsichtig) ist die Art, halbdurchsichtige Farben zu erstellen, nützlich für Overlays und Schatten. (Hinweis: `opacity` auf einem Element blendet das *ganze* Element aus, einschließlich Kindern — Alpha-Farben blenden nur diese Farbe aus.)

## Moderne Formate

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

## Warum es wichtig ist

Wenn Sie die Formate kennen, können Sie das richtige Werkzeug wählen: hex/rgb für einmalige Farben, **HSL/OKLCH für Designsysteme** (einfach, intuitive Farbtonvariationen), und die Syntax `/ alpha` für Transparenz.

HSL macht es besonders einfach, konsistente, designbare Farbpaletten zu erstellen.