Farb-Rechner: HEX in RGB und HSL präzise umrechnen

Technik & Digital

Farbwerte zwischen HEX, RGB und HSL in jede Richtung umrechnen, Kurzformen normalisieren...

Quelle: Bidirektionale HEX-/RGB-/HSL-Umrechnung nach CSS-Farbmodell und Standardformeln, Stand Mai 2026.Stand: Juni 2026

Eingabe

Hier Werte eingeben und Optionen anpassen.

Überblick

Was ist der Farb-Konverter?

Starte mit der kurzen Einordnung, bevor du Eingaben und Ergebnis interpretierst.

Der Farb-Konverter ist für Frontend-Entwickler, Designer und QA gedacht, die einen konkreten HEX-Wert aus CSS, Figma oder einem Styleguide schnell in RGB- und HSL-Werte übersetzen müssen. Ein HEX-Wert wie #1E88E5 kodiert die drei Farbkanäle Rot, Grün und Blau jeweils als zweistellige Hexadezimalzahl zwischen 00 und FF, also 0 bis 255.

RGB beschreibt dieselbe Farbe als drei Zahlen, HSL dagegen über Farbton (H, in Grad von 0 bis 360), Sättigung (S in Prozent) und Helligkeit (L in Prozent).

Genau diese drei Darstellungen rechnet der Konverter ineinander um, sodass du Farbkanäle, Helligkeit und Sättigung ablesen und technische Übergaben prüfen kannst, ohne von Hand umzurechnen.

Der Vorteil von HSL liegt darin, dass du eine Markenfarbe gezielt heller oder dunkler machst, indem du nur den L-Wert veränderst und Farbton sowie Sättigung gleich lässt.

Damit eignet sich das Werkzeug für konsistente Design-Tokens, Hover- und Aktiv-Zustände sowie das Abstimmen von Farben zwischen Styleguide, CSS und Figma.

Eingaben

So nutzt du den Rechner

Hier siehst du, welche Werte erwartet werden und wie die Felder zusammenhängen.

Gib einen HEX-Farbwert ein, entweder dreistellig wie #1E8 oder sechsstellig wie #1E88E5. Solche Werte findest du typischerweise in CSS-Dateien, Design-Tokens, Figma oder Browser-DevTools; das führende # ist optional.

Die dreistellige Kurzform ist nur eine Abkürzung: Jede Stelle wird verdoppelt, aus #1E8 wird also intern #11EE88. Erlaubt sind ausschließlich die Hexadezimalziffern 0 bis 9 und A bis F, Groß- und Kleinschreibung spielt keine Rolle.

Nach der Eingabe zeigt der Rechner sofort die drei RGB-Kanäle als Werte von 0 bis 255 sowie die HSL-Darstellung mit Farbton, Sättigung und Helligkeit.

Typische Eingabefehler sind ungültige Zeichen außerhalb 0-9/A-F oder das Verwechseln von 3- und 6-stelligen Schreibweisen, was zu einer ganz anderen Farbe führt.

Berechnung

So funktioniert die Berechnung

Verstehe den Formelweg.

Der Rechner expandiert eine dreistellige Kurzform wie #1E8 zuerst zur sechsstelligen Form #11EE88 und liest danach die drei Farbkanäle Rot, Grün und Blau aus dem Hexwert aus. Jeder Kanal besteht aus zwei Hexadezimalziffern, die er nach der Formel Wert = erste Ziffer × 16 + zweite Ziffer in eine Dezimalzahl von 0 bis 255 umwandelt.

Beispiel: Aus #3366FF werden so R=51, G=102 und B=255.

Für die HSL-Darstellung normiert er R, G und B auf den Bereich 0 bis 1, bestimmt das Maximum und Minimum der drei Kanäle, leitet daraus die Helligkeit L als Mittelwert ab und berechnet Sättigung S und Farbton H aus der Spanne zwischen den Kanälen.

Für #3366FF ergibt das HSL mit H=225°, S=100 % und L=60 %. Weil Farbton und Sättigung dabei getrennt von der Helligkeit stehen, kannst du allein über den L-Wert hellere oder dunklere Varianten derselben Markenfarbe ableiten.

