Farbpaletten fur Corporate Design und Dark Mode in DACH
Im deutschsprachigen Raum legen Unternehmen grossen Wert auf klare, systematische Corporate-Design-Vorgaben. Dieser Generator erstellt aus einer Ausgangsfarbe eine vollstandige Palette mit Abstufungen, Komplementarfarben und analogen Tonen , ein direkter Input fur Tailwind-CSS-Konfigurationen (tailwind.config.js) oder Design-Token-Systeme. Dark Mode ist in DACH-Projekten stark nachgefragt: das Tool generiert Paletten fur helle und dunkle Hintergrunde, sodass beide Varianten gepruft werden konnen.
Die BITV 2.0 schreibt fur offentliche Websites in Deutschland ein Kontrastverhaltnis von mindestens 4,5:1 vor. Jede generierte Farbe mit dem Kontrast-Checker prufen, bevor sie auf Texte oder interaktive Elemente angewendet wird. Farbtone um 50% Helligkeit bestehen oft weder den Weiss-auf-Farbe- noch den Schwarz-auf-Farbe-Test.
WCAG-Kontrastanforderungen / BITV 2.0
| Stufe | Normaler Text | Grosser Text (18pt+ oder 14pt fett) |
|---|---|---|
| AA (Minimum) | 4,5:1 | 3:1 |
| AAA (Erweitert) | 7:1 | 4,5:1 |
Grenzen der Farbharmonie-Theorie
Harmonieschemata (Komplementar, Triadisch usw.) beschreiben mathematische Beziehungen im HSL-Farbkreis , kein asthetisch uberzeugendes Ergebnis in jedem Kontext ist garantiert. Ein Komplementarpaar aus Orange und Blau ist technisch korrekt, kann aber im Kontext einer Bank oder Versicherung unpassend wirken. Die generierte Palette als Ausgangspunkt verwenden und nach Marke, Branche und Zielgruppe anpassen.
Von der Palette zu Design-Tokens
Die generierten CSS Custom Properties in den :root-Block des Stylesheets kopieren. Fur Token-Workflows lassen sich die HEX-Werte direkt in Style Dictionary oder Figma Tokens importieren. Der Farbpaletten-Extraktor ist ein hilfreicher Einstiegspunkt: aus einem Bild extrahieren, dann hier die Tiefen und Abstufungen verfeinern.