Farbskalen-Generator
Erstelle professionelle Farbskalen aus einer einzigen Basisfarbe. Perfekt für konsistente Designsysteme und UI-Komponentenbibliotheken mit mathematisch präzisen Farbvariationen.
Was sind Farbskalen und warum brauchst du sie?
Farbskalen sind systematische Variationen einer Basisfarbe, die eine harmonische Palette für Designsysteme und Benutzeroberflächen schaffen. Sie bilden die Grundlage für konsistente visuelle Hierarchie, interaktive Zustände und semantische Bedeutung in deinem gesamten Produkt. Unser professioneller Farbskalen-Generator hilft dir, diese Variationen mathematisch zu erzeugen — für perfekte visuelle Harmonie und Konsistenz.
Im modernen UI/UX-Design sind Farbskalen essenziell für intuitive Nutzererlebnisse. Sie helfen Nutzern, visuelle Beziehungen zwischen Elementen zu verstehen, zeigen interaktive Zustände (Hover, Aktiv, Deaktiviert) an und etablieren eine klare Informationshierarchie. Ohne passende Farbskalen wirken Oberflächen inkonsistent, verwirrend oder unprofessionell.
Unser Generator erstellt 10-stufige Skalen nach dem branchenüblichen 50-900-Schema, wobei 50 die hellste und 900 die dunkelste Variation darstellt. Dieses System wird von großen Designsystemen wie Material Design, Ant Design und vielen anderen weit verbreitet eingesetzt.
Praktische Anwendungen
- Designsysteme: Erstelle konsistente Farbpaletten für groß angelegte Anwendungen
- Komponentenbibliotheken: Baue wiederverwendbare UI-Komponenten mit konsistentem Styling
- Markenkonsistenz: Bewahre die Farbharmonie über alle Marketingmaterialien hinweg
- Barrierefreiheit: Stelle angemessene Kontrastverhältnisse für verschiedene Anwendungsfälle sicher
Kurventypen erklärt
Sanfte Kurve (empfohlen)
Verwendet Easing-Funktionen für natürliche, wahrnehmungsgerecht gleichmäßige Farbübergänge
Am besten für: die meisten Designsysteme, natürlichen Farbverlauf
Lineare Kurve
Erzeugt mathematisch präzise lineare Variationen zwischen Farben
Am besten für: technische Anwendungen, vorhersagbare Farbstufen
Die sanfte Kurve liefert in der Regel visuell ansprechendere Ergebnisse, da sie berücksichtigt, wie Menschen Farbunterschiede wahrnehmen, während die lineare Kurve präzise mathematische Kontrolle bietet.
Exportformate & Integration
Unser Farbskalen-Generator unterstützt mehrere Exportformate, um sich nahtlos in deinen Entwicklungs-Workflow einzufügen:
CSS-Variablen
Sofort einsatzbereite CSS-Custom-Properties für die moderne Webentwicklung
Tailwind-Konfiguration
Direkte Integration in Tailwind-CSS-Konfigurationsdateien
JSON-Format
Maschinenlesbares Format zur Automatisierung von Designsystemen
So baust du eine 50–900-Farbskala für dein Designsystem
Jedes ernsthafte Designsystem — Tailwind, Material, Polaris — organisiert Farben in nummerierten Skalen von 50 bis 900. Das ist der Grund, warum sie funktionieren, und so baust du deine eigene.
Eine Skala ersetzt „Hellblau“ und „Dunkleres Blau“ durch stabile Tokens: blue-500 für primäre Aktionen, blue-50 für dezente Hintergründe, blue-700 für Hover-Zustände. Zahlen machen Farben vorhersehbar, mitteilbar und teamübergreifend wiederverwendbar.
500 ist der Anker
Deine Markenfarbe, so abgestimmt, dass weißer Text bei Bedarf AA-Kontrast besteht.
Kurve statt Gerade
Unter 500 wird es heller, darüber dunkler — aber wahrnehmungsgerechte Skalen nutzen eine Easing-Kurve, damit jeder Schritt gleich unterschiedlich wirkt.
Abnehmende Sättigung
Sehr helle Stufen (50–100) und sehr dunkle Stufen (800–900) brauchen weniger Sättigung, um nicht künstlich zu wirken.
Typische Verwendungstabelle
| Stufe | Übliche Verwendung |
|---|---|
| 50–100 | Dezente Hintergründe, Hover-Flächen |
| 200–300 | Rahmen, Badges, dezente Illustrationen |
| 400 | Dekorative Akzente, Icons |
| 500 | Primäre Markenaktion |
| 600–700 | Hover- / Pressed-Zustände |
| 800–900 | Text auf hellen Hintergründen, dunkle Themes |
Exportiere sie überallhin
Eine Skala ist nur nützlich, wenn sie in deinen Tools lebt. Der Generator oben wendet eine wahrnehmungsgerechte Easing-Kurve an, hält den Farbton über alle Stufen stabil — ausgehend von Indigo #6366F1 teilt sich jede Stufe den Farbton 239°, die Eigenschaft, die Skalen von Blau oder Smaragd professionell statt generiert wirken lässt — und exportiert als:
CSS-Variablen
Für Vanilla-Projekte.
Tailwind-Konfiguration
theme.extend.colors, fertig zum Einfügen.
W3C-Design-Tokens
JSON für Figma-Plugins und Style-Dictionaries.
Eine Basisfarbe, eine Kurve, zehn konsistente Stufen — mehr braucht eine professionelle Palette nicht.