Nachschlagen

Farbtabelle: HEX, RGB und HSL der Grundfarben

Die wichtigsten Grundfarben mit ihren HEX-, RGB- und HSL-Werten – zum direkten Nachschlagen für CSS, Design und UI.

Grundfarben mit HEX-, RGB- und HSL-Werten
Farbe	HEX	RGB	HSL
Schwarz	#000000	0, 0, 0	0°, 0 %, 0 %
Weiß	#FFFFFF	255, 255, 255	0°, 0 %, 100 %
Grau	#808080	128, 128, 128	0°, 0 %, 50 %
Rot	#FF0000	255, 0, 0	0°, 100 %, 50 %
Orange	#FFA500	255, 165, 0	39°, 100 %, 50 %
Gelb	#FFFF00	255, 255, 0	60°, 100 %, 50 %
Grün	#00FF00	0, 255, 0	120°, 100 %, 50 %
Cyan	#00FFFF	0, 255, 255	180°, 100 %, 50 %
Blau	#0000FF	0, 0, 255	240°, 100 %, 50 %
Magenta	#FF00FF	255, 0, 255	300°, 100 %, 50 %

HEX kodiert je zwei Stellen für Rot, Grün und Blau (00–FF = 0–255). HSL beschreibt dieselbe Farbe über Farbton (0–360°), Sättigung und Helligkeit.

Hinweise

Wichtige Hinweise zur Nutzung

Schnelle Qualitätsprüfung für dein Ergebnis.

Wenn du #1E88E5 eingibst, zeigt das Ergebnis: R=30, G=136, B=229, HSL H=211°, S=78 %, L=51 %. Das bedeutet fachlich: Das ist ein kräftiges, mittelstarkes Blau – typisch für Primary-Brand-Farben im Web.

Als nächsten Schritt erhöhst du den L-Wert in HSL auf 70 %: Die Farbe wird zu einem hellen Akzentblau für Hover-States, ohne den Farbton zu verändern.

Genau das zeigt, warum HSL für Design-Varianten besser geeignet ist als direktes Tippen in RGB-Kanälen.

Als Praxisbeispiel: Markenfarbe #0053D6 – der Rechner gibt Rot (R)=0, Grün (G)=83, Blau (B)=214 und Farbwinkel (H)=218° aus, so erkennst du sofort, dass es sich um reines Markenblau ohne Violettanteil handelt.

Anwendung

Praxisbeispiel und Einordnung

So wird das Ergebnis in einer realen Entscheidung nutzbar.

Nina arbeitet als UX-Designerin und erhält vom Kunden eine Brandfarbe als #E53935. Sie gibt den Wert in den Farb-Konverter ein. Das Ergebnis: R=229, G=57, B=53, HSL H=1°, S=77 %, L=55 %.

Sie erkennt: Das ist ein kräftiges Rot mit leicht erhöhter Helligkeit. Für den Hover-State soll die Farbe dunkler werden – sie rechnet H=1°, S=77 %, L=40 % zurück und erhält #B71C1C. Für den deaktivierten Zustand wählt sie L=80 %: #F48B8A.

Mit diesen drei HEX-Werten übergibt sie die vollständige State-Palette ans Entwicklungsteam.

Fallstricke

Häufige Fehler und fachliche Einordnung

Typische Anfängerfehler. Sicherer anwenden.

Ein häufiger Fehler ist, einen HEX-Wert aus CSS, Figma oder einem Styleguide als universelle Farbe zu lesen, obwohl der Rechner bewusst nur innerhalb des Web-Farbraums nach RGB und HSL übersetzt. Ebenso oft werden 8-stellige Werte mit Alpha-Kanal, CSS-Funktionsnotationen oder uneinheitliche Kurzformen eingegeben, obwohl hier nur #RGB und #RRGGBB sauber verarbeitet werden.

Kritisch wird es auch, wenn aus identischen RGB-Zahlen automatisch dieselbe Wirkung auf Monitor, Beamer und Druck erwartet wird. Der Konverter erklärt Kanalwerte und Helligkeit, ersetzt aber kein Farbmanagement mit ICC-Profilen, CMYK-Abstimmung oder Gerätekalibrierung.

