Farbpaletten-Generator

Das passende Schema wählen

Praktische Palettenstruktur

Eine erzeugte Harmonie ist ein Ausgangspunkt, kein vollständiges Designsystem. Für produktive UI-Arbeit sollten Farben nach Rolle benannt werden: primary, secondary, accent, surface, border, text, success, warning und error. Neutrale Grautöne ergänzen Sie separat, weil sie meist genauer gesteuert werden müssen als ein farbtonbasierter Generator es leisten kann.

Verwenden Sie die erzeugten HEX-Farben zuerst direkt im Prototyp. Übernehmen Sie nur die Farben dauerhaft, die auf echten Screens, hellen und dunklen Hintergründen sowie in Hover- und Disabled-Zuständen funktionieren.

CSS-Variablen exportieren

Der Export-Schritt nutzt einfache Custom Properties:

:root {
  --palette-1: #6366F1;
  --palette-2: #818CF8;
  --palette-3: #4F46E5;
}

Benennen Sie diese Variablen in Ihre eigenen Systemnamen um, wenn Sie sie in CSS, Tailwind Theme Tokens oder eine Design-Token-Datei einfügen.

HEX, RGB und HSL

Eingabe und sichtbare Ausgabe sind HEX, weil dieses Format am schnellsten zwischen CSS, Design-Tools und Ticket-Kommentaren kopiert werden kann. Intern wird die Basisfarbe nach HSL umgerechnet, Farbton oder Helligkeit werden verschoben und das Ergebnis wird wieder als HEX ausgegeben. Wenn Sie RGB- oder HSL-Notation brauchen, konvertieren Sie die erzeugten HEX-Werte anschließend mit einem Farbcode-Konverter.

Kontrast und Barrierefreiheit

Harmonieschemata garantieren keine Barrierefreiheit. Prüfen Sie Farbkombinationen für Text, Bedienelemente und Diagramme mit einem Kontrastprüfer:

• Normaler Text vor Hintergrund: mindestens 4,5:1 für WCAG AA.
• Großer Text: mindestens 3:1.
• Wichtige nicht-textliche UI-Elemente wie Button-Ränder, Icons, Fokusindikatoren und Diagrammkanten: mindestens 3:1 zu angrenzenden Farben.

Verlassen Sie sich außerdem nicht nur auf den Farbton. Zwei Farben können als Farbfelder unterschiedlich aussehen und trotzdem bei kleinem Text, dünnen Icons oder Statuslabels versagen.

Tipps

• Beginnen Sie mit einer sinnvollen Basisfarbe, etwa einer vorhandenen Markenfarbe, Produktfarbe oder Kampagnenfarbe.
• Wählen Sie eine dominante Farbe und behandeln Sie die restlichen Farben als Unterstützung. Gleiches Gewicht wirkt in den meisten Interfaces zu geschäftig.
• Reduzieren Sie die Sättigung für große Flächen wie App-Hintergründe, Panels und Hero-Bereiche.
• Testen Sie nach dem Theming erneut. Eine Palette, die auf Weiß funktioniert, kann im Dark Mode oder in dichten Diagrammen scheitern.