Farbpalette-Generierung Ein vollständiges Farbspektrum aus einem einzigen Hex-Wert erstellen

Du hast eine Markenfarbe. Vielleicht stammt sie aus einem Logo, einer Style-Guideline oder aus einer Farbe, die dir gefällt. Jetzt benötigst du eine vollständige Palette – Töne, Abstufungen, ergänzende Farben, semantische Tokens, Varianten für den Dark-Mode. Dieser Leitfaden zeigt dir, wie du das programmatisch und korrekt erstellst.

Die Farbtheorie, die tatsächlich relevant ist

Viele Farbtheorien, die du in der Designschule kennst, übertragen sich nicht direkt auf die Benutzeroberfläche. Hier ist das, was relevant ist:

Für die meisten UI-Bibliotheken verwendest du deine Markenfarbe als Primär, eine analoge Nachbarfarbe als Sekundär und eine komplementäre oder split-complementäre Farbe für Akzente und interaktive Zustände.

Warum HSL besser als Hex für die Palette ist

Hex und RGB codieren Farben als Hardware-Kanäle – nicht als Menschen wahrnehmen. HSL (Farbe, Sättigung, Helligkeit) entspricht der Wahrnehmung:

• Farbe — die Farbe selbst (0–360°, wobei 0 = rot, 120 = grün, 240 = blau)
• Sättigung — wie lebendig oder grau (0% = Graustufe, 100% = voller Farbe)
• Helligkeit — wie hell oder dunkel (0% = schwarz, 100% = weiß)

Das ist wichtig, weil du bei der Erzeugung eines Tons deine Markenfarbe nicht mit Weiß mischst – du erhöhst lediglich die Helligkeit im HSL. Die Farbe bleibt genau gleich. Das ist bei mathematischen Hex-Wert-Operationen nicht garantiert.

Töne und Abstufungen richtig generieren

Die falsche Methode ist üblich: lerp den Hex-Wert zu #ffffff für Töne, zu #000000 für Abstufungen. Dadurch entstehen Farbdrift und Sättigungsverluste – dein „hellblau“ wird zu einem verschwommenen Grau-Blau.

Die richtige Methode: parsen den Hex-Wert zu HSL, dann verändern nur die Helligkeit:

/**
 * Generate a 10-step shade scale from a base HSL color.
 * Returns shades from 50 (lightest) to 950 (darkest), like Tailwind.
 * @param {number} h - Hue (0–360)
 * @param {number} s - Saturation (0–100)
 * @param {number} l - Base lightness (0–100)
 * @returns {Object} - Scale object: { 50, 100, 200, ..., 900, 950 }
 */
function generateShadeScale(h, s, l) {
  // Lightness stops mapped to Tailwind-style scale keys
  const stops = [
    [50,  95],
    [100, 90],
    [200, 80],
    [300, 70],
    [400, 60],
    [500, l],   // 500 = your base color
    [600, 40],
    [700, 30],
    [800, 20],
    [900, 12],
    [950, 7],
  ];

  const scale = {};
  for (const [key, lightness] of stops) {
    scale[key] = `hsl(${h}, ${s}%, ${lightness}%)`;
  }
  return scale;
}

// Example: brand color #3b82f6 (Tailwind blue-500)
// HSL ≈ hsl(217, 91%, 60%)
const palette = generateShadeScale(217, 91, 60);
// palette[50]  → "hsl(217, 91%, 95%)" — near-white blue tint
// palette[500] → "hsl(217, 91%, 60%)" — brand color
// palette[900] → "hsl(217, 91%, 12%)" — near-black blue shade

Der Schlüssel: Farbe und Sättigung bleiben konstant über die gesamte Skala. Nur die Helligkeit ändert sich. Dadurch entsteht ein visuell konsistentes Spektrum, das sich als derselbe Farbfamilie bei jeder Intensität anhört.

Muss aus einem Hex-Wert generiert werden? Verwende den kostenlosen Farbauswahl-Extraktor um HSL-Werte aus jeder Farbe sofort zu extrahieren.

Das 50–950-Designsystem-Spektrum

Tailwind hat die 11-Stufen-Skala (50, 100–900, 950) populär gemacht. Sie ist heute ein de facto-Standard im Designsystem, weil sie sich gut an Anwendungsfälle anpasst:

• 50–100: Seitenhintergründe, Hover-Zustände auf heller Oberfläche
• 200–300: Rahmen, subtile Trennungen, deaktivierte Zustände
• 400–500: Interaktive Elemente – Buttons, Links, Fokusringe
• 600–700: Hover-/Aktivzustände für interaktive Elemente
• 800–900: Text auf heller Hintergrundfarbe
• 950: Näher an Schwarz für hohe Kontrastüberschriften

