Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray150 und Farbe gray233

Graustufen enthalten natürlich alle 16 Graustufen und insbesondere die unbunten Grundfarben Schwarz und Weiß.

Um 256 Graustufen in HTML bzw. CSS zu erzeugen, wählen wir Farbwerte rr, gg und bb mit Werten von 0 bis 255 (d.h. hexadezimal 00 bis ff).

Hintergrundfarbe gray150			Schriftfarbe gray233
Detail	:	Hintergrund gray150	Detail	:	Schrift gray233
Farbe	:	gray150	Farbe	:	gray233
Farbwert	:	#969696	Farbwert	:	#e9e9e9
HTML	:	gray150	HTML	:	gray233
HTML (Wert)	:	#969696	HTML (Wert)	:	#e9e9e9
CSS	:	gray150	CSS	:	gray233
CSS (Wert)	:	#969696	CSS (Wert)	:	#e9e9e9
CSS (kürzest)	:	#969696	CSS (kürzest)	:	#e9e9e9
CSS (RGB)	:	rgb(150,150,150)	CSS (RGB)	:	rgb(233,233,233)
CSS (%RGB)	:	rgb(58%,58%,58%)	CSS (%RGB)	:	rgb(91%,91%,91%)

Verlauf Hintergrundfarbe gray150 nach Schriftfarbe gray233
#969696	#a1a1a1	#adadad	#b9b9b9	#c5c5c5	#d1d1d1	#dddddd	#e9e9e9
#969696	#a1a1a1	#adadad	#b9b9b9	#c5c5c5	#d1d1d1	#dddddd	#e9e9e9

Kombination von gray150 und gray233
Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit von gray233 und gray150 beträgt 88.40%. Die Lesbarkeit dieser Farbkombination liegt damit bei 11.60%. Auf Hintergrund gray150 ist gray233 ungeeignet. Die Unterschiede in der Helligkeit und Farbe sind zu gering.

Hintergrundfarbe gray150				Schriftfarbe gray233
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#969696	#969696	#969696	#969696	#e9e9e9	#e9e9e9	#e9e9e9	#e9e9e9
#a5a5a5	#a5a5a5	#808080	#808080	#ececec	#ececec	#c7c7c7	#c7c7c7
#b4b4b4	#b4b4b4	#6b6b6b	#6b6b6b	#efefef	#efefef	#a6a6a6	#a6a6a6
#c3c3c3	#c3c3c3	#555555	#555555	#f2f2f2	#f2f2f2	#858585	#858585
#d2d2d2	#d2d2d2	#404040	#404040	#f5f5f5	#f5f5f5	#636363	#636363
#e1e1e1	#e1e1e1	#2a2a2a	#2a2a2a	#f8f8f8	#f8f8f8	#424242	#424242
#f0f0f0	#f0f0f0	#151515	#151515	#fbfbfb	#fbfbfb	#212121	#212121
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray150 und Farbe gray233

Wechsel der Textfarbe bei Hover bei Befehl address

Die Textfarbe soll sich von Farbe gray150 auf Farbe gray233 ändern, wenn man mit der Maus auf <address> zeigt. Wir bereiten zunächst eine Darstellung von <address> in Farbe gray150 vor.

Hier ändern wir die Textfarbe von <address> auf Farbe gray150. Zwar verändern wir die Hintergrundfarbe nicht, ändern jedoch die Schriftart auf verdana und ändern die Schriftgröße auf 13px:

<style type="text/css"><!--
  address { 
    font-family:verdana; 
    color:gray150; 
    font-size:13px;
  }
//-->
</style>

Nun fordern wir, dass bei Mausberührung die Textfarbe auf gray233 geändert wird.

<style type="text/css"><!--
  address: hover { 
    color: gray233;
  }
//-->
</style>

Mehr zum Thema können Sie in Blockorientierte Elemente in HTML erfahren. Die Beschreibung des hier genutzten Befehl address lesen Sie in der HTML Referenz unter <address>.

Hintergrund/Text-Kombination mit HTML-Befehl div

Einen Universalkontainer erzeugt man mit HTML-Tag <div>. Dieser kann farblich gestaltet werden.

Hier ändern wir die Textfarbe von <div> auf Farbe gray233 und die Hintergrundfarbe von <div> auf Farbe gray150. Als Schriftart wählen wir verdana und verkleinern die Schriftgröße auf 97%.

<style type="text/css"><!--
  div { 
    font-size:97%; 
    font-family:verdana; 
    background-color:gray150; 
    color:gray233;
  }
//-->
</style>

Die Beschreibung des Tag div finden Sie in der HTML Referenz unter <div>.