Farbton- und Schattierungs-Generator

Generieren Sie Farbtöne (heller) und Schattierungen (dunkler) von jeder HEX-Farbe. Erstellen Sie eine Palette mit 10 Schritten für Designsysteme, Tailwind-ähnliche Farbskalen und CSS-Variablen.

Base Color

Color Scale

#f0f6fe

100

#e2ecfe

200

#c5dafc

300

#99befa

400

#5e99f7

500

#1f71f4

600

#0a58d6

700

#0846aa

800

#063684

900

#052861

950

#031a3f

Export

Name:

:root {
  --color-brand-50: #f0f6fe;
  --color-brand-100: #e2ecfe;
  --color-brand-200: #c5dafc;
  --color-brand-300: #99befa;
  --color-brand-400: #5e99f7;
  --color-brand-500: #1f71f4;
  --color-brand-600: #0a58d6;
  --color-brand-700: #0846aa;
  --color-brand-800: #063684;
  --color-brand-900: #052861;
  --color-brand-950: #031a3f;
}

So verwenden Sie Farbton- und Schattierungs-Generator

1Geben Sie eine HEX-Basisfarbe ein oder verwenden Sie die Farbauswahl.
2Zeigen Sie 10 Farbtöne (hellere Varianten) und 10 Schattierungen (dunklere Varianten) an.
3Klicken Sie auf einen beliebigen Farbmuster, um seinen HEX-Wert zu kopieren.
4Exportieren Sie CSS Custom Properties oder Tailwind-Konfiguration.

ZenovayAnalytics

Machen Sie aus Besuchern Kunden.

Besucher-Tracking in Echtzeit
Datenschutz zuerst, kein Cookie-Banner
In zwei Minuten eingerichtet

Zenovay entdecken

Häufig gestellte Fragen

Was ist der Unterschied zwischen einem Tint und einem Shade?▾

Ein Tint entsteht durch Hinzufügen von Weiß zu einer Farbe – sie wird heller, wobei der Farbton erhalten bleibt. Ein Shade entsteht durch Hinzufügen von Schwarz – die Farbe wird dunkler. Zusammen bilden Tints und Shades eine Farbskala. Moderne Designsysteme (wie Tailwind CSS, Material Design und Ant Design) verwenden Skalen von 50–900, wobei 50 der hellste Tint und 900 der dunkelste Shade ist. Die Basisfarbe liegt typischerweise bei etwa 500 oder 600.

Wie verwendet Tailwind CSS Farbskalen?▾

Tailwind CSS bietet eine 11-stufige Skala (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) für jede benannte Farbe. Bei der Erstellung benutzerdefinierter Markenfarben erweitern Sie die Tailwind-Konfiguration mit Ihrer eigenen Skala. Dieses Tool generiert Skalen, die mit dem Tailwind-Format kompatibel sind. Sie können die Ausgabe als Tailwind-Konfigurationsobjekt oder als CSS-Custom-Properties (--color-brand-50 bis --color-brand-900) kopieren.

Was ist der HSL-Farbraum?▾

HSL (Farbton, Sättigung, Helligkeit) stellt Farben auf eine Weise dar, die intuitiv für die Erstellung von Skalen ist. Farbton (0–360°) ist der Farbwinkel auf dem Farbkreis. Sättigung (0–100 %) ist die Farbintensität – 0 % ist Grau. Helligkeit (0–100 %) ist die Leuchtstärke – 0 % ist Schwarz, 100 % ist Weiß. Um Tints zu erstellen, erhöhen Sie die Helligkeit Richtung 100 %. Um Shades zu erstellen, verringern Sie die Helligkeit Richtung 0 %. Dies erzeugt perceptuell konsistentere Skalen als RGB-Mischung.

Was ist der Unterschied zwischen Shade-Generierungsmethoden?▾

Lineare Interpolation (Mischung mit Weiß/Schwarz): einfach, kann aber an den Extremen ausgewaschen oder trüb wirken. HSL-Helligkeitsanpassung: perceptuell gleichmäßiger, kann aber dunkle Schatten übersättigen. Chroma-angepasst (OKLCH/LCH): das perceptuell genaueste – behält konsistente wahrgenommene Helligkeit bei. Tools wie Radix UI und shadcn/ui verwenden OKLCH für ihre Farbsysteme. Dieses Tool verwendet HSL, das eine gute Balance zwischen Genauigkeit und Kompatibilität bietet.

Wie verwende ich Farbskalen in CSS?▾

Definieren Sie Farben als CSS-Custom-Properties (Variablen): :root { --color-brand-50: #eff6ff; --color-brand-500: #3b82f6; }. Verwenden Sie sie dann mit var(--color-brand-50) in Ihren Stilen. Für den Dunkelmodus definieren Sie die gleichen Variablen in einem @media (prefers-color-scheme: dark) oder einer .dark-Klasse neu. CSS-Custom-Properties kaskadieren und können auf jeder Ebene des DOM überschrieben werden, was sie für Theming sehr leistungsfähig macht.

Bild-Tools