Wenn du diese Skala für deine Markenfarbe generierst, erhältst du automatisch alle Abstufungen, die du für jeden Komponentenzustand brauchst – ohne pro-Komponente Farbentscheidungen treffen zu müssen.

Von der Markenfarbe zum vollständigen, funktionierenden Farbspektrum

Hier ist der praktische Workflow, wenn du eine einzige Markenfarbe hast:

1. In HSL parsen. Konvertieren #1d4ed8 → hsl(221, 74%, 48%)
2. Die Primärskala generieren. Die Abstufungsfunktion wie oben für die volle 11-Stufen-Skala ausführen.
3. Die Sekundärfarbe ableiten. Hue um ±30° drehen, um eine analoge Sekundärfarbe zu erhalten: hsl(251, 74%, 48%) (violett-blau).
4. Den Akzent ableiten. Hue um 180° drehen, um eine komplementäre Farbe zu erhalten: hsl(41, 74%, 48%) (Amber).
5. Skalen für alle drei generieren. Die gleiche Abstufungsfunktion, aber mit anderen Hues.

Du kannst das vollständige Ergebnis – inklusive Harmonietypen – mit dem Farbschema-Generator vorher schreiben, ohne ein einzige Zeile Code zu schreiben.

Semantische Farb-Tokens

Die rohen Skalwerte dienen als Bausteine für deine Palette. Semantische Tokens sind, was deine Komponenten tatsächlich verwenden:

const tokens = {
  // Map scale values to semantic names
  'color-primary':         palette[500],  // brand color
  'color-primary-hover':   palette[600],
  'color-primary-subtle':  palette[50],
  'color-text':            palette[900],
  'color-text-muted':      palette[600],
  'color-border':          palette[200],
  'color-bg':              palette[50],

  // Status colors — separate scales per semantic group
  'color-success':         'hsl(142, 71%, 45%)',
  'color-warning':         'hsl(38, 92%, 50%)',
  'color-danger':          'hsl(0, 84%, 60%)',
};

Diese Trennung macht den Dark-Mode handhabbar. Deine Komponenten beziehen sich auf color-textsein, nicht palette[900]. In Dark-Mode änderst du nur das Token – nicht jedes einzelne Komponente.

Dark-Mode: Die Skala invertieren

Eine gut gebaute HSL-Palette invertiert sich fast automatisch. Die Regel: Tausche die hellen und dunklen Enden der Skala, passe die Mittelwerte leicht an, um ein visuelles Gleichgewicht zu erzielen.

// Light mode
const lightTokens = {
  'color-bg':    palette[50],   // near-white background
  'color-text':  palette[900],  // near-black text
  'color-border': palette[200],
};

// Dark mode — same scale, inverted stops
const darkTokens = {
  'color-bg':    palette[950],  // near-black background
  'color-text':  palette[50],   // near-white text
  'color-border': palette[800],
};

Da Farbe und Sättigung über die ganze Skala konstant bleiben, bleibt deine Markenidentität beim Invertieren erhalten. Ein blauer Primär in Light-Mode liest sich als der gleiche Blau in Dark-Mode – nur heller gegenüber der dunklen Oberfläche. Das ist der zusätzliche Vorteil, wenn du deine Palette von Anfang an in HSL erstellst.

Alles zusammenführen

Ab einer einzigen Farbe kannst du nun ein vollständiges, semantisch benanntes, dark-mode-fertiges Farbspektrum in weniger als 50 Zeilen JavaScript generieren. Die wichtigsten Schritte:

1. Hex in HSL parsen
2. Eine 11-Stufen-Helligkeitsskala generieren, wobei Farbe und Sättigung konstant bleiben
3. Sekundärfarben und Akzente durch Drehung ableiten
4. Die primitiven Skalwerte auf semantische Tokens abbilden
5. Die Tokens für Dark-Mode umrechnen

Für schnelle Prototypen ohne selbst Code zu schreiben, bietet der Farbschema-Generator und Farbauswahl-Extraktor alle diese Schritte visuell – exportiere das Ergebnis als CSS-Variable oder als JSON-Token-Datei und füge es direkt in dein Designsystem ein.

Das könnte Ihnen auch gefallen

JSON-Schema-Validierung: Fehler bei API-Verträgen vor der Abgabe erkennen

Mehr lesen "

Veröffentlicht am 11. Mai 2026

PDF-Signaturverifikation: Was Entwicklern bekannt ist

Mehr lesen "

Veröffentlicht am 10. Mai 2026

Markdown vs HTML: Wann jede für Dokumente, README-Dateien und APIs verwenden

Mehr lesen "

Veröffentlicht am 9. Mai 2026

UTM-Parameter: Wie man Marketing-Kampagnen ohne Spekulation verfolgt

Mehr lesen "

Veröffentlicht am 8. Mai 2026