CSS-Farbgenerator
Wandeln Sie eine Basisfarbe in eine 10-stufige Farbpalette um und exportieren Sie sie als CSS-Variablen.
100 % privat — alles läuft in Ihrem Browser
So funktioniert's
- 1
Geben Sie eine Basisfarbe ein oder wählen Sie sie visuell.
- 2
Eine 10-stufige Skala von 50 (hellste) bis 900 (dunkelste) wird sofort erzeugt.
- 3
Klicken Sie auf ein Farbfeld, um den einzelnen Hex-Wert zu kopieren.
- 4
Kopieren Sie den gesamten Block der CSS-Custom-Properties für Ihr Projekt.
Beispiele
Skala aus #3B82F6
Eingabe
#3B82F6Ausgabe
--color-50 #F5F9FF … --color-500 #3B82F6 … --color-900 #112445Bereit für CSS
Eingabe
Kopierten Block einfügenAusgabe
:root { --color-500: #3B82F6; … }Häufige Fragen
Wie wird die Skala erzeugt?
Die Stufen 50–400 werden Richtung Weiß gemischt (helle Töne), 600–900 Richtung Schwarz (dunkle Töne); 500 behält Ihre Basisfarbe unverändert.
Wie verwende ich die Variablen?
Fügen Sie den Block oben in ein Stylesheet ein und referenzieren Sie jede Stufe mit var(--color-500) in Ihrem CSS.
Wird meine Farbe an einen Server gesendet?
Nein — die Skala wird lokal in Ihrem Browser erzeugt.