Farb-Umrechner

VonOleh Soloninaktualisiert 25. September 2026

Ergebnis

#2C2A3A ist rgb(44, 42, 58) und hsl(248, 16%, 20%).

HEX

#2C2A3A

RGB

rgb(44, 42, 58)

HSL

hsl(248, 16%, 20%)

Relative Helligkeit

0,025 — die HSL-Helligkeit liegt dagegen bei 20 %

Kontrast nach WCAG

gegen Weiß 14,01 zu 1 (AAA), gegen Schwarz 1,5 zu 1 (zu wenig)

Wie die Helligkeit entsteht

#2C2A3A zerfällt in drei Kanäle: 2C = 44, 2A = 42, 3A = 58. Für die Helligkeit wird jeder Kanal auf 0 bis 1 gebracht und die Gammakurve zurückgerechnet, dann werden die drei gewichtet: 0,2126 · Rot + 0,7152 · Grün + 0,0722 · Blau = 0,025. Grün zählt dabei mehr als dreimal so viel wie Rot und fast zehnmal so viel wie Blau — deshalb wirkt ein reines Blau so dunkel, obwohl sein Kanal auf Anschlag steht.

Das Ergebnis ist ein Richtwert und ersetzt keine Beratung.

HEX, RGB und HSL ineinander umrechnen — mit dem Kontrast nach WCAG.

HEX und RGB beschreiben dieselbe Farbe auf zwei Arten: #2C2A3A ist rgb(44, 42, 58), denn 2C hexadezimal sind 44 dezimal. HSL beschreibt sie anders — über Farbton, Sättigung und Helligkeit.

Für die Bearbeitung ist HSL meist bequemer. Eine Farbe heller zu machen heißt dort, eine Zahl zu erhöhen; in RGB müssten dafür alle drei Kanäle gleichzeitig und ungleichmäßig verändert werden.

So benutzen Sie den Rechner

Tragen Sie die Farbe in einer der drei Schreibweisen ein — HEX, rgb() oder hsl().
Lesen Sie die anderen beiden Schreibweisen ab; umgerechnet wird verlustfrei, es ist dieselbe Farbe.
Prüfen Sie den Kontrast gegen Weiß und gegen Schwarz, bevor Sie die Farbe für Text verwenden.

Warum die HSL-Helligkeit in die Irre führt

Die ersten vier Zeilen der Tabelle haben in HSL alle dieselbe Helligkeit: 50 Prozent. Tatsächlich unterscheiden sie sich um den Faktor dreizehn — Gelb ist fast weiß, Blau fast schwarz. HSL beschreibt, wie eine Farbe gemischt ist, nicht, wie hell sie wirkt.

Der Grund steht in den Gewichten: Grün geht mit 0,7152 in die Helligkeit ein, Rot mit 0,2126, Blau nur mit 0,0722. Das Auge hat für Grün die meisten Rezeptoren und für Blau die wenigsten. Wer Text auf Gelb setzt, braucht deshalb eine sehr dunkle Schrift, und auf Blau eine sehr helle.

Alle Zeilen stammen aus dem Rechner dieser Seite. Die letzte Zeile ist der Beweis in die andere Richtung: Ein Grau mit geringerer HSL-Helligkeit als die vier Farben darüber hat eine relative Helligkeit, die zwischen Rot und Blau liegt — und besteht für Fließtext auf Weiß die AA-Schwelle von 4,5 zu 1, an der Rot scheitert. Blau besteht sie auch und liegt mit 8,59 zu 1 sogar über der AAA-Schwelle von 7 zu 1.
Farbe	HSL-Helligkeit	Relative Helligkeit	Kontrast gegen Weiß
#FF0000 Rot	50 %	0,2126	4,00 zu 1
#00FF00 Grün	50 %	0,7152	1,37 zu 1
#0000FF Blau	50 %	0,0722	8,59 zu 1
#FFFF00 Gelb	50 %	0,9278	1,07 zu 1
#767676 Grau	46 %	0,1812	4,54 zu 1

Was die drei Schreibweisen können

HEX, rgb() und hsl() beschreiben denselben Raum und lassen sich verlustfrei ineinander umrechnen — mit einer Einschränkung: Die Rundung auf ganze Prozent in HSL kann beim Rückweg einen Kanalwert um eins verschieben.

Unterschiedlich ist, wozu sie taugen. Für eine Variation derselben Farbe ist HSL die einzige brauchbare Schreibweise: Sättigung und Helligkeit ändern, Farbton behalten. In HEX müsste man dafür drei Zahlen gleichzeitig verschieben und wüsste vorher nicht, was herauskommt.

