So verwenden Sie Farbpaletten & Kontrastprüfung
- 1
Mit einer Farbe beginnen
Geben Sie eine Basisfarbe ein oder wählen Sie sie aus. Wählen Sie dann eine Harmonie wie Analog, Triadisch oder Geteilt komplementär – oder mischen Sie eine zufällige Palette.
- 2
Sperren und verfeinern
Sperren Sie die Farbfelder, die Ihnen gefallen, bevor Sie erneut mischen. Sie können jedes Farbfeld direkt bearbeiten oder die fünf dominanten Farben aus einem Foto herausziehen.
- 3
Lesbarkeit prüfen
Öffnen Sie Kontrast, um Text auf Hintergrund nach WCAG 2.2 AA und AAA zu testen, übernehmen Sie einen Korrekturvorschlag und sehen Sie sich die Palette in der Vorschau für Farbfehlsichtigkeit an.
- 4
Exportieren
Kopieren Sie CSS-Variablen, ein Tailwind-v4-Theme oder eine v3-Konfiguration, SCSS oder JSON mit Abstufungen von 50–950, oder laden Sie PNG-Farbfelder herunter.
Limits und Pro
Alles ist kostenlos: Paletten mit 5 Farben, 6 Harmonien, unbegrenztes Mischen und Exportieren, Bilder bis 50 MB für die Farbextraktion, PNG-Farbfelder mit 1600 Pixeln Breite.
Über Farbpaletten & Kontrastprüfung
Der Farbpaletten-Generator erstellt ein Farbschema aus fünf Farben und alles, was ein Designsystem darum herum braucht. Die Harmonien drehen den Basisfarbton auf dem HSL-Farbkreis: Analog geht 30° nach beiden Seiten, Komplementär ergänzt den gegenüberliegenden Farbton, Geteilt komplementär nimmt die beiden Farbtöne neben dem Gegenüber, Triadisch verteilt drei Farbtöne im Abstand von 120°, Tetradisch nutzt ein Quadrat mit 90° und Monochrom behält einen Farbton in fünf Helligkeitsstufen. Der Zufallsmodus berücksichtigt gesperrte Farbfelder, und die Bildoption gruppiert die Pixel eines Fotos in OKLab, um die fünf häufigsten, klar unterscheidbaren Farben zu finden.
Für jede Farbe erzeugt der Tab Abstufungen eine Skala mit 11 Stufen von 50–950 in OKLCH, wobei die Stufe, die Ihrer Farbe am nächsten liegt, den exakten Wert erhält. Alternativ gibt es die 13 Töne des Material-3-Systems HCT samt den fünf Schlüsselpaletten, die ein Material-Theme ableiten würde. Der Kontrastprüfer nutzt die WCAG-2.2-Formel für die Luminanz, rundet ein Verhältnis nie auf und schlägt die nächstliegende bestandene Farbe vor, indem nur die Helligkeit verändert wird und der Farbton erhalten bleibt. Ein Raster zeigt das Verhältnis jedes Paars der Palette gegenüber Weiß und Schwarz.
Die Simulationen decken Protanopie, Deuteranopie, Tritanopie und Achromatopsie mit den Machado-Matrizen ab und markieren Farbfelder, die ineinander verschwimmen. Exporte benennen Farben nach Farbton und übernehmen Ihre eigenen Namen. Das Tool beurteilt nicht, ob Farben zu einer Marke passen, und die Simulationen nähern an, wie Menschen mit Farbfehlsichtigkeit sehen; sie ersetzen keinen Test mit betroffenen Personen.
Datenschutz
Alle Farbberechnungen, Kontrastprüfungen und Bildanalysen laufen in diesem Tab: Ein Foto, aus dem Sie Farben gewinnen, wird von Ihrer Festplatte in eine kleine Zeichenfläche gelesen und nicht hochgeladen. Die Palette kann in der Seitenadresse gespeichert werden, damit ein kopierter Link sie wieder öffnet; auf einem Server wird nichts gespeichert.
Funktionen
Sechs Harmonien und Bildfarben
Von Analog bis Tetradisch aus einer Basisfarbe, zufälliges Mischen mit Sperren oder die dominanten Farben eines Fotos.
WCAG-2.2-Kontrast mit Korrekturen
AA und AAA für normalen und großen Text sowie UI-Grafiken, die nächstliegende bestandene Farbe ist nur einen Klick entfernt.
Exporte für Entwickler
CSS-Variablen, Tailwind v4 und v3, SCSS und JSON in HEX, RGB, HSL oder OKLCH sowie PNG-Farbfelder.