Nächster Schritt

Kurzfazit und nächster sinnvoller Schritt

Die Kernaussage für die direkte Weiterentscheidung.

Der Farb-Konverter übersetzt einen HEX-Wert sofort in seine drei RGB-Kanäle und in die HSL-Darstellung mit Farbton, Sättigung und Helligkeit.

Damit prüfst du Farbkanäle, vergleichst Markenfarben und übergibst Design-Tokens konsistent zwischen Styleguide, CSS und Figma.

Weil HSL Farbton und Sättigung getrennt von der Helligkeit führt, leitest du über den L-Wert gezielt hellere oder dunklere Varianten ab.

Als nächsten Schritt variierst du den L-Wert einer Markenfarbe und siehst sofort, wie Hover-, Aktiv- und Deaktiviert-Zustände aussehen, ohne von Hand in den einzelnen RGB-Kanälen zu rechnen.

Vertiefung

Beispielrechnungen

Step-by-Step Walkthroughs. Realistische Szenarien.

Beispiel 1 · Einfach · Normalisierter HEX-Wert Ergebnis liegt vor, Rot (R) Ergebnis liegt vor

Basislauf mit Eingabeformat und Farbwert

Eingabeformat: hex
Farbwert: #1E88E5

Beispiel 2 · Mittel · Normalisierter HEX-Wert Ergebnis liegt vor, Rot (R) Ergebnis liegt vor

Basislauf mit Eingabeformat und Farbwert

Eingabeformat: hsl
Farbwert: #1E88E5

Beispiel 3 · Komplex · Normalisierter HEX-Wert Ergebnis liegt vor, Rot (R) Ergebnis liegt vor

Vergleichslauf mit angepasstem Eingabeformat

Eingabeformat: hsl
Farbwert: #1E88E5

Expertenmodus

Häufige Fragen zu Farb-Konverter

Spezielle Fragen geklärt. Tiefer verstehen.

Welche HEX-Formate akzeptiert der Farb-Konverter?

Der Rechner akzeptiert sowohl die kurze Drei-Zeichen-Schreibweise wie #ABC als auch die volle Sechs-Zeichen-Schreibweise wie #AABBCC, normalisiert den Wert intern und gibt ihn danach gleichzeitig als HEX, RGB und HSL aus.

Jede HEX-Stelle steht dabei für eine Hexadezimalzahl von 0 bis F, und je zwei Stellen ergeben einen Farbkanal im Bereich 0 bis 255: aus FF werden also 255, aus 00 werden 0.

Damit liest du das Ergebnis sofort in der Darstellung, die du gerade für CSS, ein Designsystem oder eine Übergabe brauchst.

Ein typischer Praxisfall: Wenn ein Farbwert aus einem Ticket oder Screenshot unklar ist, übersetzt du ihn in Sekunden in alle drei Formate und testest ihn direkt im Frontend.

Reine Beispiele sind #000000 als 0, 0, 0 (Schwarz) und #FFFFFF als 255, 255, 255 (Weiss).

Wie geht der Rechner mit Kurzschreibweisen wie #ABC um?

Kurzformen mit drei Zeichen werden im Farb-Konverter automatisch auf die volle Sechs-Stellen-HEX-Schreibweise erweitert, indem jede einzelne Stelle verdoppelt wird.

Aus #ABC wird damit #AABBCC, aus #F00 wird #FF0000 und aus #FFF wird #FFFFFF (also 255, 255, 255 in RGB). Diese Verdopplung ist kein Zufallsverfahren, sondern die offizielle CSS-Regel, mit der auch Browser dieselbe Expansion vornehmen.

Dadurch siehst du nach der Eingabe sofort die normalisierte Farbe als RGB-Wert sowie in HEX und HSL, exakt so, wie die Render-Engine intern weiterrechnet.

Das ist besonders nützlich, wenn Designvorlagen oder ältere Stylesheets gemischt kurze und lange Codes enthalten und du eine eindeutige, vergleichbare Schreibweise für den Code-Handover brauchst.

So vermeidest du Verwechslungen zwischen scheinbar verschiedenen, aber in Wahrheit identischen Farben.

