Abstufungen

Die Zahl einer Abstufung sagt, wie hell die Farbe ist: 50 ist fast weiß, 950 fast schwarz, und um 500 ist die Farbe am kräftigsten. Helle Abstufungen eignen sich für Hintergründe, dunkle für Text.

Für Hintergründe hat Tailwind Klassen, die mit bg- beginnen (englisch background). Sie setzen die Eigenschaft background-color und verwenden dieselben Farben und Abstufungen wie die Klassen mit text-:

Das Muster ist immer dasselbe: was die Farbe bekommt, dann die Farbe und ihre Abstufung. Du begegnest ihm auch bei anderen Klassen, zum Beispiel für die Farbe eines Rahmens.

Ein heller Hintergrund mit dunklem Text in derselben Farbe ist ein gängiger Look für kleine Beschriftungen, sogenannte Badges. Wir machen eines aus dem Wort „Verspielt“ unter Tigers Alter, in emerald, einem frischen Grün, das gut zu Orange passt:

Verspielt

Denk bei der Wahl der Abstufungen an den Kontrast, wie im CSS-Kurs: Text muss sich deutlich von seinem Hintergrund abheben. Je weiter die beiden Abstufungen auseinanderliegen, desto besser. Auf hellem Hintergrund (50 bis 200) nimmst du Text in der Abstufung 700 oder dunkler, auf dunklem Hintergrund (800 bis 950) Text in 200 oder heller. Abstufungen, die nah beieinanderliegen, sind schwer zu lesen, besonders bei kleinem Text:

Emerald 500 auf Emerald 100 ist schwer zu lesen.

Emerald 800 auf Emerald 100 ist gut zu lesen.

Darum hat der Link auch text-orange-700 bekommen: Die große Überschrift ist im helleren orange-600 gut lesbar, aber der kleinere Text des Links braucht eine dunklere Abstufung.

Du siehst, dass der Hintergrund des Badges eng um seine Buchstaben liegt. Wie du Platz in seinem Inneren schaffst, lernst du in der nächsten Lektion.