Pick 1-2 brand colors, then build a complementary palette around them. Use a bold primary with neutral supporting colors.
60% dominant color (backgrounds), 30% secondary color (cards, sections), 10% accent color (buttons, links).
Ensure text-to-background contrast ratios meet WCAG AA (4.5:1 for normal text). Test with colorblindness simulators.
3-5 colors is optimal for most projects. Too many colors create visual noise. Use shades and tints of the same hue for variety.
Beginnen Sie mit Ihren Markenwerten und Ihrer Zielgruppe. Nutzen Sie Farbpsychologie als Leitfaden: Blau vermittelt Vertrauen und Professionalität, Grün steht für Wachstum und Natur, Rot signalisiert Dringlichkeit oder Leidenschaft, Lila impliziert Luxus oder Kreativität. Begrenzen Sie Ihre primäre Palette auf 3–5 Farben. Stellen Sie ausreichend Kontrast (4,5:1-Verhältnis) für die Barrierefreiheit sicher.
Die 60-30-10-Regel ist ein Designprinzip für ausgewogene Farbverwendung: 60% Hauptfarbe (Hintergründe, große Flächen), 30% Sekundärfarbe (Karten, Seitenleisten, UI-Elemente), 10% Akzentfarbe (Schaltflächen, Highlights, Call-to-Actions). Dies schafft visuelle Hierarchie unter Beibehaltung der Harmonie. Neutrale Farben bilden oft die 60%-Basis im modernen UI-Design.
WCAG 2.1 erfordert ein Mindestkontrahstverhältnis von 4,5:1 für normalen Text und 3:1 für großen Text. Verwenden Sie Tools wie WebAIM Contrast Checker oder Browser-DevTools zur Überprüfung. Verlassen Sie sich nicht ausschließlich auf Farbe zur Informationsvermittlung (verwenden Sie auch Symbole/Text), testen Sie mit Farbenblind-Simulatoren und stellen Sie sicher, dass interaktive Elemente sichtbare Fokuszustände haben.
Für Webentwicklung: Hex-Codes (#RRGGBB) für CSS, RGB/HSL-Werte für dynamische Manipulation und CSS Custom Properties für Theming. Für Design-Tools: die meisten akzeptieren Hex-Codes; Figma und Sketch unterstützen Farbbibliotheken. Für Tailwind CSS: Farben in tailwind.config.js unter theme.extend.colors definieren. Für Branding: Pantone (Druck), CMYK (Druck) und RGB (Bildschirm) Werte einschließen.