Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray228 und Farbe gray70

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 gray228			Schriftfarbe gray70
Detail	:	Hintergrund gray228	Detail	:	Schrift gray70
Farbe	:	gray228	Farbe	:	gray70
Farbwert	:	#e4e4e4	Farbwert	:	#464646
HTML	:	gray228	HTML	:	gray70
HTML (Wert)	:	#e4e4e4	HTML (Wert)	:	#464646
CSS	:	gray228	CSS	:	gray70
CSS (Wert)	:	#e4e4e4	CSS (Wert)	:	#464646
CSS (kürzest)	:	#e4e4e4	CSS (kürzest)	:	#464646
CSS (RGB)	:	rgb(228,228,228)	CSS (RGB)	:	rgb(70,70,70)
CSS (%RGB)	:	rgb(89%,89%,89%)	CSS (%RGB)	:	rgb(27%,27%,27%)

Verlauf Hintergrundfarbe gray228 nach Schriftfarbe gray70
#e4e4e4	#cdcdcd	#b6b6b6	#a0a0a0	#898989	#737373	#5c5c5c	#464646
#e4e4e4	#cdcdcd	#b6b6b6	#a0a0a0	#898989	#737373	#5c5c5c	#464646

Kombination von gray228 und gray70
Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante.				Die Ähnlichkeit von gray70 und gray228 beträgt 64.65%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 35.35%. Auf Hintergrund gray228 ist gray70 ungeeignet. Zwar ist der Helligkeitsunterschied ausreichend, die Farben selbst sind jedoch zu ähnlich.

Hintergrundfarbe gray228				Schriftfarbe gray70
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#e4e4e4	#e4e4e4	#e4e4e4	#e4e4e4	#464646	#464646	#464646	#464646
#e7e7e7	#e7e7e7	#c3c3c3	#c3c3c3	#606060	#606060	#3c3c3c	#3c3c3c
#ebebeb	#ebebeb	#a2a2a2	#a2a2a2	#7a7a7a	#7a7a7a	#323232	#323232
#efefef	#efefef	#828282	#828282	#959595	#959595	#282828	#282828
#f3f3f3	#f3f3f3	#616161	#616161	#afafaf	#afafaf	#1e1e1e	#1e1e1e
#f7f7f7	#f7f7f7	#414141	#414141	#cacaca	#cacaca	#141414	#141414
#fbfbfb	#fbfbfb	#202020	#202020	#e4e4e4	#e4e4e4	#0a0a0a	#0a0a0a
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray228 und Farbe gray70

Füllen und Umranden bei Befehl hr

Für dieses Beispiel umranden wir <hr> mit einem . Die Hintergrundfarbe für <hr> setzen wir auf Farbe gray228. Mit HTML ist dies kaum machbar. Daher nutzen wir hier CSS zur Formatierung.

<style type="text/css"><!--
  hr { border:4px ridge gray70; background-color:gray228; }
//-->
</style>

Weiteres zum Thema hr können Sie in Grundlegende Gestaltungselemente in HTML nachlesen. Die Beschreibung des hier verwendeten Tag hr finden Sie in der HTML Referenz unter <hr>.

Wechsel der Hintergrundfarbe bei Hover bei Befehl colgroup

Die Hintergrundfarbe soll sich von Farbe gray228 auf Farbe gray70 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <colgroup> in Farbe gray228 vor.

Z.B. setzen wir die Hintergrundfarbe von <colgroup> auf Farbe gray228. Zwar behalten wir die Textfarbe bei, setzen jedoch die Schriftart auf sans-serif und setzen die Schriftgröße auf 118%.

<style type="text/css"><!--
  colgroup { 
    background-color:gray228; 
    font-size:118%; 
    font-family:sans-serif;
  }
//-->
</style>

Jetzt fordern wir, dass bei Mausberührung die Hintergrundfarbe auf gray70 gesetzt wird.

<style type="text/css"><!--
  colgroup:hover { 
    background-color:gray70;
  }
//-->
</style>

Mehr zu colgroup können Sie in Tabellen in HTML finden. Mehr zum Tag <colgroup>.