Alle Schreibweisen bis auf die zweite nimmt der Rechner als Eingabe an. Die Kurzform hat nur 4.096 mögliche Farben statt 16,7 Millionen — deshalb sieht #ABC selten genau so aus wie der Wert, den ein Bildprogramm ausgibt.
Schreibweise	Beispiel	Wofür sie sich eignet
HEX	#2C2A3A	feste Werte in CSS, kurz und kopierbar
HEX mit Alpha	#2C2A3ACC	dieselbe Farbe mit 80 Prozent Deckkraft
Kurzform	#ABC	steht für #AABBCC — jedes Zeichen wird verdoppelt
rgb()	rgb(44, 42, 58)	Rechnen mit Kanälen, Ausgabe aus Bildprogrammen
hsl()	hsl(248, 16%, 20%)	Abstufungen einer Farbe, Themen hell und dunkel

Kontrast ist keine Geschmacksfrage

Die WCAG verlangen für normalen Text ein Kontrastverhältnis von mindestens 4,5 zu 1 gegenüber dem Hintergrund, für großen Text 3 zu 1. Die höchste Stufe AAA fordert 7 zu 1 beziehungsweise 4,5 zu 1.

Gerechnet wird nicht mit der wahrgenommenen Helligkeit, sondern mit der relativen Luminanz — die Kanäle werden gewichtet, weil das Auge Grün deutlich stärker wahrnimmt als Blau. Deshalb hat ein sattes Gelb gegenüber Weiß fast keinen Kontrast, obwohl es kräftig wirkt.

Wo die Farbräume auseinandergehen

HSL ist eine reine Umrechnung von RGB und beschreibt keinen anderen Farbumfang. Was auf dem Bildschirm nicht darstellbar ist, wird auch in HSL nicht darstellbar — die Umrechnung ist verlustfrei und in beide Richtungen exakt.

Anders bei CMYK für den Druck: Dort gibt es Farben, die ein Bildschirm zeigen kann und eine Druckmaschine nicht, und umgekehrt. Eine Umrechnung ohne Farbprofil wäre deshalb geraten, und aus dem Grund fehlt sie hier.

Quellen

Stand der Werte: 2026. Die Ergebnisse sind Orientierungswerte und ersetzen keine fachliche Beratung.

Häufige Fragen

Was bedeutet die Kurzform mit drei Zeichen?

#abc ist die Abkürzung für #aabbcc — jedes Zeichen wird verdoppelt. Damit lassen sich nur 4 096 Farben schreiben statt der 16,7 Millionen der langen Form, weshalb sie vor allem in schnellen Entwürfen vorkommt.

Warum stimmt die Helligkeit in HSL nicht mit dem Eindruck überein?

Weil der L-Wert in HSL rein rechnerisch der Mittelwert von hellstem und dunkelstem Kanal ist. Ein reines Gelb und ein reines Blau haben beide L gleich 50 Prozent, wirken aber völlig unterschiedlich hell — dafür ist die relative Luminanz zuständig.

Warum sind HSL-Helligkeit und relative Helligkeit so verschieden?

Weil sie verschiedene Fragen beantworten. Die HSL-Helligkeit sagt, wie viel Weiß oder Schwarz in der Mischung steckt — reines Rot, Grün und Blau liegen deshalb alle bei 50 Prozent. Die relative Helligkeit sagt, wie viel Licht beim Auge ankommt, und gewichtet die Kanäle nach der Empfindlichkeit der Netzhaut.

Ist die Umrechnung verlustfrei?

Zwischen HEX und rgb() ja, es sind dieselben drei Zahlen in anderer Schreibweise. Bei hsl() rundet der Rechner Sättigung und Helligkeit auf ganze Prozent, wie es in CSS üblich ist — beim Rückweg können einzelne Kanäle dadurch um einige Stufen abweichen, aus rgb(100, 155, 219) wird so rgb(102, 157, 219). Wer die Farbe exakt braucht, speichert den HEX-Wert.

Was bedeuten acht statt sechs Stellen im Hex-Wert?

Die beiden letzten Stellen sind die Deckkraft: 00 unsichtbar, FF vollständig deckend, CC etwa 80 Prozent. Jeder aktuelle Browser versteht die Schreibweise. Dieser Rechner nimmt sie nicht an, weil er Kontraste berechnet — und der Kontrast einer halbdurchsichtigen Farbe hängt davon ab, was darunter liegt.

Warum sieht dieselbe Farbe auf zwei Bildschirmen anders aus?

Weil ein Hex-Wert keine Farbe benennt, sondern eine Anweisung an den Bildschirm. CSS definiert Hex-Werte in sRGB, und der Browser rechnet sie in den Farbraum des jeweiligen Bildschirms um. Das Ergebnis hängt von Kalibrierung, Farbmanagement und Umgebungslicht ab, derselbe Wert kann also auf zwei Geräten verschieden aussehen — für Druck braucht es andere Angaben.

Nützliche Links

Entwicklung und Web Alle Rechner

Farb-Umrechner

Ergebnis

Passt dazu

Farbkontrast nach WCAG

CSS-Farbverlauf erzeugen

Binär und Text umwandeln

Subnetz-Rechner

Unicode-Zeichenprüfer

Cron-Rechner

Nützliche Links