DE

Farbumrechner

Gib eine beliebige CSS-Farbe ein oder wähle eine aus, und du bekommst sie sofort in allen Formaten. Prüfe den Kontrast zu einem Hintergrund und erzeuge hellere und dunklere Abstufungen.

Kostenlos und privat. Alles läuft in deinem Browser, nichts wird hochgeladen.

So funktioniert es

  1. Farbe eingebenGib einen Wert wie #0d6b57, rgb(13 107 87) oder teal ein, oder nutze den Farbwähler.
  2. Gewünschtes Format kopierenAlle Formate ändern sich sofort mit, und jedes lässt sich mit einem Klick kopieren.
  3. Kontrast prüfenLege eine Hintergrundfarbe fest und lies die WCAG-Ergebnisse ab.

Alle Formate aus einer Eingabe

Designer geben HEX-Werte weiter, CSS braucht rgb() oder hsl(), Design-Tokens nutzen immer öfter OKLCH, und Druckereien fragen nach CMYK. Gib die Farbe in einem beliebigen Format ein, das der Browser versteht, auch als Name wie rebeccapurple, und alle anderen erscheinen sofort, fertig zum Kopieren.

OKLCH ist ein wahrnehmungsbasierter Farbraum, den alle modernen Browser unterstützen: Gleiche Schritte in der Helligkeit sehen für das Auge auch gleich aus. Deshalb wird die Palette der Abstufungen unten in OKLCH erzeugt und nicht durch Mischen mit Weiß und Schwarz.

Barrierefreier Kontrast

Text muss sich deutlich vom Hintergrund abheben, damit ihn auch Menschen mit eingeschränktem Sehvermögen lesen können. Die Kontrastprüfung berechnet das WCAG-Verhältnis und zeigt, ob das Farbpaar AA (4,5:1 für normalen Text, 3:1 für großen Text) und AAA (7:1 und 4,5:1) erfüllt. Halbtransparente Farben werden zuerst mit dem Hintergrund gemischt, so wie es der Browser auch tut.

Häufige Fragen

Welche Farbformate kann ich eingeben?

Alles, was in CSS gültig ist: HEX mit 3, 4, 6 oder 8 Stellen, rgb(), hsl(), hwb(), lab(), oklch() und Farbnamen.

Ist der CMYK-Wert für den Druck exakt?

Es ist eine einfache Umrechnung ohne Druckerprofil. Für professionellen Druck nimm die CMYK-Werte aus dem Profil deiner Druckerei.

Welches Kontrastverhältnis brauche ich?

WCAG AA verlangt 4,5:1 für normalen Text und 3:1 für großen Text und Bedienelemente.

Warum ist OKLCH wichtig?

Es entspricht der Art, wie Menschen Helligkeit wahrnehmen. Paletten und Farbverläufe in OKLCH wirken deshalb gleichmäßig.