Farbcode umrechnen: von #003366 zu HSL und CMYK
Die Designerin schickt #003366. Im Stylesheet brauchst du HSL, die Druckerei will CMYK. Der Farbkonverter rechnet einen HEX-Code in RGB, HSL und CMYK um. Beim Start steht #3b82f6 im Feld, ein mittleres Blau. Es ergibt rgb(59, 130, 246), hsl(217, 91%, 60%) und cmyk(76%, 47%, 0%, 4%). Daneben prüft ein Kontrasttest nach WCAG 2.1 eine Textfarbe gegen einen Hintergrund.
Die Farben bleiben auf deinem Gerät
Umrechnung und Kontrastberechnung laufen als JavaScript in deinem Browser. Eine Farbauswahl oder Eingabe sendet keine Anfrage, das zeigt der Netzwerk-Tab der Entwicklertools. Die Kopier-Knöpfe schreiben in die Zwischenablage. Der Code des Tools speichert deine Farben nicht.
Vom Farbfeld zum Kontrastwert in vier Schritten
- Klicke auf das Farbfeld, um den Farbwähler deines Browsers zu öffnen, oder füge einen Code in das Feld HEX ein. Sechsstellige Werte und die dreistellige Kurzform (#0af) funktionieren, mit und ohne #.
- Lies die Felder RGB, HSL und CMYK (Druck) ab. Der Kopier-Knopf über einem Feld übernimmt den Wert.
- Stelle rechts Textfarbe und Hintergrund ein.
- Verhältnis und die vier Anzeigen (AA Normal, AAA Normal, AA Groß, AAA Groß) ändern sich bei jeder Auswahl.
Das HEX-Feld schreibt sich selbst um
Nur das HEX-Feld und der Farbwähler steuern die Umrechnung. Die Felder RGB und HSL sehen bearbeitbar aus, doch Eingaben dort ändern nichts. CMYK ist schreibgeschützt.
Sobald der Inhalt des HEX-Felds ein gültiger Code ist, überschreibt das Feld sich. Tippst du auf dem Weg zu #ff0000 zuerst #ff0, springt es auf #ffff00. Füge den ganzen Code deshalb lieber ein. Achtstellige Codes (mit Alpha), Farbnamen wie „tomato“ und Notationen wie OKLCH oder HSV werden nicht unterstützt. Ungültige Eingaben ignoriert das Tool ohne Fehlermeldung.
Ein Blau, ein Grau und Weiß auf #2563eb
Ein Firmenblau kommt als #003366 an. Für helle und dunkle Varianten in CSS ist HSL praktisch: Das Tool liefert hsl(210, 100%, 20%), und du erhöhst nur die letzte Zahl. Für einen Flyer lautet dasselbe Blau cmyk(100%, 50%, 0%, 60%), ein erster Wert für die Druckerei.
Ein hellgrauer Platzhalter wie #999999 auf Weiß ergibt 2.85 : 1. Das fällt selbst für große Schrift bei AA durch. Weiß auf dem voreingestellten #2563eb ergibt 4.68 : 1. Das besteht AA für Fließtext, aber nicht AAA.
Gerundet wird nur die Anzeige
Das Verhältnis steht mit zwei Nachkommastellen da, aber der Bestanden-Test nutzt den genauen Wert. Aus 4.496 wird also 4.50 : 1, und AA ist trotzdem nicht erfüllt. HSL und CMYK werden auf ganze Zahlen gerundet. CMYK ist die einfache mathematische Umrechnung aus RGB, ohne ICC-Profil, deshalb kann eine Druckerei zu einem anderen Ergebnis kommen.
Die beiden Kontrast-Farbwähler arbeiten getrennt vom Konverter und nehmen nur Farben aus dem Farbwähler an. Deine Schriftgröße kennt das Tool nicht. Nach WCAG gilt Text ab 18 pt, oder 14 pt fett, als groß.