Design & Entwicklung

Farben umrechnen

Rechnen Sie Farbcodes zwischen HEX, RGB, HSL, HSV und CMYK um. Ändern Sie einen Kanal und alle anderen Formate aktualisieren sich sofort; Ihre Eingaben bleiben im Browser

Läuft in Ihrem Browser: Ihre Eingaben bleiben auf Ihrem Gerät

Farbsteuerung

Visuelle Farbwahl

Hexadezimalwert (HEX)

RGB-Kanäle (0–255)

HSL (Farbton, Sättigung, Helligkeit)

Immer synchron: Ändern Sie einen Regler, den HEX-Code oder den Farbwähler, und alle anderen Formate passen sich sofort an.

Text on Color (White) Text on Color (Black)

HEX #059669

RGB (CSS) rgb(5, 150, 105)

HSL (CSS) hsl(161, 94%, 30%)

HSV / HSB hsv(161, 97%, 59%)

CMYK cmyk(97%, 0%, 30%, 41%)

Relative Luminanz (WCAG 2.1): 0,2286

Tool teilen

So nutzen Sie das Tool

Wählen Sie eine Farbe mit dem visuellen Farbwähler, tippen Sie einen HEX-Code ein oder bewegen Sie die RGB- und HSL-Regler; alle Formate aktualisieren sich gemeinsam.
Mit „Zufällige Farbe“ entdecken Sie neue Ideen.
Lesen Sie HEX-, RGB-, HSL-, HSV- und CMYK-Werte sowie die relative Luminanz und den Kontrast zu weißem und schwarzem Text ab.
Klicken Sie bei dem benötigten Format auf Kopieren, um es in CSS, Designsoftware oder Code einzufügen.

Rechenbeispiel

Das Smaragdgrün #059669 entspricht rgb(5, 150, 105), hsl(161, 94%, 30%), hsv(161, 97%, 59%) und cmyk(97%, 0%, 30%, 41%), mit einer relativen Luminanz von 0,2286. Weißer Text darauf hat ein Kontrastverhältnis von 3,77:1, schwarzer Text 5,57:1. Die WCAG verlangt mindestens 4,5:1 für normalen und 3:1 für großen Text – weißer Text auf diesem Grün taugt also nur für große Überschriften, schwarzer Text besteht überall. Die CMYK-Werte stammen aus einer einfachen Formel ohne ICC-Profil und weichen daher von einem Druckproof ab.

Methodik

Jedes Format wird aus einem 8-Bit-sRGB-Tripel berechnet. sRGB ist in IEC 61966-2-1 definiert; die Schreibweisen HEX, RGB und HSL stammen aus der W3C-Spezifikation CSS Color; die relative Luminanz folgt WCAG 2.1. Alle Werte werden auf ganze Zahlen gerundet, sodass Hin- und Zurückrechnen einen Wert um 1 verschieben kann.

RGB, HEX und HSL: HEX sind die drei Kanäle zur Basis 16: rgb(255, 128, 0) ist #FF8000. Für HSL werden die Kanäle auf 0 bis 1 skaliert, dann gilt L = (max + min) / 2, S = (max − min) / (1 − |2L − 1|), und der Farbton ist der Winkel des dominanten Kanals auf einem 360-Grad-Kreis. Dieselbe Farbe ergibt hsl(30, 100%, 50%). HSV teilt den Farbton, nutzt aber V = max und S = (max − min) / max. Kurzformen wie #F80 werden zu #FF8800 erweitert; ein 8-stelliges HEX wird akzeptiert, sein Alpha-Paar aber ignoriert.

CMYK und Luminanz: CMYK nutzt die einfache geräteunabhängige Formel K = 1 − max(R, G, B), wobei C, M und Y am Rest skaliert werden; #FF8000 ergibt cmyk(0%, 50%, 100%, 0%). Es gibt kein ICC-Profil, keine Farbe und kein Papier, daher entspricht das Ergebnis keinem Andruck. Die relative Luminanz linearisiert jeden Kanal (v / 12,92 unterhalb von 0,03928, sonst ((v + 0,055) / 1,055)^2,4) und gewichtet mit 0,2126, 0,7152 und 0,0722. Für #FF8000 ergibt das 0,3670, also ein Kontrastverhältnis von 2,52:1 zu Weiß und 8,34:1 zu Schwarz. Ein mittleres Grau wie #808080 hat die Luminanz 0,2159, nicht 0,5.

