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.
Bitte Adblocker deaktivieren
Diese Werkzeuge sind komplett kostenlos und werden ausschließlich über Werbung finanziert. Mit aktivem Adblocker stehen die Tools leider nicht zur Verfügung.
2. Diese Seite neu laden
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.