Web UtilitiesFarbtöne & Schattierungen Generator
Erzeuge Töne, Schattierungen und Nuancen aus jeder Basisfarbe. Erstelle Tailwind-Farbskalen 50–950, kopiere CSS-Variablen und baue vollständige Design-System-Paletten sofort.
hsl(217, 91%, 60%)
210
Basisfarbe
#3B82F6
CSS-benutzerdefinierte Eigenschaften
:root {
--tint-1: #DFEAFD;
--tint-2: #BED6FC;
--tint-3: #9EC1FA;
--tint-4: #7DADF9;
--tint-5: #5D98F7;
--color-base: #3B82F6;
--shade-1: #0B64F4;
--shade-2: #0950C3;
--shade-3: #073C92;
--shade-4: #052861;
--shade-5: #021431;
/* Tones */
--tone-1: #4C87E6;
--tone-2: #5B8BD7;
--tone-3: #6B8EC7;
--tone-4: #7A92B8;
--tone-5: #8A95A8;
}Töne
#DFEAFD
#BED6FC
#9EC1FA
#7DADF9
#5D98F7
Schattierungen
Base#3B82F6
#0B64F4
#0950C3
#073C92
#052861
#021431
Nuancen
#4C87E6
#5B8BD7
#6B8EC7
#7A92B8
#8A95A8
Klicken Sie auf ein Farbfeld, um den HEX-Wert zu kopieren
Verwandte Tools
Über den Farbtöne & Schattierungen Generator
So funktioniert es
- Geben Sie eine Basisfarbe ein oder wählen Sie sie mit dem Farbwähler oder dem HEX-Eingabefeld aus.
- Wählen Sie die Anzahl der Schritte (Töne und Schattierungen auf jeder Seite).
- Wechseln Sie zwischen klassischem Modus (Töne, Schattierungen, Nuancen) und Tailwind-Modus (50–950).
- Klicken Sie auf ein Farbfeld, um den HEX-Wert sofort in die Zwischenablage zu kopieren.
- Verwenden Sie Alle als CSS kopieren, um eine vollständige Palette als CSS-Eigenschaften zu erhalten.
Häufige Anwendungsfälle
- Erstellung von Design-System-Farbpaletten für UI-Frameworks.
- Generierung von Tailwind-CSS-kompatiblen Farbskalen für benutzerdefinierte Themes.
- Erstellung barrierefreier Farbrampen, die die Markenidentität erhalten.
- Erkundung, wie eine Markenfarbe über alle Helligkeitsstufen hinweg aussieht.
- Erstellung von Farb-Token für Design-Übergaben in Figma oder Storybook.
Häufig gestellte Fragen
Was ist ein Farbton?
Ein Ton wird durch Hinzufügen von Weiß zu einer Basisfarbe erzeugt, wodurch sie heller und weniger gesättigt wird. Töne behalten den ursprünglichen Farbwert bei, erhöhen aber die Helligkeit und erzeugen pastellartige Variationen, die für Hintergründe und dezente UI-Akzente geeignet sind.
Was ist eine Farbschattierung?
Eine Schattierung wird durch Hinzufügen von Schwarz zu einer Basisfarbe erzeugt, wodurch sie dunkler wird. Schattierungen behalten den ursprünglichen Farbwert bei, reduzieren aber die Helligkeit und werden häufig für Text, Ränder und gedrückte Zustände verwendet.
Was ist eine Farbnuance?
Eine Nuance wird durch Hinzufügen von Grau zu einer Basisfarbe erzeugt, was ihre Sättigung reduziert, ohne die Helligkeit wesentlich zu verändern. Nuancen erzeugen gedämpftere Farbvariationen, die für neutrale UI-Komponenten geeignet sind.
Was ist der Tailwind-Palettenmodus?
Der Tailwind-Modus erzeugt 11 Haltepunkte mit den Bezeichnungen 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 und 950 – entsprechend der Tailwind-CSS-Konvention. So lassen sich benutzerdefinierte Farbfamilien erstellen, die direkt in eine tailwind.config.js-Datei eingebunden werden können.
Wie verwende ich die generierten CSS-Variablen?
Das Tool gibt einen :root { }-Block mit CSS-benutzerdefinierten Eigenschaften für jede generierte Farbe aus. Kopieren Sie sie in Ihr globales Stylesheet und referenzieren Sie jede Farbe mit var(--tint-1), var(--shade-3), var(--color-500) usw.
Wie viele Schritte kann ich generieren?
Im klassischen Modus können Sie zwischen 2 und 10 Schritten für Töne und Schattierungen wählen. Der Tailwind-Modus erzeugt immer die feste 11-Haltepunkte-Skala.
Kann ich einzelne Farbwerte kopieren?
Ja. Klicken Sie auf ein beliebiges Farbfeld, um den HEX-Wert sofort in die Zwischenablage zu kopieren. Ein grünes Häkchen bestätigt kurz den Kopiervorgang. Sie können auch die Schaltfläche Alle als CSS kopieren verwenden.
Welche Farbformate unterstützt das Tool?
Sie können einen beliebigen 6-stelligen HEX-Farbwert (z. B. #3B82F6) in das Textfeld eingeben oder den nativen Browser-Farbwähler verwenden. Das Tool konvertiert intern in HSL für eine genaue Helligkeitsmanipulation.
Ist die generierte Palette barrierefrei?
Das Tool erzeugt wahrnehmungsbasiert gleichmäßig verteilte Farben, aber die WCAG-Konformität hängt davon ab, wie Sie Text- und Hintergrundfarben kombinieren. Verwenden Sie das UI-Farbzugänglichkeitsprüfer-Tool, um Kontrastverhältnisse zu überprüfen.
Wie ist dieses Tool für Design-Systeme nützlich?
Design-Systeme erfordern typischerweise eine vollständige Farbskala (z. B. marke-50 bis marke-950) für jede Markenfarbe. Dieses Tool automatisiert diesen Prozess – geben Sie Ihre Markenfarbe einmal ein und erhalten Sie eine vollständige Skala zum Einfügen in Figma-Token, Style Dictionary oder eine Tailwind-Konfigurationsdatei.
Speichert dieses Tool meine Farben?
Nein. Alle Farbberechnungen erfolgen vollständig in Ihrem Browser mit JavaScript. Es werden keine Daten an einen Server gesendet, und zwischen den Sitzungen wird nichts gespeichert. Ihre Farben bleiben vollständig privat.
Was ist der Unterschied zwischen Tönen/Schattierungen und einem Farbverlauf?
Ein Farbverlauf ist ein weicher visueller Übergang zwischen zwei oder mehr Farben. Töne und Schattierungen sind diskrete, benannte Farbstopps innerhalb einer Farbfamilie, die als individuelle Farbwerte in Design-Token verwendet werden, nicht als kontinuierliche Füllungen.