HEX, RGB und HSL – was sie bedeuten
Alle drei beschreiben dieselben Farben, nur in unterschiedlicher Schreibweise:
- HEX – ein sechsstelliger Hexadezimal-Code wie
#3b5bdb, wobei jedes Paar für Rot, Grün und Blau steht. Kompakt und überall in CSS und Design-Tools. - RGB – dieselben Rot/Grün/Blau-Kanäle als drei Zahlen von 0 bis 255, z. B.
rgb(59, 91, 219). Im Code leicht nachvollziehbar. - HSL – Farbton (0–360°), Sättigung (%) und Helligkeit (%), z. B.
hsl(228, 69%, 55%). Am intuitivsten, wenn du eine Farbe heller, dunkler oder weniger gesättigt machen willst.
Weil HSL „welche Farbe" (Farbton) von „wie hell" (Helligkeit) trennt, eignet es sich super für Tönungen und Abstufungen. Hast du einen Wert, prüfe mit dem Farbkontrast-Checker, ob er auf deinem Hintergrund lesbar ist – oder baue dort gleich ein ganzes Farbschema.
So funktioniert es
- Wähle eine Farbe über das Feld oder gib einen Wert in HEX, RGB oder HSL ein.
- Die beiden anderen Formate und die Vorschau aktualisieren sich sofort.
- Klicke auf Kopieren neben dem gewünschten Format.
Alles wird lokal im Browser berechnet – es werden keine Farbdaten hochgeladen.
FAQ
HEX vs. RGB vs. HSL?
HEX und RGB sind zwei Schreibweisen für dieselben Rot/Grün/Blau-Werte. HSL nutzt stattdessen Farbton, Sättigung und Helligkeit, was das Anpassen einer Farbe erleichtert.
Kann ich Kurz-Hex wie #abc eingeben?
Ja. Dreistellige Hex-Codes werden automatisch erweitert (#abc → #aabbcc).
Sind meine Farbdaten privat?
Ja – die gesamte Umrechnung passiert im Browser. Es wird nichts an einen Server gesendet.