Start › Umwandeln & Codes › Farbcode-Konverter
Farbcode-Konverter: HEX, RGB und HSL
Wählen Sie eine Farbe mit dem Farbwähler oder tippen Sie einen Code in eines der Felder – HEX, RGB und HSL werden sofort synchron umgerechnet, die Vorschaufläche zeigt die Farbe live. Akzeptiert werden alle üblichen Schreibweisen: #f80, #ff8800, rgb(255, 136, 0) oder hsl(32, 100%, 50%).
Die drei Notationen beschreiben dieselbe Farbe auf verschiedene Weise: HEX ist die kompakte Schreibweise für CSS und Design-Tools, RGB nennt die Anteile von Rot, Grün und Blau (je 0–255), HSL beschreibt Farbton, Sättigung und Helligkeit – die intuitivste Form, um eine Farbe gezielt heller, blasser oder wärmer zu machen.
Gut zu wissen
- HEX ist nur RGB in Hexadezimal: #ff8800 heißt Rot 255, Grün 136, Blau 0. Die Kurzform #f80 verdoppelt jede Stelle.
- Farbvarianten baut man am besten in HSL: Helligkeit (L) ändern für hellere/dunklere Töne derselben Farbe, Sättigung (S) senken für gedecktere Töne – in RGB müsste man dafür alle drei Kanäle gleichzeitig anpassen.
- Grautöne erkennt man sofort: In RGB sind alle drei Werte gleich, in HSL ist die Sättigung 0 %.
- Für Barrierefreiheit zählt der Kontrast zwischen Text- und Hintergrundfarbe: WCAG empfiehlt mindestens 4,5:1 für normalen Text – reine Farbcodes sagen darüber nichts aus, Kontrast immer separat prüfen.
Häufige Fragen
Was bedeuten die drei HSL-Werte?
H (Hue) ist der Farbton als Winkel auf dem Farbkreis: 0° Rot, 120° Grün, 240° Blau. S (Saturation) ist die Sättigung von 0 % (grau) bis 100 % (kräftig). L (Lightness) die Helligkeit von 0 % (schwarz) über 50 % (reine Farbe) bis 100 % (weiß).
Warum sieht dieselbe Farbe auf zwei Bildschirmen unterschiedlich aus?
Farbcodes definieren die Farbe im sRGB-Farbraum – wie ein Bildschirm sie darstellt, hängt von Panel, Kalibrierung und Umgebungslicht ab. Für verbindliche Markenfarben in Print braucht es zusätzlich Pantone- oder CMYK-Angaben.
Kann ich auch Farbnamen wie „tomato" umrechnen?
Der Konverter nimmt HEX-, RGB- und HSL-Codes an. CSS-Farbnamen lassen sich aber leicht nachschlagen und als HEX eintragen – „tomato" ist z. B. #ff6347.