Wie entstehen aus HEX die RGB- und HSL-Werte?

Zuerst zerlegt der Rechner den normalisierten Sechs-Stellen-HEX-Wert in drei Paare und liest daraus die Farbkanäle Rot, Grün und Blau als Dezimalzahlen von 0 bis 255 aus: bei #3366CC entstehen so 51, 102 und 204.

Danach werden diese RGB-Werte über die HSL-Standardformeln umgerechnet, wobei zunächst der grösste und der kleinste Kanalwert bestimmt werden.

Aus deren Differenz und Lage berechnet der Rechner den Farbwinkel von 0 bis 360 Grad, die Sättigung von 0 bis 100 Prozent und die Helligkeit von 0 bis 100 Prozent.

So bekommst du aus einem einzigen CSS-Wert sowohl die technischen Kanalzahlen für RGB als auch eine HSL-Sicht für Gestaltungsfragen.

Der umgekehrte Weg funktioniert genauso: Jeder Kanal von 0 bis 255 wird wieder zweistellig hexadezimal geschrieben, etwa 204 als CC, sodass HEX und RGB exakt denselben Farbwert beschreiben.

Was bedeuten H, S und L im Ergebnis wirklich?

H steht für den Hue beziehungsweise Farbwinkel auf dem Farbkreis von 0 bis 360 Grad, wobei 0 für Rot, etwa 120 für Grün und etwa 240 für Blau steht.

S bezeichnet die Sättigung von 0 bis 100 Prozent und gibt an, wie kräftig oder ausgewaschen ein Farbton wirkt; bei 0 Prozent bleibt nur ein Grauton übrig. L ist die technische Helligkeit von 0 bis 100 Prozent, also Schwarz bei 0 und Weiss bei 100.

Gerade dieses L wird oft mit der subjektiven Helligkeitswahrnehmung verwechselt, obwohl reines Gelb und reines Blau bei gleichem L-Wert visuell sehr unterschiedlich hell erscheinen.

Der Rechner liefert dir also eine exakte, standardisierte Modellbeschreibung im HSL-Raum, ersetzt aber keine wahrnehmungsbasierte Helligkeitsbewertung, wie sie etwa Kontrast-Tools nach WCAG vornehmen.

Warum wirken Grau, Schwarz oder sehr dunkle Farben bei HSL manchmal irritierend?

Wenn die Sättigung gegen 0 Prozent geht, verliert der Farbwinkel praktisch seine Bedeutung, weil ohne Buntheit kein eindeutiger Farbton mehr existiert.

