Farben der Seite

Jetzt zu den Farben der ganzen Seite. Wie im CSS-Kurs geben wir sie body: Sein Hintergrund deckt das ganze Fenster ab, und die Farbe seines Textes erben alle Elemente darin, die keine eigene Farbe haben.

Rein schwarzer Text auf weißem Hintergrund ist sehr hart. Viele Webseiten mildern ihn ab: ein Hintergrund mit einem Hauch von Farbe und sehr dunkelgrauer Text statt Schwarz. Wir nehmen das Grau namens stone, ein warmes Grau mit einem Hauch Braun, das gut zu Orange passt (slate zum Beispiel ist bläulich):

Schwarzer Text auf weißem Hintergrund

Text in Stone 800 auf Hintergrund in Stone 50

<body class="bg-stone-50 text-stone-800">

Die Überschrift, der Link und das Badge behalten ihre eigenen Farben: Eine Klasse an einem Element schlägt eine vom Elternelement geerbte Farbe, wie du aus dem CSS-Kurs weißt.

Weniger wichtiger Text, etwa Tigers Alter, ist oft ein helleres Grau, damit der Haupttext hervortritt: text-stone-500. So hell sollte Text auf hellem Hintergrund höchstens sein: stone-400 auf stone-50 ist schon schwer zu lesen.