Farben wählen, abstufen und auf Kontrast prüfen.
Wähle eine Farbe und erhalte sofort HEX, RGB & HSL, eine komplette Abstufung (Shades & Tints), harmonische Paletten und den WCAG-Kontrast gegen Weiß und Schwarz — kopierbar als CSS-Variablen oder Tailwind-Config. Läuft komplett im Browser.
1 Farbe wählen
2 Formate
3 Abstufungen (Shades & Tints)
4 Harmonien
5 Kontrast (WCAG)
6 Export
Farbpaletten, Abstufungen und barrierefreier Kontrast
Dieses Werkzeug macht aus einer einzigen Farbe ein komplettes System: eine gleichmäßige Abstufung von dunkel nach hell für UI-Zustände, passende Harmonien (Komplementär, Analog, Triadisch) und die Prüfung, ob Text auf der Farbe die WCAG-Richtlinien erfüllt. Alle Berechnungen laufen lokal im Browser — es wird nichts hochgeladen.
Häufige Fragen
Was ist der Unterschied zwischen Shades und Tints?
Ein Shade mischt die Farbe mit Schwarz (dunkler), ein Tint mit Weiß (heller). Die Abstufung von --color-50 bis --color-900 deckt beides in gleichmäßigen Schritten ab.
Wie wird der WCAG-Kontrast berechnet?
Aus der relativen Leuchtdichte beider Farben ergibt sich das Verhältnis (L_hell + 0,05) / (L_dunkel + 0,05). Ab 4,5:1 gilt normaler Text als AA-konform, ab 7:1 als AAA.
Was bedeuten die Harmonien?
Komplementär liegt gegenüber (+180°), Analog direkt daneben (±30°) und Triadisch im gleichseitigen Dreieck (±120°) auf dem Farbkreis — bewährte Ausgangspunkte für stimmige Paletten.