Zum Inhalt springen
Utilizy

Farbkonverter & Farbwähler

HEX, RGB, HSL — inklusive Kontrastprüfung

Läuft in Ihrem Browser

Eingabe

Ergebnis

Ergebnis

#1FA89C
  • HEX#1FA89C
  • RGBrgb(31, 168, 156)
  • HSLhsl(175, 69%, 39%)
  • CMYKcmyk(82%, 0%, 7%, 34%)

Hellere und dunklere Töne (klicken, um zu dieser Farbe zu springen)

Kontrast auf Weiß
2.94Unter dem Standard
Kontrast auf Schwarz
7.14AAA

WCAG: Fließtext braucht 4,5:1 (AA), 7:1 für AAA. CMYK ist nur ein Richtwert — Farbprofile bleiben unberücksichtigt.

Design-Tools sprechen HEX, CSS-Animationen wollen HSL, und Canvas-Code will RGB-Kanäle. Wählen Sie eine Farbe einmal aus und erhalten Sie jede Notation — dazu die Kontrastwerte, die darüber entscheiden, ob Text darauf lesbar ist.

So funktioniert es

  1. 1 Wählen Sie eine Farbe oder fügen Sie einen Code in beliebigem Format ein.
  2. 2 Alle übrigen Notationen erscheinen sofort.
  3. 3 Nutzen Sie die Abstufung heller und dunkler Töne für eine stimmige Palette.
  4. 4 Prüfen Sie die Kontrastwerte, bevor Sie die Farbe hinter Text einsetzen.

Häufige Fragen

Welches Kontrastverhältnis brauche ich?

WCAG AA verlangt 4,5:1 für Fließtext und 3:1 für große Schrift. AAA fordert 7:1. Unter 3:1 ist der Text für viele Menschen wirklich schwer lesbar, nicht bloß suboptimal.

Warum HSL statt HEX verwenden?

HSL trennt den Farbton von Sättigung und Helligkeit. Eine Farbe 10 % heller zu machen ist damit eine einzige Zahl statt Rätselraten über drei Kanäle. Genau deshalb bauen Designsysteme ihre Skalen in HSL.

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

Nur als grober Anhaltspunkt. Die echte Umrechnung hängt von Papier, Farbe und Farbprofil ab. Für alles, was in den Druck geht, holen Sie die Werte besser aus der Druckerei als aus einer Formel.

Passt gut dazu