Farbcode-Umrechner

Farbcodes umrechnen zwischen HEX, RGB und HSL – mit Vorschau und CSS-Zeile zum Kopieren. Kostenlos, ohne Anmeldung, direkt im Browser.

Farbe
Farbton: 217°
Sättigung: 91 %
Helligkeit: 60 %
  • HEX #3b82f6
  • RGB rgb(59, 130, 246)
  • HSL hsl(217, 91%, 60%)
  • CSS-Variable --farbe: #3b82f6;

HEX, RGB und HSL beschreiben dieselbe Farbe

HEX ist die kompakte Schreibweise für Webseiten: je zwei Stellen für Rot, Grün und Blau im Sechzehnersystem. RGB nennt dieselben drei Werte dezimal von 0 bis 255. HSL beschreibt die Farbe stattdessen über Farbton, Sättigung und Helligkeit – näher daran, wie Menschen Farben wahrnehmen.

Wann HSL die bessere Wahl ist

Willst du eine Farbe systematisch aufhellen oder abdunkeln, ist HSL deutlich praktischer. Du änderst nur die Helligkeit und behältst Farbton und Sättigung bei. In RGB müsstest du alle drei Kanäle gleichzeitig anpassen und triffst den Ton selten sauber. Deshalb bauen die meisten Design-Systeme ihre Farbabstufungen in HSL auf.

Kurzschreibweise mit drei Zeichen

#f00 ist die Kurzform von #ff0000: jede Stelle wird verdoppelt. Das funktioniert nur, wenn beide Stellen eines Kanals gleich sind, deckt also lediglich 4.096 der gut 16 Millionen Farben ab. Der Umrechner oben versteht beide Schreibweisen.

Passt dazu