Warum wirkt 950 manchmal entsättigter als 900?

**Tailwind v3** verhält sich genauso - Chroma (Sättigung) **fällt an den Extremen tatsächlich ab** (50 und 950). **Beabsichtigt**: sehr dunkle Farben bei vollem Chroma wirken unnatürlich ("reines Dunkelblau" wird zu **schlammigem Violett**). Der Generator emuliert diese Rampe, damit die Palette **wie offizielles Tailwind aussieht**.

Was ist der "Anchor"?

Die Stufe, **an die deine Originalfarbe verankert ist**. Basisfarbe #3b82f6 mit **anchor=500** landet **genau bei 500**. Mit **anchor=400** landet dasselbe #3b82f6 bei 400 und 500 wird dunkler. **Nützlich**, wenn deine Markenfarbe z. B. sehr hell ist - setz **anchor=200**, damit die restliche Skala ausgewogen bleibt.

Wie verhält sich das zu Tailwind v3 / v4 Default-Farben?

**Tailwind v3** Default-Farben (slate, gray, zinc, blue, red) wurden **2020-2021 handentworfen**. **Tailwind v4** (2024) hat sie **in OKLCH neu entworfen**. Unser Generator nutzt **dieselbe Philosophie wie v4** - gibst du #3b82f6 ein (Tailwind blue-500), sollte der Generator eine Palette liefern, die **sehr nah am offiziellen Tailwind-Blau ist**.

Kann ich es mit Tailwind v3 nutzen?

**Ja** - der Export ist voll kompatibel mit v3. **CSS-Variablen (HEX)** funktionieren überall. **Tailwind-Config** auch. In v3 nutzt du OKLCH nicht direkt, aber die Tatsache, dass **die Palette in OKLCH entworfen wurde**, gibt dir eine bessere Skala - das ist innen, das Endergebnis ist HEX.

Und v4 mit nativem OKLCH?

**Tailwind v4** nutzt **CSS @theme mit nativem OKLCH**. Wir fügen einen Export hinzu, der **OKLCH erhält**, statt zu HEX zu konvertieren. Aktuell ist der Export HEX-basiert - **funktioniert überall, verliert aber OKLCH-Präzision**.

Warum 11 Stufen (50, 100..950)?

**Tailwind v3** hat 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 (**10 Stufen**). **Tailwind v4** hat **950** ergänzt (11 Stufen). **Wir folgen den v4-Konventionen**.

Eigene Helligkeitskurve?

**Aktuell nicht** - der Generator nutzt **Tailwinds Standard-Helligkeitskurve**. Für eigene Kurven (**Material Design 3**, **Radix Colors**) brauchst du ein anderes Tool.

Tailwind-Paletten-Generator - kostenlos

Jede Stufe ist eine andere Helligkeit desselben Farbtons.

Kontrast-Vorschau

brand-400

A 2.1:1

A 10.0:1

brand-500

A 3.0:1

A 7.0:1

brand-600

A 4.4:1

A 4.8:1

brand-700

A 6.8:1

A 3.1:1

brand-800

A 10.3:1

A 2.0:1

brand-900

A 14.8:1

A 1.4:1

CSS variables

:root {
  --brand-50: #f0fbff;
  --brand-100: #def3ff;
  --brand-200: #c3e6ff;
  --brand-300: #a0d2ff;
  --brand-400: #77b6ff;
  --brand-500: #4d94ff;
  --brand-600: #2573ee;
  --brand-700: #0755c5;
  --brand-800: #023b90;
  --brand-900: #052559;
  --brand-950: #08152c;
}

Tailwind config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
brand: {
        50: '#f0fbff',
        100: '#def3ff',
        200: '#c3e6ff',
        300: '#a0d2ff',
        400: '#77b6ff',
        500: '#4d94ff',
        600: '#2573ee',
        700: '#0755c5',
        800: '#023b90',
        900: '#052559',
        950: '#08152c',
      },
      }
    }
  }
}

Wie erzeuge ich eine Tailwind 50-950 Palette aus einer Farbe?

Erzeuge eine Tailwind 50-950-Palette aus einer einzigen Basisfarbe, mit OKLCH für eine wahrnehmungsmäßig gleichmäßige Helligkeitsskala.

Standard-Generatoren machen das in HSL, was zu "300 sieht aus wie 400" führt. Wir nutzen OKLCH = lesbare Stufen, die zu Tailwind v3 / v4 passen.

Wähl deinen "Anchor" - bei welcher Stufe deine Originalfarbe liegt (typisch 500). Exportiere als CSS-Variablen oder ein Tailwind-Config-Snippet.

So nutzt du das Tool

