Farbkonverter für echte UI-Arbeit

Rechnen Sie Farbwerte um, prüfen Sie Kontrast und testen Sie verwandte Paletten, bevor ein Design-Token in die Produktion wandert.

Klicken, um eine Farbe auszuwählen
4.70vs Black
4.46vs White
WCAG-Kontrastprüfung
Ein Kontrastverhältnis von 4,5:1 ist die übliche WCAG-Basis für normalen Fließtext. Großer Text hat eine niedrigere Schwelle, aber schwacher Kontrast trifft echte Nutzer trotzdem.
HEX
RGB
HSL
CMYK

Empfohlene Farbbeziehungen

Komplementär
#6366f1
#f1ef63
Analog
#63acf1
#6365f1
#a863f1
Abstufungen
#6467f2
#2529ec
#1013bd
#0b0d7e
#05063f

Kurzüberblick zu Farbformaten

HEX

Ein kompaktes Webformat, meistens als sechsstelliger hexadezimaler Wert geschrieben.

RGB

Ein bildschirmorientiertes Farbmodell auf Basis von roten, grünen und blauen Lichtwerten.

HSL

Ein besser lesbares Modell für Farbton, Sättigung und Helligkeit. Praktisch, wenn Sie hellere, dunklere oder verwandte UI-Zustände bauen.

CMYK

Ein druckorientiertes Modell aus Cyan, Magenta, Gelb und Schwarz. Helle Bildschirmfarben lassen sich nicht immer exakt in Druckfarben übertragen.

Kontrast

Kontrast beeinflusst Formulare, Dashboards, Preistabellen, Fehlerzustände und jede Oberfläche, die schnell gelesen werden muss.

Häufige Fragen

Warum weichen RGB- und CMYK-Werte manchmal leicht ab?

Bildschirmfarben und Druckfarben arbeiten in unterschiedlichen Farbräumen. Einige RGB-Farben können in CMYK nicht exakt wiedergegeben werden.

Was bedeutet der WCAG-Kontrastwert?

Er misst, wie gut Vordergrund- und Hintergrundfarbe zusammen lesbar sind. Höhere Werte bedeuten in der Regel bessere Lesbarkeit für Text.

Sollten Markenfarben für Fließtext verwendet werden?

Nicht automatisch. Eine Markenfarbe kann als Logo oder Akzent funktionieren und als Fließtext trotzdem scheitern. Für Lesbarkeit sind oft kräftigere Neutraltöne oder angepasste Varianten nötig.

Warum sehen Farben in verschiedenen Tools anders aus?

Displays, Farbprofile, Browser und Druck-Workflows können denselben Zahlenwert unterschiedlich darstellen. Nutzen Sie den Konverter als Arbeitsgrundlage und testen Sie im Zielmedium.