Sieben Klassiker und ihr Kontrast zu Weiß und Schwarz

Sieben bekannte Farben, mit den Formeln dieses Tools umgerechnet. Die letzte Spalte zeigt das Kontrastverhältnis von weißem und schwarzem Text auf der jeweiligen Farbe.

Farbe	HSL	CMYK (%)	Kontrast Weiß / Schwarz
#FF0000 Rot	0, 100 %, 50 %	0, 100, 100, 0	4,00:1 / 5,25:1
#0000FF Blau	240, 100 %, 50 %	100, 100, 0, 0	8,59:1 / 2,44:1
#FFFF00 Gelb	60, 100 %, 50 %	0, 0, 100, 0	1,07:1 / 19,56:1
#808080 Mittelgrau	0, 0 %, 50 %	0, 0, 0, 50	3,95:1 / 5,32:1
#008080 Petrolblau	180, 100 %, 25 %	100, 0, 0, 50	4,77:1 / 4,40:1
#800080 Violett	300, 100 %, 25 %	0, 100, 0, 50	9,42:1 / 2,23:1
#000080 Marineblau	240, 100 %, 25 %	100, 100, 0, 50	16,01:1 / 1,31:1

So lesen Sie die Tabelle: WCAG 2.1 verlangt auf Stufe AA 4,5:1 für normalen Text. Gelb ist der Extremfall, mit 1,07:1 für weißen, aber 19,56:1 für schwarzen Text. Mittelgrau #808080 überrascht viele: Es liegt genau in der Mitte des Bereichs 0 bis 255, doch weder Weiß (3,95:1) noch Schwarz (5,32:1) steht ausgewogen darauf, weil die wahrgenommene Helligkeit nicht linear ist. Petrolblau und Mittelgrau sind Grenzfälle, prüfen Sie deshalb immer die konkrete Kombination.

Grenzen: Die Werte sind auf ganze Zahlen gerundet, und CMYK stammt aus einer einfachen Formel ohne ICC-Profil, stimmt also nicht mit einem Andruck überein.

Häufige Fragen

Was ist der Unterschied zwischen RGB und HSL in CSS? ▼

Beide beschreiben dieselben sRGB-Farben. RGB mischt rotes, grünes und blaues Licht, so wie Bildschirme arbeiten. HSL beschreibt eine Farbe als Farbton (Winkel auf dem Farbkreis), Sättigung und Helligkeit; eine hellere oder weniger gesättigte Variante erfordert daher nur eine geänderte Zahl. Beispiel: hsl(30, 100%, 50%) und rgb(255, 128, 0) sind dasselbe Orange, ein dunklerer Ton ist aber einfach hsl(30, 100%, 35%).

Lässt sich CMYK exakt in RGB umrechnen? ▼

Nein. RGB ist additives Licht auf dem Bildschirm, CMYK subtraktive Farbe auf Papier, und der druckbare Bereich hängt von Farben, Papier und Druckmaschine ab. Das hier angezeigte CMYK stammt aus einer einfachen mathematischen Formel ohne Farbprofil. Verstehen Sie es als Ausgangspunkt und prüfen Sie Farben mit dem ICC-Profil Ihrer Druckerei oder einem Proof.

Wie wird die relative Luminanz berechnet, und wofür dient sie? ▼

Jeder sRGB-Kanal wird linearisiert (die Gammakurve wird entfernt) und zu L = 0,2126 R + 0,7152 G + 0,0722 B kombiniert, der Formel aus WCAG 2.1. Die Gewichte spiegeln wider, dass das Auge für Grün am empfindlichsten ist. Das Kontrastverhältnis ist dann (L1 + 0,05) / (L2 + 0,05), wobei L1 die hellere Farbe ist. WCAG verlangt auf Stufe AA 4,5:1 für normalen Text und 3:1 für großen Text.

Warum hat sich mein Wert nach dem Zurückrechnen um 1 geändert? ▼

HSL, HSV und CMYK werden als ganze Zahlen angezeigt, und mehrere RGB-Farben führen zum selben gerundeten HSL. Wenn Sie die HSL-Felder ändern, behält das Tool Ihre HSL-Werte und leitet daraus RGB ab; ändern Sie danach RGB, wird HSL neu berechnet und kann leicht abweichen. Der Farbton ist bei Grautönen undefiniert und wird als 0 angezeigt. Für exakte Werte behalten Sie den HEX- oder RGB-Code als Quelle.