Jeder Frontend-Entwickler jongliert mit Farbformaten: das Design liefert HEX, CSS will eine Anpassung in HSL, und Code braucht RGB. Alle beschreiben dieselben Farben — hier, was jedes bedeutet und wann man es nutzt.
HEX
HEX ist die vertraute #RRGGBB-Web-Notation, bei der jedes Paar einen Rot-/Grün-/Blau-Kanal in Hexadezimal (00–FF) angibt. #2563eb ist ideal, um eine feste Markenfarbe einzufügen. Die Kurzform #RGB (z. B. #f00) verdoppelt jede Ziffer (#ff0000). Kompakt, aber nicht intuitiv von Hand anzupassen.
RGB
RGB drückt dieselben Kanäle als Dezimalzahlen 0–255 aus: rgb(37, 99, 235). Es entspricht direkt der Lichtabgabe von Bildschirmen und ist praktisch in Code, der Kanäle manipuliert. Wie bei HEX bedeutet „etwas heller” aber, drei Zahlen ohne offensichtlichen Zusammenhang zu ändern.
HSL
HSL beschreibt Farbe als Farbton (Hue, 0–360° auf dem Farbkreis), Sättigung (0–100%) und Helligkeit (Lightness, 0–100%): hsl(217, 83%, 53%). Das ist die Form, die Designer zum Anpassen einer Farbe lieben:
- Heller? L erhöhen.
- Gedämpfter? S senken.
- Eine verwandte Farbe? H verschieben.
Diese Intuitivität macht HSL ideal für Farbskalen und helle/dunkle Varianten eines Farbtons. Wandle jede Farbe mit einem Farb-Konverter in HSL um und experimentiere.
Alpha: RGBA und HSLA
Für Transparenz hängst du einen Alphakanal (0–1) an: rgba(37, 99, 235, 0.5) oder hsla(217, 83%, 53%, 0.5). Modernes CSS erlaubt auch Alpha in HEX (#2563eb80) und die durch Leerzeichen getrennte Syntax rgb(37 99 235 / 50%).
Was solltest du nutzen?
- Feste Markenfarben, Copy-Paste aus dem Design: HEX.
- Kanäle im Code manipulieren: RGB.
- Skalen entwerfen, Helligkeit/Sättigung anpassen, Theming: HSL.
Sie sind austauschbar — nimm das, was die aktuelle Aufgabe am einfachsten macht, und wandle bei Bedarf um.
Schneller Tipp für Design-Systeme
Definiere deine Palette in HSL und leite Abstufungen ab, indem du nur L (und manchmal S) änderst. So erhältst du harmonische, vorhersehbare helle/dunkle Varianten viel leichter, als HEX-Werte per Versuch und Irrtum zu justieren.
Wandle sofort zwischen HEX, RGB und HSL um — mit Live-Vorschau — mit dem kostenlosen Farb-Konverter, der komplett im Browser läuft.