RGB sagt dem Bildschirm, wie viel Licht er abgeben soll; HSL sagt dir, wie die Farbe tatsächlich aussieht. Die Umrechnung der drei Kanäle in Farbton, Sättigung und Helligkeit macht eine Farbe von Hand anpassbar.
So funktioniert die Umrechnung von RGB in HSL
- Teile R, G und B durch 255, sodass jeder Wert zwischen 0 und 1 liegt.
- Nimm Maximum und Minimum der drei Werte — ihr Mittelwert ist die Helligkeit L.
- Sind Maximum und Minimum gleich, ist die Farbe grau: Farbton und Sättigung sind beide 0.
- Andernfalls ergibt sich S aus dem Abstand zwischen Maximum und Minimum, und H aus dem Kanal, der das Maximum stellt.
Beispiel zum Nachrechnen
Im Prinzip exakt. Da H, S und L meist als ganze Zahlen angezeigt werden, kann das Zurückrechnen einen Kanal um ein bis zwei Schritte verschieben.
RGB und HSL erklärt
Was ist RGB?
RGB beschreibt eine Farbe über drei Lichtkanäle — Rot, Grün und Blau — mit Werten von 0 bis 255. Das entspricht der Funktionsweise eines Bildschirms: alle drei auf 255 ergeben Weiß, alle auf 0 ergeben Schwarz. RGB ist die richtige Wahl, wenn du mit einer Farbe rechnen musst, und rgba() ergänzt zusätzlich Transparenz.
- Syntax:
- rgb(R, G, B)
- Wertebereich:
- 0–255 pro Kanal
- Ideal für:
- Code, Canvas, Transparenz mit rgba()
Was ist HSL?
HSL zerlegt eine Farbe in Farbton (0–360° auf dem Farbkreis), Sättigung (wie farbig, 0–100%) und Helligkeit (wie hell, 0–100%). Weil jeder Teil dem entspricht, wie Menschen über Farbe sprechen, ist HSL das einfachste Format für Abstufungen und konsistente Paletten — von Hand oder im Code.
- Syntax:
- hsl(H, S%, L%)
- Wertebereich:
- 0–360°, 0–100%, 0–100%
- Ideal für:
- Paletten, Farbabstufungen, Theming
Referenztabelle RGB zu HSL
Die gängigsten CSS-Farben, umgerechnet von RGB nach HSL.
| Farbe | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |