HSL ist die angenehme Art, eine Farbe auszuwählen, RGB ist das, was Bildschirme, Canvas-APIs und Bildcode tatsächlich verarbeiten. Dieser Konverter macht aus jedem Tripel aus Farbton, Sättigung und Helligkeit exakte Kanäle von 0 bis 255.
So funktioniert die Umrechnung von HSL in RGB
- Rechne S und L in Bruchteile um und berechne die Buntheit C = (1 − |2L − 1|) × S.
- Teile den Farbton durch 60, um seinen Abschnitt auf dem Farbkreis zu finden, und berechne den Zwischenwert X = C × (1 − |(H/60 mod 2) − 1|).
- Verteile C, X und 0 entsprechend diesem Abschnitt auf R, G und B.
- Addiere den Helligkeitsversatz L − C/2 zu allen drei Kanälen und multipliziere mit 255.
Beispiel zum Nachrechnen
Das Ergebnis ist bis auf die abschließende Rundung auf ganze Kanäle exakt. Kommawerte bei Farbton oder Sättigung sind erlaubt und landen einfach auf dem nächstgelegenen RGB-Tripel.
HSL und RGB erklärt
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
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()
Referenztabelle HSL zu RGB
Die gängigsten CSS-Farben, umgerechnet von HSL nach RGB.
| Farbe | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |