Color Converter
Color Harmony
WCAG Contrast Checker
Normal text — The quick brown fox jumps over the lazy dog.
Large text — 18pt / Bold 14pt
Was ist ein Farbkonverter?
Dieselbe Farbe lässt sich in mehreren Notationen schreiben: HEX (#3366ff) für CSS und Designübergabe, RGB (51, 102, 255) für Bildschirme und APIs und HSL (Farbton, Sättigung, Helligkeit), mit dem sich Aufhellen oder Entsättigen viel leichter denken lässt. Ein Konverter wechselt zwischen diesen Notationen, ohne die Farbe selbst zu ändern.
Beispiel: #3366FF bedeutet R=0x33=51, G=0x66=102 und B=0xFF=255, also rgb(51, 102, 255). Mit max=255 und min=51 ergibt sich die Helligkeit L=(255+51)/2/255=60%. Der Blaukanal dominiert, daher ist die Sättigung 100% und der Farbton liegt im blauen Bereich bei 225° — das ergibt hsl(225, 100%, 60%). Weißer Text auf diesem Blau erreicht ein WCAG-Kontrastverhältnis von etwa 4,7:1 und liegt damit knapp über den 4,5:1 für AA-Fließtext.
So verwendest du den Farbkonverter
- Tippe oder füge eine Farbe als #hex, rgb() oder hsl() ein oder wähle sie im Farbkreis.
- Lies die umgerechneten Werte in den anderen Notationen und kopiere die benötigte.
- Wechsle zwischen komplementärer und triadischer Harmonie, um passende Paletten zu erkunden.
- Gib Vordergrund- und Hintergrundfarbe ein, um das WCAG-Kontrastverhältnis für normalen und großen Text zu prüfen.
Häufige Fragen zu Farbe und Kontrast
Welches Kontrastverhältnis brauche ich für Barrierefreiheit?
WCAG 2 AA verlangt mindestens 4,5:1 für normalen Fließtext und 3:1 für großen Text (18pt bzw. 14pt fett). Stufe AAA erhöht das auf 7:1 und 4,5:1. Die Prüfung zeigt beide Schwellen live an.
Worin unterscheiden sich HEX, RGB und HSL?
Sie kodieren dieselbe Farbe unterschiedlich. HEX ist kompakt und in CSS verbreitet, RGB entspricht direkt den Bildschirmkanälen, und HSL beschreibt Farbton, Sättigung und Helligkeit — viel leichter im Code anzupassen.
Was sind Komplementär- und Triadfarben?
Die Komplementärfarbe liegt 180° gegenüber auf dem Farbkreis und erzeugt starken Kontrast; eine Triadpalette nutzt drei Farben im Abstand von 120° für ein lebendiges, aber ausgewogenes Schema.
