Farbkonverter und Kontrastprüfer
Konvertiere Farben zwischen HEX, RGB, HSL und HSV und prüfe das WCAG-Kontrastverhältnis.
Farbkonverter und Kontrastprüfer wird geladen… Wenn nichts passiert, aktiviere JavaScript.
Die digitale Farbdarstellung hat sich über mehrere konkurrierende Systeme entwickelt, von denen jedes für einen anderen Zweck optimiert ist. Das hexadezimale Format #RRGGBB entstand in den Anfangstagen von HTML in den 1990er-Jahren, als das Web von Tim Berners-Lee eine knappe Möglichkeit benötigte, die 16 Millionen Farben anzugeben, die 24-Bit-Bildschirme darstellen konnten. Das Format codiert die Intensitäten der Kanäle Rot, Grün und Blau als zweistellige Hexadezimalzahlen, was es für das Markup kompakt macht und zugleich für Menschen lesbar hält. RGB (Rot, Grün, Blau) ist das additive Farbmodell, das alle digitalen Bildschirme verwenden: Licht bei voller Intensität zu mischen ergibt Weiß, das Gegenteil davon, wie sich Tinte verhält. HSL (Farbton, Sättigung, Helligkeit) und HSV (Farbton, Sättigung, Hellwert) sind zylindrische Transformationen von RGB, die sich enger daran orientieren, wie Menschen Farbe wahrnehmen, was sie für den Aufbau systematischer Designpaletten unverzichtbar macht.
Beispiele
#ff5733
rgb(255, 87, 51)
Jedes Hex-Paar entspricht einem Rot-, Grün-, Blau-Kanal (0-255).
rgb(255, 87, 51)
hsl(11, 100%, 60%)
Dieselbe Farbe ausgedrückt als Farbton, Sättigung, Helligkeit.
Häufig gestellte Fragen
Werden bei der Nutzung dieses Werkzeugs Daten an einen Server gesendet?
Wie funktioniert das hexadezimale Farbformat?
Wann sollte ich in meinem CSS HSL statt RGB verwenden?
Welches WCAG-Kontrastverhältnis brauche ich für meine Website?
Warum sehen dieselben HSL-Werte manchmal in verschiedenen Browsern unterschiedlich aus?
Wie ist die Geschichte der Webfarben?
Kann ich Farben mit Transparenz konvertieren?
Wie unterscheidet sich dieses Werkzeug von den Browser-DevTools?
Welche Farbwerte sollte ein Entwickler auswendig kennen?
Was ist ein häufiger Anfängerfehler bei Hex-Farben?
Über Farbkonverter und Kontrastprüfer
Designer verwenden Hex-Codes beim Schreiben von CSS-Stylesheets und beim Auswählen von Markenfarben in Werkzeugen wie Figma oder Sketch. Frontend-Entwickler wechseln zu RGB oder RGBA, wenn sie Deckkraft anwenden oder programmatisches Farbmischen in Canvas oder WebGL durchführen müssen. HSL wird bevorzugt, um Farbskalen algorithmisch zu erzeugen; etwa indem man den Farbton festhält und zugleich die Helligkeit in Schritten verändert, um eine konsistente Tonwertrampe zu schaffen. HSV ist das native Format der meisten Farbwähler-Widgets, weil seine Hellwert-Achse intuitiv dem Helligkeitsregler entspricht. Barrierefreiheits-Ingenieure verlassen sich auf Berechnungen des Kontrastverhältnisses, um sicherzustellen, dass Text für Nutzer mit Sehschwäche oder Farbfehlsichtigkeit lesbar bleibt, eine Anforderung, die von WCAG 2.1 vorgeschrieben und auf Websites des öffentlichen Sektors in der gesamten EU und den USA durchgesetzt wird.
Dieses Werkzeug konvertiert jede Farbe, die du eingibst, gleichzeitig in alle vier Notationen und berechnet außerdem das WCAG-Kontrastverhältnis zwischen deiner Farbe und einem beliebigen von dir angegebenen Hintergrund. Alles läuft in deinem Browser ohne Serveranfragen. Du kannst einen Hex-Code einfügen, RGB-Werte eintippen oder HSL-Koordinaten eingeben, und das Werkzeug zeigt dir sofort alle gleichwertigen Darstellungen an. Der Kontrastprüfer liefert dir ein Bestanden- oder Nicht-bestanden-Ergebnis gegenüber den AA- und AAA-Schwellenwerten der WCAG.
Ein häufiger Fallstrick ist die Verwechslung von HSL und HSV: Beide verwenden Farbton und Sättigung, doch ihre dritte Achse unterscheidet sich in wichtiger Hinsicht. In HSL erzeugt eine Helligkeit von 100 % unabhängig von Farbton oder Sättigung stets Weiß. In HSV erzeugt ein Hellwert von 100 % den reinen Farbton (volle Helligkeit), nicht Weiß. Ein weiterer häufiger Fehler ist zu vergessen, dass sich die Hex-Kurzform #RGB durch Verdoppeln der Ziffern zu #RRGGBB erweitert, sodass #f09 #ff0099 bedeutet, nicht #f00009. Beachte bei der Arbeit mit Deckkraft, dass CSS sowohl das achtstellige Hex (#RRGGBBAA) als auch die Funktion rgba() akzeptiert, aber einige ältere Browser und Designwerkzeuge nur die rgba()-Form unterstützen.
Wie 16 Millionen Farben in einem Sechs-Zeichen-Code landeten
Vor dem Web war Farbe auf Computerbildschirmen eine Sache strenger Beschränkungen. Die ursprüngliche CGA-Grafikkarte von 1981 bot nur 16 Farben, sorgfältig so gewählt, dass sie auf den Monitoren der damaligen Zeit unterscheidbar waren. Der EGA-Standard erweiterte dies auf 64, und VGA bot schließlich 256 Farben aus einer festen Palette. Erst als 24-Bit-Echtfarbbildschirme Anfang der 1990er-Jahre erschwinglich wurden, wurde das volle Spektrum von 16.777.216 Farben für Verbraucherhardware zugänglich, und das Web brauchte eine Notation, um sie alle zu beschreiben.
Die Ingenieure von Netscape Navigator wählten Hexadezimal, weil es perfekt zur zugrundeliegenden Hardware passte: Jeder der drei 8-Bit-Farbkanäle (0-255) lässt sich als genau zwei Hex-Ziffern (00-FF) ausdrücken, was einen kompakten und eindeutigen Sechs-Zeichen-Code ergibt. Das Format tauchte um 1994 in Netscape 1.1 auf und wurde rasch vom Internet Explorer übernommen. Das W3C formalisierte es 1996 in der CSS1-Spezifikation und festigte damit seinen Platz als universelle Kurzform für Webfarben. Die benannten Farbschlüsselwörter (red, blue, aqua) wurden direkt von den 16 Standard-VGA-Farben übernommen, ergänzt um weitere Farben aus dem X11-Fenstersystem, das auf Unix-Workstations verwendet wurde.
Die Hinwendung zu wahrnehmungsmäßig gleichförmigen Farbräumen ist das nächste Kapitel in der Geschichte der Webfarben. Herkömmliches RGB und HSL sind mathematisch einfach, aber wahrnehmungsmäßig ungleichförmig: Ein Schritt von zehn Helligkeitseinheiten in HSL sieht je nach Farbton sehr unterschiedlich aus, was zuverlässige Barrierefreiheitsberechnungen erschwert. Die Spezifikation CSS Color Level 4 führt OKLCH und OKLAB ein, Farbräume, die so gestaltet sind, dass gleiche numerische Unterschiede gleichen wahrgenommenen Unterschieden entsprechen. Diese Räume werden in modernen Browsern bereits unterstützt und stellen die bedeutendste Weiterentwicklung in der Art und Weise dar, wie Entwickler Farbe angeben, seit das ursprüngliche Hex-Format vor dreißig Jahren eingeführt wurde.