Wähl eine Basisfarbe: HEX (z. B. #3b82f6), nativer Picker, Bildschirm-Pipette (Chrome/Edge) oder eines von 6 Brand-Presets.

Wähl einen "Anchor" - bei welcher Tailwind-Stufe deine Originalfarbe landen soll. Standard 500. Für sehr helle Farben wähl 200, für sehr dunkle 800. Der Anchor ist mit einem Stern (★) markiert.

Rechts siehst du die vollständige 50-950-Skala. Jeder Swatch ist klickbar - kopiert HEX. 50-200 für "Hintergründe und subtile Borders", 300-500 für "Haupt-Interaktionszustände", 600-950 für "Text und Akzente".

"Kontrast-Vorschau" zeigt das Kontrastverhältnis jedes Swatches mit weißem Text (A) und schwarzem Text (A). Hilft dir zu entscheiden, welche Stufen für Buttons funktionieren.

Zwei Exporte: CSS-Variablen (in globals.css einsetzen) oder ein fertiges Tailwind-Config-Snippet (in tailwind.config.js).

Wann das hilfreich ist

Wo der Tailwind-Paletten-Generator hilft - typische Szenarien:

Brandbook → Tailwind - du hast eine Markenfarbe (z. B. #3b82f6 Indigo) und brauchst eine vollständige Skala fürs Design. Der Generator baut 50, 100, ..., 950 nach Tailwind-Konvention.
Dark Mode - in Tailwind v4 bedeutet eine OKLCH-Palette, dass das Invertieren der Skala (50 ↔ 950, 100 ↔ 900) einen sinnvollen Dark Mode ergibt.
Design-System - vollständige Palette für N Markenfarben + 1 Graustufe = komplettes System.
HSL → OKLCH-Migration - ein altes HSL-Projekt zu OKLCH umziehen - der Generator zeigt, was Tailwind v4 aus deiner Markenfarbe machen würde.
Schulung - vergleiche unsere OKLCH-basierten Swatches mit den Tailwind-v3-offiziellen Defaults - sie sind sehr nah, weil Tailwind seit 2024 ebenfalls OKLCH nutzt.

Musst du erst die Basisfarbe einstellen? Nutze den Farb-Konverter, um HEX / OKLCH zu greifen. Akzent- und Neutralpaare findest du leichter im Farb-Harmonie-Tool, und prüf finale Text-/Hintergrund-Kombinationen im Kontrast-Prüfer, bevor du ausspielst.

Fragen und Antworten

HSL hat wahrnehmungsmäßige Ungleichmäßigkeit - L=50% in Blau wirkt viel dunkler als L=50% in Gelb. Ein HSL-Generator liefert eine Skala, in der 300 und 400 identisch aussehen. OKLCH (Oklab Lightness/Chroma/Hue, 2020) hat gleichmäßige Wahrnehmungsschritte - 300 ist sichtbar heller als 400. Tailwind v4 und Radix Colors nutzen OKLCH genau aus diesem Grund.

:root { --brand-50: #f0fbff; --brand-100: #def3ff; --brand-200: #c3e6ff; --brand-300: #a0d2ff; --brand-400: #77b6ff; --brand-500: #4d94ff; --brand-600: #2573ee; --brand-700: #0755c5; --brand-800: #023b90; --brand-900: #052559; --brand-950: #08152c; }

// tailwind.config.js module.exports = { theme: { extend: { colors: { brand: { 50: '#f0fbff', 100: '#def3ff', 200: '#c3e6ff', 300: '#a0d2ff', 400: '#77b6ff', 500: '#4d94ff', 600: '#2573ee', 700: '#0755c5', 800: '#023b90', 900: '#052559', 950: '#08152c', }, } } } }

Wie erzeuge ich eine Tailwind 50-950 Palette aus einer Farbe?

Erzeuge eine Tailwind 50-950-Palette aus einer einzigen Basisfarbe, mit OKLCH für eine wahrnehmungsmäßig gleichmäßige Helligkeitsskala.

Standard-Generatoren machen das in HSL, was zu "300 sieht aus wie 400" führt. Wir nutzen OKLCH = lesbare Stufen, die zu Tailwind v3 / v4 passen.

Wähl deinen "Anchor" - bei welcher Stufe deine Originalfarbe liegt (typisch 500). Exportiere als CSS-Variablen oder ein Tailwind-Config-Snippet.

So nutzt du das Tool

Wähl eine Basisfarbe: HEX (z. B. #3b82f6), nativer Picker, Bildschirm-Pipette (Chrome/Edge) oder eines von 6 Brand-Presets.

"Kontrast-Vorschau" zeigt das Kontrastverhältnis jedes Swatches mit weißem Text (A) und schwarzem Text (A). Hilft dir zu entscheiden, welche Stufen für Buttons funktionieren.

Zwei Exporte: CSS-Variablen (in globals.css einsetzen) oder ein fertiges Tailwind-Config-Snippet (in tailwind.config.js).

Wann das hilfreich ist

Wo der Tailwind-Paletten-Generator hilft - typische Szenarien:

Brandbook → Tailwind - du hast eine Markenfarbe (z. B. #3b82f6 Indigo) und brauchst eine vollständige Skala fürs Design. Der Generator baut 50, 100, ..., 950 nach Tailwind-Konvention.
Dark Mode - in Tailwind v4 bedeutet eine OKLCH-Palette, dass das Invertieren der Skala (50 ↔ 950, 100 ↔ 900) einen sinnvollen Dark Mode ergibt.
Design-System - vollständige Palette für N Markenfarben + 1 Graustufe = komplettes System.
HSL → OKLCH-Migration - ein altes HSL-Projekt zu OKLCH umziehen - der Generator zeigt, was Tailwind v4 aus deiner Markenfarbe machen würde.
Schulung - vergleiche unsere OKLCH-basierten Swatches mit den Tailwind-v3-offiziellen Defaults - sie sind sehr nah, weil Tailwind seit 2024 ebenfalls OKLCH nutzt.

Fragen und Antworten

Tailwind-Paletten-Generator

Wie erzeuge ich eine Tailwind 50-950 Palette aus einer Farbe?

So nutzt du das Tool

Wann das hilfreich ist

Fragen und Antworten

Passende Tools

Hellere/Dunklere Töne

Farb-Konverter

Bild-Paletten-Extractor

CSS-Verlauf-Generator

Tailwind-Paletten-Generator

Wie erzeuge ich eine Tailwind 50-950 Palette aus einer Farbe?

So nutzt du das Tool

Wann das hilfreich ist

Fragen und Antworten

Passende Tools

Hellere/Dunklere Töne

Farb-Konverter

Bild-Paletten-Extractor

CSS-Verlauf-Generator