Farbkonverter (HEX, RGB, HSL, CMYK, OKLCH)
Gib eine Farbe in beliebigem Format ein – #hex, rgb(), hsl(), hwb(), oklch() oder einen Namen wie „tomato“ – und erhalte sofort alle Entsprechungen, den WCAG-Kontrast zu Weiß und Schwarz sowie eine Skala aus Aufhellungen und Abdunklungen.
Zu 100 % in deinem Browser verarbeitet
Ctrl + Enter ausführenCtrl + C Ergebnis kopieren
So funktioniert es
- 1Gib eine Farbe in beliebigem Format ein oder wähle sie mit dem Farbwähler.
- 2Prüfe die Entsprechungen in HEX, RGB, HSL, HSV, HWB, CMYK und OKLCH.
- 3Klicke auf ein Format, um es in die Zwischenablage zu kopieren.
- 4Prüfe den WCAG-Kontrast und nutze die Abstufungen für Varianten.
Anwendungsfälle
- Farben aus Figma oder Photoshop (HEX) in modernes CSS (OKLCH, HSL) übertragen.
- Ungefähre CMYK-Werte für Drucksachen vorbereiten.
- Prüfen, ob eine Textfarbe AA- oder AAA-Barrierefreiheit erfüllt.
- Den ähnlichsten CSS-Farbnamen finden.
Häufig gestellte Fragen
Was ist der Unterschied zwischen HEX, RGB und HSL?
Sie beschreiben dieselbe Farbe unterschiedlich. HEX und RGB geben den Anteil von Rot, Grün und Blau an (HEX hexadezimal). HSL nutzt Farbton, Sättigung und Helligkeit – intuitiver, um Varianten eines Farbtons zu erstellen.
Was ist OKLCH und warum sollte man es nutzen?
Ein wahrnehmungsbasierter Farbraum, den moderne Browser unterstützen: Zwei Farben mit gleichem „L“ wirken gleich hell, was bei HSL nicht gilt. Ideal für konsistente Paletten und Designsysteme.
Ist der CMYK-Wert für den Druck exakt?
Es ist eine näherungsweise mathematische Umrechnung. Echtes CMYK hängt vom Farbprofil der Druckerei und vom Papier ab – stimme die Endwerte mit deinem Druckdienstleister ab.
Was bedeuten AA und AAA beim Kontrast?
Das sind WCAG-Stufen: AA verlangt mindestens 4,5:1 für normalen Text (3:1 für großen Text), AAA verlangt 7:1. Je höher das Verhältnis, desto besser lesbar ist der Text.