Farbformate im Frontend umrechnen
Ein HEX aus dem Design schnell in RGB-, HSL- und CMYK-Referenzwerte übersetzen.
Wird geladen…
Guide
Die Farbwerkzeuge parsen CSS-Farbwerte mit colord samt CMYK-, Barrierefreiheits- und Farbmisch-Plugins, zeigen HEX, RGB, HSL, HSV und CMYK und erzeugen je 10 Stufen in Richtung Weiß und Schwarz. Dazu kommen ein Kontrastprüfer für Vordergrund und Hintergrund und, wenn der Browser es unterstützt, die Bildschirmpipette per EyeDropper.
Aktualisiert am 2026-09-102 min read
rgb(), hsl() oder einen Farbnamen eingeben oder den nativen Farbwähler nutzen.| Eingabe | Ausgabe | Erläuterung |
|---|---|---|
#6366f1 |
HEX/RGB/HSL/HSV/CMYK | eine Farbe in mehreren Formaten |
| schwarzer Text und weißer Hintergrund | 21:1 | hoher Kontrast |
| ungültige CSS-Farbe | Fehlermeldung | es wird keine Reparatur geraten |
colord ab; das Werkzeug parst nicht jede künftige Farbfunktion der Browser.colord.tints(10) bzw. shades(10) und keine feste Palette eines Designsystems.Ein HEX aus dem Design schnell in RGB-, HSL- und CMYK-Referenzwerte übersetzen.
Markenfarbe und Hintergrundfarbe eingeben und sofort sehen, ob AA/AAA erreicht wird.
Fehlt die EyeDropper-API im aktuellen Browser, ist der Button deaktiviert; nutze dann die Entwicklerwerkzeuge des Browsers oder eine Umgebung mit dieser API.
Nein, hier findet nur eine mathematische Umrechnung der Farbdarstellung statt – ohne ICC-Farbmanagement, Papier- oder Druckgeräteprofile.
Die Farbberechnung läuft lokal im Browser; EyeDropper gibt nach dem ausdrücklichen Aufruf durch den Nutzer einen einzelnen Farbwert zurück und überträgt keine Bildschirminhalte.
Aktualisiert am 2026-09-10
HEX/RGB/HSL/HSV/CMYK ineinander umrechnen, Farbabstufungen erzeugen, Kontrast prüfen und Farben am Bildschirm aufnehmen
Dieses Werkzeug ist noch nicht vollständig übersetzt; einige Inhalte nutzen die Ausgangssprache oder die Rückfallsprache.
Unterstützt jedes CSS-Farbformat: HEX, rgb(), hsl(), Farbnamen und mehr
Hinweis: Das Aufnehmen vom Bildschirm erfordert einen Browser mit EyeDropper API (Chrome / Edge 95+)
| HEX | #6366f1 | |
| RGB | rgb(99, 102, 241) | |
| HSL | hsl(239, 84%, 67%) | |
| HSV | hsv(239, 59%, 95%) | |
| CMYK | cmyk(59%, 58%, 0%, 5%) |
Je 10 Stufen in Richtung Weiß (tints) und Schwarz (shades); zum Kopieren auf ein Farbfeld klicken
Bewertet die Lesbarkeit von Text auf dem Hintergrund nach WCAG 2.0
Als großer Text gilt Text ab 18 pt (etwa 24 px) oder ab 14 pt in Fettschrift