Darum kann bei reinem Schwarz (#000000), Weiss (#FFFFFF) oder einem neutralen Grau wie #808080 ein scheinbar willkürlicher Hue-Wert wie 0 Grad auftauchen, obwohl die Farbe völlig korrekt beschrieben ist.

Mathematisch ist der Farbwinkel an dieser Stelle schlicht nicht definiert und wird per Konvention auf 0 gesetzt.

Für solche Fälle sind der RGB-Wert (etwa 128, 128, 128 für mittleres Grau) und der normalisierte HEX-Code die deutlich verlässlichere Lesart, weil sie unabhängig von der Sättigung eindeutig bleiben.

Lass dich also nicht von einem roten Hue bei einem grauen Ton verunsichern; entscheidend sind hier die identischen RGB-Kanäle, die das Grau zweifelsfrei festlegen.

Wie nutze ich das Ergebnis für CSS, Tokens oder Design-Handover?

HEX ist meist die kompakteste Übergabe für Stylesheets und Design-Tokens, weil ein Wert wie #1A73E8 kurz und eindeutig kopierbar ist.

RGB hilft bei Kanalprüfungen und überall dort, wo du einen Alpha-Wert ergänzen willst, etwa rgba(26, 115, 232, 0.5) für 50 Prozent Deckkraft.

HSL ist besonders praktisch, wenn du systematische Varianten ableitest: Du hältst Hue und Sättigung konstant und änderst nur die Helligkeit, um abgestufte Hover- oder Disabled-Zustände einer Farbe zu erzeugen.

Genau deshalb ist der Rechner stark für den ständigen Wechsel zwischen Design-Tool, Styleguide und Code.

Du kannst denselben Farbwert in Sekunden gegen mehrere technische Darstellungen absichern und so verhindern, dass eine Token-Definition in HEX und eine RGB-Angabe im Code unbemerkt auseinanderdriften.

Hilft der Rechner auch bei Barrierefreiheit und Kontrastprüfungen?

Indirekt ja, denn du kannst mit dem Konverter einen Farbwert zuverlässig in genau die technische Darstellung überführen, die ein Kontrast- oder Accessibility-Tool als Eingabe erwartet, etwa saubere RGB-Kanäle oder einen normalisierten HEX-Code.

Die eigentliche Kontrastbewertung nach WCAG übernimmt der Rechner aber nicht: Das Mindestverhältnis von 4,5 zu 1 für normalen Text oder 3 zu 1 für grosse Schrift basiert auf der relativen Leuchtdichte beider Farben und nicht allein auf den HSL- oder HEX-Werten.

Nutze den Konverter deshalb als sauberen Vorlauf, um Vorder- und Hintergrundfarbe eindeutig festzulegen, und gib diese Werte anschliessend in einen WCAG-Kontrastrechner.

So vermeidest du Eingabefehler und stellst sicher, dass die geprüfte Farbe wirklich der im Design verwendeten entspricht und nicht nur einer ungefähr ähnlichen.

Welche Grenze hat der Farb-Konverter bewusst?

Der Rechner wandelt zwischen HEX, RGB und HSL um und verarbeitet bewusst keinen Alpha-Kanal, keine ICC-Profile und keine subtraktiven Druckfarbräume wie CMYK.

Das hat einen klaren Grund: HEX, RGB und HSL beschreiben alle denselben additiven RGB-Farbraum des Bildschirms und lassen sich verlustfrei ineinander umrechnen, während CMYK geräte- und papierabhängig ist und nur über ein Farbprofil sauber konvertiert werden kann.

Für Print-Freigaben oder farbverbindliche Proofs reicht eine reine HEX-RGB-Umrechnung deshalb nicht aus, weil dort die tatsächliche Druckausgabe und das ICC-Profil entscheiden.

Als Web- und UI-Werkzeug für CSS-Farben, Design-Tokens und technische Prüfung am Monitor arbeitet der Rechner dagegen exakt und nachvollziehbar.

Für Transparenz nutzt du zusätzlich die rgba-Notation, für den Druck ein farbmanagementfähiges Grafikprogramm.

Weiterführende Rechner und Themen

Alle Anschlussrechner und Vertiefungen in einem klaren Modul, damit du direkt zur nächsten sinnvollen Berechnung springen kannst.

ZahlenbasisHEX-Farbwerte zwischen Binär, Dezimal und Hex umrechnen.Base64Design-Werte oder kleine Assets Base64-kodieren.ASCII-Zeichencode-RechnerZeichen in ASCII-, Unicode-, Hex- und Binärdarstellung umrechnen und komplette ASCII-Tabelle als Referenz anzeigen.Timestamp-KonverterUnix-Timestamps in Datum/Uhrzeit und umgekehrt konvertieren – inklusive Sekunden- und Millisekunden-Timestamps sowie Zeitzonen.Datenvolumen-RechnerDatenverbrauch für Streaming, Surfen, Videocalls, Social Media und Gaming pro Tag, Woche oder Monat abschätzen.Cloud-Speicherbedarf-RechnerBenötigten Cloud-Speicher für Fotos, Videos und Dokumente berechnen und passenden Cloud-Tarif mit Puffer finden.Backup-Größe-RechnerBackup-Größe für Voll-, inkrementelle und differenzielle Backups mit Komprimierung und geschätzter Backup-Dauer berechnen.Programmierung & Entwickler Rechner gezielt auswählenDirekter Hub für weitere Rechner aus Programmierung & Entwickler mit demselben Themenkontext.Technik & Digital als Themenhub weiter öffnenCluster-Wechsel in benachbarte Themen derselben Kategorie.Farb-Konverter über alle Filter weiter eingrenzenSuche für weitere Varianten, Kategorien und Rechentypen mit ähnlichem Intent.