Leitfaden für Farbpaletten und Farbkombinationen: Von der Farbtheorie zur professionellen UI-Farbgestaltung in der Praxis

Entwickler-Tools

Grundlagen der Farbtheorie

HSL-Farbmodell

H (Hue) Farbton: 0-360°, Winkel auf dem Farbkreis
S (Saturation) Sättigung: 0-100%, Grau → Reinfarbe
L (Lightness) Helligkeit: 0-100%, Schwarz → Weiß
Farbwert Farbe
0° / 360° Rot
60° Gelb
120° Grün
180° Cyan
240° Blau
300° Magenta

Farbkreis

         0° Rot
    300°       60°
   Magenta     Gelb
  240°         120°
    Blau       Grün
        180° Cyan

Fünf klassische Farbschemata

1. Monochromatische Farbkombination (Monochromatic)

Gleicher Farbton, unterschiedliche Sättigung und Helligkeit.

:root {
  --primary-50: hsl(220, 100%, 97%);   /* Sehr helles Blau */
  --primary-100: hsl(220, 100%, 94%);
  --primary-200: hsl(220, 100%, 88%);
  --primary-300: hsl(220, 100%, 78%);
  --primary-400: hsl(220, 100%, 68%);
  --primary-500: hsl(220, 100%, 58%);  /* Basis-Blau */
  --primary-600: hsl(220, 100%, 48%);
  --primary-700: hsl(220, 100%, 38%);
  --primary-800: hsl(220, 100%, 28%);
  --primary-900: hsl(220, 100%, 18%);  /* Sehr dunkles Blau */
}

Anwendung: Schlicht, professionell, starke Markenidentität

2. Analoge Farbkombination (Analogous)

Benachbarte Farben im 30°-Bereich auf dem Farbkreis.

:root {
  --analogous-1: hsl(200, 80%, 50%);  /* Blau */
  --analogous-2: hsl(220, 80%, 50%);  /* Blau-Violett */
  --analogous-3: hsl(240, 80%, 50%);  /* Violett */
}

Anwendung: Harmonisch, natürlich, warm

3. Komplementäre Farbkombination (Complementary)

Gegenüberliegende Farben bei 180° auf dem Farbkreis.

:root {
  --primary: hsl(220, 80%, 55%);    /* Blau */
  --complement: hsl(40, 80%, 55%);  /* Orange */
}

Anwendung: Hoher Kontrast, auffällig, CTA-Schaltflächen

4. Triadische Farbkombination (Triadic)

Drei Farben im gleichen Abstand von 120° auf dem Farbkreis.

:root {
  --triadic-1: hsl(0, 70%, 55%);    /* Rot */
  --triadic-2: hsl(120, 70%, 55%);  /* Grün */
  --triadic-3: hsl(240, 70%, 55%);  /* Blau */
}

Anwendung: Lebhaft, farbenfroh, Kinderprodukte

5. Geteilt-komplementäre Farbkombination (Split-Complementary)

Je 30° auf beiden Seiten der Komplementärfarbe.

:root {
  --primary: hsl(220, 80%, 55%);     /* Blau */
  --split-1: hsl(10, 80%, 55%);      /* Rot-Orange */
  --split-2: hsl(50, 80%, 55%);      /* Gelb-Orange */
}

Anwendung: Vielfältig aber nicht chaotisch, weicher als Komplementär

WCAG-Kontraststandards

Kontrastberechnung

Kontrast = (L1 + 0,05) / (L2 + 0,05)

L1 = Relative luminanz der helleren Farbe
L2 = Relative luminanz der dunkleren Farbe

Berechnung der relativen Luminanz:
L = 0,2126 × R + 0,7152 × G + 0,0722 × B
(R/G/B müssen zuerst sRGB-linearisiert werden)

WCAG 2.1 Standard

Stufe Fließtext Großer Text UI-Komponenten
AA 4,5:1 3:1 3:1
AAA 7:1 4,5:1 -

Großer Text: ≥18pt (24px) oder ≥14pt fett

Kontrastprüfung mit JavaScript

