Farbkonverter 🔒 Ihre Daten verlassen niemals Ihren Browser.
HEX ↔ RGB ↔ HSL, mit Live-Vorschau und Farbwähler.
Kontrast-Prüfer
Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
Schattierungen & Tönungen
Wählen Sie eine Stufe, um sie als aktuelle Farbe zu laden.
Über dieses Tool
Fügen Sie eine Farbe in beliebigem CSS-Format ein — Hex (#1e90ff oder #19f), rgb(), hsl() oder ein benannter Farbname wie dodgerblue — und erhalten Sie alle Formate mit Ein-Klick-Kopie plus Live-Farbfeld. HEX exportieren Design-Tools, RGB wollen Canvas und JS-APIs, HSL verstehen Menschen (Farbton, Sättigung, Helligkeit).
Die Konvertierung nutzt die CSS-Engine des Browsers: Alles, was in einem Stylesheet gültig ist, funktioniert hier. 100 % clientseitig.
Häufige Fragen
Werden meine Farbdaten irgendwohin gesendet?
Nein. Jede Umrechnung, Kontrastprüfung und Palette wird lokal in Ihrem Browser berechnet — nichts von dem, was Sie eingeben, verlässt Ihr Gerät.
Was ist der Unterschied zwischen HSL und HSV?
Beide beschreiben Farbton und Sättigung, aber der dritte Wert von HSL ist die Helligkeit (Nähe zu Schwarz oder Weiß), während der von HSV der „Wert“ ist (Nähe nur zu Schwarz, oben bleibt es maximal hell). HSV entspricht oft den Farbwählern in Design-Tools, HSL oft den CSS-Konventionen.
Warum hat mein Hex-Code 8 statt 6 Stellen?
Das zusätzliche Paar kodiert Alpha (Transparenz) als #rrggbbaa. Es erscheint nur, wenn die Eingabefarbe einen Alphakanal unter 1 hat — vollständig deckende Farben bleiben bei 6 Stellen.
Was bedeuten die AA- und AAA-Badges unter dem Kontrast-Prüfer?
Das sind die WCAG-2-Kontrastschwellen: AA ist das Minimum, das die meisten Websites erreichen sollten (4,5:1 für normalen Text, 3:1 für großen Text oder UI-Elemente), AAA ist das strengere Ziel (7:1 / 4,5:1). Ein grünes Badge bedeutet, dass Ihre Vordergrund-/Hintergrund-Kombination diese Stufe besteht.
Was ist OKLCH und warum sollte ich es statt HSL verwenden?
OKLCH ist ein perzeptuell gleichmäßiger Farbraum — gleiche Schritte bei Helligkeit oder Chroma wirken für das menschliche Auge gleich unterschiedlich, was HSL nicht garantiert. Es wird in modernem CSS zunehmend verwendet, um Farbskalen und Farbverläufe ohne unerwartete dunkle oder trübe Stellen zu erstellen.