Wofür ist eine 50–950-Skala gut?
Sie liefert stimmige Varianten einer Farbe für Hintergründe, Rahmen, Hover-Zustände und Text, ohne jede Stufe von Hand zu wählen. Der Farbton bleibt, die Helligkeit ändert sich Schritt für Schritt.
So funktioniert es
- Klicke auf eine Palettenfarbe, um sie als Basis zu verwenden.
- Prüfe die Skala: 50 bis 200 für Hintergründe, 500 und 600 für Aktionen, 800 bis 950 für Text.
- Kopiere die CSS-Variablen oder klicke auf eine Abstufung, um ihren HEX-Wert zu kopieren.
Häufige Fragen
Ist Stufe 500 meine Originalfarbe?
Sie ist die mittlere Stufe und liegt nah an deiner Farbe, wird aber mit fester Helligkeit neu berechnet, damit alle Skalen stimmig bleiben. Brauchst du den exakten HEX-Wert, nutze ihn unverändert neben der Skala.
Wie nutze ich die Skala in Tailwind?
Füge die Werte unter theme.extend.colors mit den Schlüsseln 50 bis 950 ein. Danach nutzt du Klassen wie bg-marke-100 oder text-marke-900.