Zum Inhalt springen
EVOA Toolbox

Farbpaletten-Generator

Erzeugen Sie Farbharmonien aus einer Grundfarbe, fixieren Sie Favoriten, prüfen Sie den WCAG-Kontrast und exportieren Sie nach CSS, Tailwind, JSON oder PNG.

Lokal in Ihrem Browser verarbeitet. Ihr Text wird nicht hochgeladen.

Tool wird geladen…

Was dieses Tool macht

Wählen Sie eine Grundfarbe und erhalten Sie sofort eine Palette nach Regeln der Farbenlehre: komplementär, analog, triadisch, tetradisch, geteilt-komplementär, monochromatisch oder eine Reihe von Schattierungen und Aufhellungen. Die Farbtonberechnung erfolgt in HSL, und jedes Farbfeld zeigt seinen Wert als HEX, RGB, HSL und OKLCH an, sodass Sie das Format kopieren können, das Ihr Stack verwendet.

Jedes Farbfeld nennt außerdem sein Kontrastverhältnis zu weißem und schwarzem Text und ob es WCAG AA (4,5:1), AAA (7:1) oder nur die Schwelle für großen Text (3:1) erreicht. Das hilft bei der Wahl von Schaltflächen- und Hintergrundfarben. Mit Zufall können Sie Paletten erkunden: Fixieren Sie die Farben, die Ihnen gefallen, und der Rest ändert sich um sie herum.

Wenn Sie zufrieden sind, exportieren Sie die Palette als CSS Custom Properties, als Tailwind-v4-@theme-Block, als Tailwind-v3-Konfigurationserweiterung, als JSON oder als PNG-Bild mit Farbfeldern. Alles läuft lokal, und es wird nichts versendet.

So verwenden Sie es

  1. 1Wählen Sie eine Grundfarbe mit dem Farbwähler oder geben Sie einen Hex-Wert wie #2f5bea ein.
  2. 2Wählen Sie eine Harmonie. Mit dem Schieberegler für die Anzahl stellen Sie monochromatische Paletten, Schattierungen und Aufhellungen ein.
  3. 3Klicken Sie auf Zufall, um Paletten zu erkunden, und fixieren Sie Farben, die Sie behalten möchten.
  4. 4Prüfen Sie die Kontrastangaben jedes Farbfelds, bevor Sie es für Text oder Schaltflächen verwenden.
  5. 5Kopieren Sie die Werte einzelner Farbfelder oder exportieren Sie die gesamte Palette im gewünschten Format.

Unterstützte Formate

Eingabe: HEX-Farben (#rgb oder #rrggbb). Ausgabe: CSS-Variablen, Tailwind-v3/v4-Snippets, JSON und PNG.

Datenschutz

Dieses Tool läuft in Ihrem Browser. Die von Ihnen eingegebenen Daten werden auf Ihrem Gerät verarbeitet und nicht an unsere Server gesendet.

Einschränkungen

  • Harmonien sind rechnerische Vorschläge, keine fertigen Designs. Passen Sie sie nach Augenmaß an und testen Sie sie im Kontext.
  • Der Kontrast wird nur für die Farbe des Farbfelds gegen reines Weiß und reines Schwarz gemessen. Prüfen Sie Ihre tatsächlichen Text-Hintergrund-Paarungen separat.
  • Das Farbempfinden unterscheidet sich je nach Bildschirm und Farbprofil. Die Werte gelten für sRGB.
  • Alpha- bzw. Deckkraftwerte sind nicht Teil der Palette.

FAQ

Was ist der Unterschied zwischen analog und triadisch?

Analoge Farben liegen im Farbkreis nebeneinander (30 Grad Abstand) und wirken ruhig und stimmig. Triadische Farben liegen 120 Grad auseinander und bieten mehr Abwechslung und Kontrast.

Was bedeuten AA und AAA?

Das sind WCAG-2-Kontraststufen für Text. AA verlangt 4,5:1 für normalen Text (3:1 für großen Text), AAA verlangt 7:1 für normalen Text. Das Tool zeigt für jedes Farbfeld die höchste Stufe an, die es gegen Weiß und gegen Schwarz erreicht.

Wie funktioniert das Fixieren?

Ein fixiertes Farbfeld behält seine Farbe, wenn Sie auf Zufall klicken oder die Grundfarbe bzw. die Harmonie ändern. So können Sie eine Palette um Farben aufbauen, die Ihnen bereits gefallen.

Welchen Export soll ich für Tailwind verwenden?

Verwenden Sie die v4-@theme-Ausgabe mit Tailwind 4 (CSS-first-Konfiguration) und die v3-Konfigurationsausgabe für Projekte, die noch tailwind.config.js nutzen.

Ähnliche Tools