function getContrastRatio(color1: string, color2: string): number {
  const l1 = getRelativeLuminance(color1);
  const l2 = getRelativeLuminance(color2);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

function getRelativeLuminance(hex: string): number {
  const rgb = hexToRgb(hex);
  const [r, g, b] = [rgb.r / 255, rgb.g / 255, rgb.b / 255]
    .map(c => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

function meetsWcagAA(fg: string, bg: string, isLargeText = false): boolean {
  const ratio = getContrastRatio(fg, bg);
  return isLargeText ? ratio >= 3 : ratio >= 4.5;
}

Erstellung professioneller Farbpaletten

Farbskalen im Tailwind-CSS-Stil

function generatePalette(baseHue: number, baseSat: number) {
  const lightnesses = [97, 94, 88, 78, 68, 58, 48, 38, 28, 18];
  return lightnesses.map((l, i) => ({
    name: `${(i) * 100}`,
    value: `hsl(${baseHue}, ${baseSat}%, ${l}%)`,
  }));
}

// Blaue Palette generieren
const bluePalette = generatePalette(220, 80);
// 50: hsl(220, 80%, 97%)
// 100: hsl(220, 80%, 94%)
// ...
// 900: hsl(220, 80%, 18%)

OKLCH-Farbraum (gleichmäßiger)

/* OKLCH ist wahrnehmungsgleichmäßiger als HSL */
:root {
  --blue-50: oklch(97% 0.01 250);
  --blue-500: oklch(62% 0.19 250);
  --blue-900: oklch(30% 0.12 250);
}
Farbraum Wahrnehmungsgleichmäßigkeit Browserunterstützung
HSL ❌ Nicht gleichmäßig Alle
OKLCH ✅ Gleichmäßig Chrome 111+, Safari 15.4+
OKLAB ✅ Gleichmäßig Chrome 111+, Safari 15.4+

Farbkombination im Dunkelmodus

/* Hellmodus */
:root {
  --bg: #ffffff;
  --surface: #f5f5f5;
  --text: #1f2937;
  --text-secondary: #6b7280;
  --border: #e5e7eb;
}

/* Dunkelmodus: Nicht einfach invertieren, sondern Kontrast reduzieren */
[data-theme="dark"] {
  --bg: #111827;
  --surface: #1f2937;
  --text: #f9fafb;
  --text-secondary: #9ca3af;
  --border: #374151;
}

Prinzipien der Farbkombination im Dunkelmodus

  1. Kein rein schwarzes #000: Dunkelgrau wie #111827 verwenden
  2. Sättigung der Hauptfarbe reduzieren: Hohe Sättigung im Dunkelmodus ist grell
  3. Kontrast ≥ 4,5:1 beibehalten: WCAG AA Standard
  4. Schatten durch dunklere Hintergrundebenen ersetzen: Schatten sind im Dunkelmodus nicht sichtbar

Klassische Palettenreferenz

Technologie/SaaS

Hauptfarbe: #3b82f6 (Blau 500)
Sekundärfarbe: #8b5cf6 (Violett 500)
Akzent: #06b6d4 (Cyan 500)
Hintergrund: #f8fafc
Text: #0f172a

E-Commerce/Konsum

Hauptfarbe: #f97316 (Orange 500)
Sekundärfarbe: #ef4444 (Rot 500)
Akzent: #22c55e (Grün 500)
Hintergrund: #ffffff
Text: #1f2937

Finanzen/Professionell

Hauptfarbe: #1e40af (Blau 800)
Sekundärfarbe: #059669 (Grün 600)
Akzent: #d97706 (Bernstein 600)
Hintergrund: #f9fafb
Text: #111827

Farbkombination mit ToolsKu generieren

  1. Öffnen Sie das Farbkonvertierungstool oder den Verlaufsgenerator
  2. Wählen Sie die Basisfarbe
  3. Farbskala automatisch generieren (50-900)
  4. Prüfen, ob der Kontrast WCAG AA entspricht
  5. Vorschau des Dunkelmodus-Effekts
  6. CSS-Variablen-Code kopieren

Häufige Fragen

Warum wirkt meine Farbkombination „schmutzig"?

HSL hat eine inkonsistente Sättigungswahrnehmung bei hoher/niedriger Helligkeit. Verwenden Sie den OKLCH-Farbraum für sauberere Farbskalen.

Farben im Dunkelmodus zu grell?

Sättigung um 20-30% reduzieren, Helligkeit um 5-10% erhöhen:

/* Hellmodus */
--primary: hsl(220, 80%, 55%);

/* Dunkelmodus: Sättigung reduzieren */
--primary: hsl(220, 60%, 65%);

Wie stellt man Farbblinden-Freundlichkeit sicher?

  • Nicht nur auf Farbe zur Informationsübermittlung verlassen (Symbole/Text hinzufügen)
  • Rot-Grün-Kombination ist nicht farbblindenfreundlich, Blau-Orange als Alternative verwenden
  • Mit dem Farbblindheitssimulator testen

Zusammenfassung

Eine gute Farbkombination entsteht aus Farbtheorie + Kontraststandards + praktischen Tests. Die Beherrschung der fünf klassischen Farbschemata, der WCAG-Kontraststandards und des OKLCH-Farbraums ermöglicht die Erstellung professioneller Paletten. Denken Sie daran: Farbgestaltung ist keine Kunst, sondern Ingenieurwesen — es gibt Standards zu befolgen und Werkzeuge zum Messen.

#调色板#颜色搭配#色彩理论#UI设计#教程