Farbton-Generator
Generieren Sie hellere und dunklere Töne aus jeder Basisfarbe. Gleicher Farbton und Sättigung, variierende Helligkeit — perfekt für Design-Systeme, CSS-Variablen und Tailwind-ähnliche Paletten. Kopieren Sie Hex, RGB, HSL oder einen vollständigen CSS-Variablen-Block.
#ECF3FE#C0D7FC#94BBFA#689FF8#3C83F6#0B5EE5#0844A6#052A66#021027Inhaltsverzeichnis
Was sind Farbtöne?
Töne sind Variationen einer einzelnen Farbe, die durch Änderung nur der Helligkeit (in HSL) erzeugt werden. Farbton und Sättigung bleiben gleich, sodass Sie eine konsistente Familie von sehr hell bis sehr dunkel erhalten — ideal für Hintergründe, Rahmen, Text und Hover-Zustände in Design-Systemen (z.B. Tailwinds 50–900-Skala) oder CSS-Variablen.
Im Gegensatz zu Tönen (Weiß hinzufügen) oder Tönen (Grau hinzufügen) erhält die Tonerzeugung über HSL-Helligkeit die Farbintensität über die gesamte Skala und verhindert so das ausgewaschene Erscheinungsbild bei helleren Schritten.
Dieses Tool platziert Ihre Basisfarbe in der Mitte der Skala und generiert hellere und dunklere Schritte. Sie können einzelne Werte kopieren oder das vollständige Set als benutzerdefinierte CSS-Eigenschaften exportieren.
Anwendungsfälle
- Design-Systeme — Definieren Sie eine primäre (oder sekundäre) Skala einmal und verwenden Sie sie komponentenübergreifend wieder.
- Tailwind-ähnliche Paletten — Generieren Sie 9 oder 11 Schritte (50–900) aus einer Markenfarbe.
- CSS-Variablen — Kopieren Sie den "Als CSS-Variablen kopieren"-Block in Ihr :root für sofortiges Theming.
- Barrierefreiheit — Verwenden Sie hellere Töne für Hintergründe und dunklere für Text, um Kontrastrichtlinien zu erfüllen.
Ausgabeformate
Farben kopieren als:
- Hex — #EFF6FF, #DBEAFE, etc.
- RGB — rgb(239, 246, 255)
- HSL — hsl(214, 100%, 97%)
- CSS-Variablen — Einfügefertiger :root-Block mit --color-100, --color-200 usw.
Tipps für bessere Ergebnisse
- Mit Ihrem 500-Ton beginnen — Betrachten Sie Ihre Basisfarbe als die Mitte des Bereichs, nicht als die dunkelste.
- Kontrast früh überprüfen — Verwenden Sie hellere Töne (50–200) für Hintergründe mit dunklem Text; dunklere Töne (700–900) gewährleisten lesbaren Text auf hellen Hintergründen.
- Reines Schwarz/Weiß als Basis vermeiden — Beginnen Sie mit Farben, die eine gewisse Sättigung haben (10%+) für natürlicher aussehende Skalen.
Häufig gestellte Fragen
Wir halten Farbton und Sättigung Ihrer Basisfarbe fest und ändern nur die Helligkeit in HSL. Die Basisfarbe wird in der Mitte platziert; Schritte darüber sind heller (bis zu 96% Helligkeit) und Schritte darunter sind dunkler (bis zu 8% Helligkeit), sodass Sie eine gleichmäßige Progression von hell zu dunkel erhalten.
Ja. Wählen Sie 9 Töne, um eine Skala ähnlich Tailwinds 100–900 zu erhalten (mit Beschriftungen 50–900). Kopieren Sie die Hex-Werte oder den CSS-Variablen-Block und fügen Sie sie in Ihre Tailwind-Konfiguration oder globales CSS ein.
3 Töne: Minimale Palette (hell, Basis, dunkel). 5–7 Töne: Einfache Projekte mit grundlegenden Farbanforderungen. 9 Töne: Material Design Standard (100–900). 11 Töne: Tailwind Standard (50–950) — Empfohlen. 13–15 Töne: Maximale Granularität für komplexe Design-Systeme.
HSL-Helligkeit funktioniert am besten mit Farben, die moderate Sättigung haben (20–80%). Sehr gesättigte oder sehr entsättigte Basisfarben benötigen möglicherweise manuelle Anpassung. Versuchen Sie, die Sättigung Ihrer Basisfarbe leicht zu optimieren, wenn die Skala falsch erscheint.
Nicht in diesem Tool — es ist für konsistente mathematische Skalen konzipiert. Für manuelle Anpassungen kopieren Sie die Hex-Werte in einen Farbauswähler oder ein Design-Tool.
Nein. Die gesamte Generierung läuft in Ihrem Browser. Ihre Basisfarbe und Einstellungen werden nur in der URL (Abfrageparameter) gespeichert, wenn Sie den Link teilen; nichts wird an einen Server gesendet.