Color Palette Generator
Generate a complete 10-shade color palette from any base color in Tailwind CSS style.
50#f0f6fergb(240, 246, 254)hsl(217, 91%, 97%)
100#dde9fdrgb(221, 233, 253)hsl(217, 91%, 93%)
200#b6d1fcrgb(182, 209, 252)hsl(217, 91%, 85%)
300#7bacf9rgb(123, 172, 249)hsl(217, 91%, 73%)
400#3c83f6rgb(60, 131, 246)hsl(217, 91%, 60%)
500#3c83f6rgb(60, 131, 246)hsl(217, 91%, 60%)
600#0b60eargb(11, 96, 234)hsl(217, 91%, 48%)
700#094cb9rgb(9, 76, 185)hsl(217, 91%, 38%)
800#063888rgb(6, 56, 136)hsl(217, 91%, 28%)
900#042458rgb(4, 36, 88)hsl(217, 91%, 18%)
Über dieses Tool
Der Farbpaletten-Extraktor generiert eine 10-stufige Designsystem-Skala aus jeder Grundfarbe, entsprechend den 50–900-Schatten-Konventionen von Tailwind CSS, Material Design und ähnlichen Frameworks.
Jedes Farbfeld in der generierten Skala zeigt Hex-, RGB- und HSL-Werte. Die Textfarbe auf jedem Feld passt sich automatisch basierend auf der Luminanz an.
Anleitung
- Wählen Sie eine Grundfarbe mit dem Farbwähler oder geben Sie einen Hex-Wert ein.
- Die 10-stufige Skala (50–900) wird sofort generiert und deckt den gesamten Helligkeitsbereich ab.
- Verwenden Sie Hex-, RGB- oder HSL-Werte in Ihrem Designsystem oder CSS-Variablen.
Anwendungsfälle
Designsystem-Teams generieren vollständige Farbskalen als Tailwind-Konfigurationserweiterungen oder CSS-Eigenschaften. Frontend-Entwickler erstellen barrierefreie UI-Komponenten.
Häufige Fragen
- Wie unterscheidet sich diese Skala von "Schattierungen" in anderen Tools? — Dieses Tool generiert eine feste 10-stufige Skala (50, 100, 200, … 900) mit spezifischen Helligkeitswerten, die gängigen Designsystem-Konventionen entsprechen.
- Beeinflusst eine Änderung der Sättigung die Skala? — Die Sättigung Ihrer Grundfarbe bleibt auf allen Stufen erhalten — nur die Helligkeit ändert sich.
- Kann ich diese Farben direkt in Tailwind CSS verwenden? — Ja. Kopieren Sie die Hex-Werte jeder Schattierungsstufe und fügen Sie sie mit den Schattierungsnummern als Schlüssel zu tailwind.config.js unter theme.extend.colors hinzu.