Überblick Farbskalen-Generator
Jede Farbe → 50–950 Skala mit CSS-Export
Verwendung
Verwandeln Sie eine Basisfarbe in eine vollständige Skala von 50 bis 950 mit einsatzbereitem CSS- und Tailwind-Output.
Farbskalen-Generator
Warum eine 50–950-Skala
Eine Skala gibt einem Farbton genug Stufen für Flächen, Rahmen, Text und Zustände. Stufe 50 ist die hellste Tönung, 950 die tiefste, und 500 trägt meist die Markenfarbe.
Gleichmäßige Stufen erleichtern die Pflege: Der Sprung zwischen Nachbarwerten bleibt auf jedem Bildschirm vorhersagbar.
Wie die Stufen entstehen
Jede Stufe zielt auf eine Helligkeit in OKLCH, damit die Rampe wahrnehmungsgleich bleibt und in den Schatten nicht zusammenfällt. An beiden Enden wird die Chroma gesenkt, damit helle Töne klar und dunkle satt wirken.
Häufige Fragen
Warum ist Stufe 500 nicht exakt meine Farbe?
500 liegt in der Mitte und ist der sicherste Standard für Buttons und Links. Die Eingabefarbe kann heller oder dunkler sein und landet daher auf einer Nachbarstufe.
Kann ich das exportierte CSS direkt nutzen?
Ja. Der Block definiert --brand-50 bis --brand-950. Benennen Sie das Präfix vor dem Einfügen nach Ihrem System um.
Funktioniert das auch für Grau?
Ja. Farben mit geringer Chroma ergeben eine neutrale Rampe ohne Farbstich, geeignet für Text, Rahmen und deaktivierte Zustände.