Color Shades Generator
Erzeugt aus einer Grundfarbe hellere und dunklere Abstufungen als Hex-Werte.
Dieses Tool ist für Mitglieder
Dieses Premium-Tool schaltest du mit einem kostenlosen Konto frei — zusammen mit allen anderen Profi-Tools und den ganzen Wissen-Artikeln.
100 % kostenlos · keine Kreditkarte · sofort freigeschaltet
Wozu dient der Color Shades Generator?
Der Color Shades Generator erzeugt aus einer Grundfarbe hellere und dunklere Abstufungen als fertige Hex-Werte. Ideal für Designer und Entwickler, die aus einer Markenfarbe eine ganze Farbpalette für Buttons, Hover-Zustände, Hintergründe und Verläufe ableiten wollen.
Du gibst eine Grundfarbe als Hex-Wert ein und legst fest, wie viele Stufen je Richtung erzeugt werden. Der Generator hellt die Farbe schrittweise in Richtung Weiß auf und dunkelt sie in Richtung Schwarz ab. Alle Hex-Codes lassen sich direkt kopieren. Die Berechnung erfolgt vollständig im Browser.
Beispiele
- Grundfarbe #3B82F6 mit 3 Stufen je Richtung: liefert drei hellere Blautöne, das Original und drei dunklere Töne.
- Markenrot #E11D48 mit 4 Stufen: ergibt eine durchgehende Skala von zartem Rosa bis tiefem Bordeaux.
- Neutralgrau #6B7280 mit 5 Stufen: perfekt für ein abgestuftes Grau-System in einem Design-System.
Häufige Fragen zum Color Shades Generator
In welchem Format kommen die Farben heraus?
Alle Abstufungen werden als sechsstellige Hex-Werte ausgegeben, die du direkt in CSS, Figma oder anderen Tools verwenden kannst.
Wie werden die Stufen berechnet?
Hellere Töne entstehen durch gleichmäßiges Mischen mit Weiß, dunklere durch Mischen mit Schwarz. Je mehr Stufen, desto feiner die Abstufung.
Kann ich daraus ein komplettes Design-System bauen?
Ja, viele Design-Systeme nutzen genau solche Skalen mit benannten Stufen wie 100 bis 900. Der Generator liefert dir die passenden Werte als Ausgangsbasis.
Werden meine Eingaben gespeichert?
Nein. Alle Berechnungen laufen ausschließlich im Browser. Es werden keine Daten gesendet oder gespeichert.
Ist das Tool kostenlos?
Ja, vollständig kostenlos und ohne Registrierung.
