Farbcode-Umrechner

Über das Tool „Farbcode-Umrechner“

Der Farbcode-Umrechner wandelt eine Farbe in alle drei gängigen Web-Formate um: HEX (#FF8800), RGB (rgb(255, 136, 0)) und HSL (hsl(32, 100%, 50%)). Geben Sie einen Code in einem beliebigen Format ein oder wählen Sie eine Farbe und kopieren Sie das Format, das Sie für CSS, ein Designprogramm oder Code brauchen.

Außerdem prüft er den Kontrast. Geben Sie eine Textfarbe und eine Hintergrundfarbe ein, um ihr WCAG-Kontrastverhältnis zu sehen und ob sie für normalen und großen Text die Stufen AA und AAA erfüllen, damit Ihr Text für alle gut lesbar bleibt.

Alles läuft in Ihrem Browser; nichts, was Sie eingeben, wird irgendwohin gesendet.

Anleitung

1. Geben Sie einen Farbcode wie #777, rgb(0 128 255) oder hsl(120, 50%, 50%) ein oder nutzen Sie die Farbauswahl.
2. Lesen Sie die Farbe als HEX, RGB und HSL neben ihrer Vorschau ab.
3. Klicken Sie neben dem gewünschten Format auf „Kopieren“.
4. Geben Sie für den Kontrast eine Textfarbe (oder lassen Sie das Feld leer, um die Farbe oben zu verwenden) und eine Hintergrundfarbe ein.
5. Lesen Sie das Kontrastverhältnis und die Ergebnisse für AA und AAA bei normalem und großem Text ab.

Funktionen

• HEX, RGB und HSL: Liest kurzes und langes HEX, rgb() und hsl() mit Kommas oder Leerzeichen sowie drei einfache Zahlen.
• Farbauswahl: Wählen Sie eine Farbe visuell aus und erhalten Sie sofort ihre Codes.
• Kontrastverhältnis: Das WCAG-2-Kontrastverhältnis zweier beliebiger Farben, von 1:1 bis 21:1.
• AA und AAA: Bestanden oder nicht bestanden für normalen und großen Text auf beiden Stufen.
• Klare Fehlermeldungen: Sagt, welcher Teil eines Codes falsch ist, etwa ein Rotwert über 255.

Beispiele

Einschränkungen und Hinweise

• Farben mit Transparenz (Alpha), etwa #FF000080 oder rgba(), werden nicht unterstützt.
• Farbnamen (red, blue), CMYK, LAB und andere Farbräume werden nicht umgerechnet.
• HSL-Werte werden auf ganze Zahlen gerundet, deshalb kann sich beim Zurückrechnen ein Kanal um einige Stufen verschieben.
• Die Kontrastprüfung folgt WCAG 2.x; sie beurteilt weder Schriftstärke und -größe noch Farbfehlsichtigkeit für Sie.

Häufige Fragen