Farbkonverter

Was ist der Unterschied zwischen HEX, RGB und HSL?

HEX beschreibt eine Farbe als sechsstelligen Hexadezimalwert (z. B. #1d4ed8). RGB gibt die Anteile von Rot, Grün und Blau als Zahlen 0–255 an. HSL beschreibt eine Farbe stattdessen über Farbton (Hue), Sättigung und Helligkeit – oft intuitiver zum Anpassen von Farbtönen.

So wird umgerechnet

Bei HEX nach RGB wird jedes Zeichenpaar als Hexadezimalzahl gelesen; eine dreistellige Kurzform wie #fc0 wird vorher zu #ffcc00 verdoppelt. Für RGB nach HSL teilt der Rechner die drei Werte durch 255 und bestimmt den größten und kleinsten Anteil. Die Helligkeit L ist deren Mittelwert, die Sättigung S ist die Differenz geteilt durch 1 − |2 × L − 1|. Der Farbton H ergibt sich in 60-Grad-Abschnitten danach, welcher Kanal am stärksten ist. Für die Anzeige werden H, S und L auf ganze Zahlen gerundet. Der Weg von HSL zurück nach RGB kehrt diese Rechnung um.

Beispiel

Vorgegeben ist #1d4ed8. Aus 1d wird 1 × 16 + 13 = 29, aus 4e wird 4 × 16 + 14 = 78, aus d8 wird 13 × 16 + 8 = 216 – also rgb(29, 78, 216). Geteilt durch 255 sind das 0,1137, 0,3059 und 0,8471. Helligkeit: (0,8471 + 0,1137) ÷ 2 = 0,4804, also 48 %. Sättigung: 0,7333 ÷ 0,9608 = 0,7633, also 76 %. Da Blau am stärksten ist, gilt H = 60 × ((R − G) ÷ Differenz + 4) = 224,28, gerundet 224. Der Rechner zeigt daher hsl(224, 76%, 48%).

Zweites Beispiel

#f97316 entspricht rgb(249, 115, 22) und hsl(25, 95%, 53%) – ein warmes Orange, wie es häufig für Call-to-Action-Buttons auf Websites verwendet wird. Der niedrige Hue-Wert (25°) zeigt bereits vor dem Betrachten des Farbfelds, dass es sich um einen Rot-Orange-Ton handelt.

Schritt für Schritt

1. Wähle eine Farbe im Farbwähler oder trage einen HEX-Code mit oder ohne # ein.
2. Alternativ gibst du die drei RGB-Werte zwischen 0 und 255 ein.
3. Oder du stellst Farbton (0–360), Sättigung und Helligkeit (je 0–100) im HSL-Bereich ein.
4. Alle anderen Felder, das Farbfeld und die Ergebniszeilen passen sich sofort an.
5. Übernimm die gewünschte Schreibweise aus dem Ergebnis, etwa in dein Stylesheet.

Typische Farben im Vergleich

Farbe	HEX	RGB	HSL
Weiß	#ffffff	255, 255, 255	0, 0 %, 100 %
Schwarz	#000000	0, 0, 0	0, 0 %, 0 %
Mittelgrau	#808080	128, 128, 128	0, 0 %, 50 %
Rot	#ff0000	255, 0, 0	0, 100 %, 50 %
Gelb	#ffcc00	255, 204, 0	48, 100 %, 50 %
Grün	#16a34a	22, 163, 74	142, 76 %, 36 %
Blau	#1d4ed8	29, 78, 216	224, 76 %, 48 %
Orange	#f97316	249, 115, 22	25, 95 %, 53 %

Wann brauchst du den Farbkonverter?

Er ist gefragt beim Übertragen von Farbwerten zwischen CSS, Design-Tools und Bildbearbeitungsprogrammen, beim Nachbauen einer Farbe aus einem Screenshot oder einer Vorlage, beim Dokumentieren von Markenfarben in einem Styleguide sowie beim gezielten Aufhellen oder Abdunkeln eines Farbtons über die HSL-Werte.

Gut zu wissen

HEX, RGB und HSL sind additive Bildschirm-Farbmodelle. Für gedruckte Erzeugnisse wie Textilien oder Broschüren wird meist das subtraktive CMYK-Farbmodell benötigt, das dieser Rechner nicht abbildet – Bildschirmfarben und Druckfarben können daher trotz gleicher HEX-Angabe unterschiedlich wirken.

Häufige Fehler und Grenzen

• Rundungsverluste: Weil HSL auf ganze Zahlen gerundet wird, führt der Rückweg nicht immer exakt zum Ausgangswert. hsl(224, 76%, 48%) ergibt zum Beispiel #1d4fd7 statt #1d4ed8.
• Ungültige HEX-Codes: Übernommen werden nur drei- oder sechsstellige Codes aus den Ziffern 0–9 und den Buchstaben a–f. Bei anderen Eingaben wie #12345g markiert der Konverter das Feld und zeigt einen Hinweis; die übrigen Werte bleiben unverändert.
• Keine Transparenz: Achtstellige HEX-Codes mit Alphakanal und rgba- oder hsla-Werte unterstützt der Konverter nicht.
• Werte außerhalb des Bereichs werden für die Berechnung begrenzt: Ein RGB-Wert von 300 zählt als 255.
• Wahrgenommene Helligkeit: Gelb und Blau mit gleichem L-Wert wirken unterschiedlich hell – HSL bildet das menschliche Sehen nur grob ab.

Passende Tools

Inspiration für neue Farbkombinationen liefert der Zufallsfarben-Generator. Dein fertiges Stylesheet verkleinerst du mit dem CSS-Minifier, und Sonderzeichen in HTML-Vorlagen kodiert der HTML-Encoder.

Häufige Fragen

Wie lese ich einen HEX-Code?

Ein HEX-Code besteht aus drei Paaren von Hexadezimalziffern für Rot, Grün und Blau, z. B. #RRGGBB. Jedes Paar liegt zwischen 00 und FF (0–255 in Dezimal).

Wann ist HSL praktischer als RGB?

HSL eignet sich gut, um eine Farbe gezielt heller, dunkler oder gesättigter zu machen, ohne alle drei RGB-Werte einzeln anpassen zu müssen.

Kann ich direkt aus einer Farbauswahl starten?

Ja, über den Farbwähler oben lässt sich eine Farbe visuell auswählen – alle anderen Felder aktualisieren sich automatisch.

Warum eignet sich dieser Rechner nicht für Druckfarben?

HEX, RGB und HSL sind additive Bildschirm-Farbmodelle. Für Druckerzeugnisse wird meist das subtraktive CMYK-Modell benötigt, das hier nicht berechnet wird.

Was bedeutet es, wenn die Sättigung (S) bei 0 % liegt?

Bei 0 % Sättigung entsteht unabhängig vom Farbton ein reiner Grauton – die Helligkeit (L) bestimmt dann allein, wie hell oder dunkel das Grau ausfällt.

Warum ändert sich der HEX-Wert leicht, wenn ich HSL-Werte eingebe?

HSL-Werte werden auf ganze Zahlen gerundet. Rechnet der Konverter daraus zurück, kann ein RGB-Kanal um einen oder mehrere Punkte abweichen. Für exakte Farben solltest du deshalb vom HEX- oder RGB-Wert ausgehen.

Werden dreistellige HEX-Codes unterstützt?

Ja, die Kurzform wird automatisch verdoppelt: Aus #fc0 wird #ffcc00, also rgb(255, 204, 0). Das Rautezeichen kannst du auch weglassen.

Kann ich auch Farben mit Transparenz umrechnen?

Nein, der Konverter arbeitet ohne Alphakanal. Achtstellige HEX-Codes sowie rgba- und hsla-Angaben werden nicht verarbeitet, sondern als ungültige Eingabe markiert; die Transparenz musst du separat ergänzen.