Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray222 und Farbe gray94

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 gray222			Schriftfarbe gray94
Detail	:	Hintergrund gray222	Detail	:	Schrift gray94
Farbe	:	gray222	Farbe	:	gray94
Farbwert	:	#dedede	Farbwert	:	#5e5e5e
HTML	:	gray222	HTML	:	gray94
HTML (Wert)	:	#dedede	HTML (Wert)	:	#5e5e5e
CSS	:	gray222	CSS	:	gray94
CSS (Wert)	:	#dedede	CSS (Wert)	:	#5e5e5e
CSS (kürzest)	:	#dedede	CSS (kürzest)	:	#5e5e5e
CSS (RGB)	:	rgb(222,222,222)	CSS (RGB)	:	rgb(94,94,94)
CSS (%RGB)	:	rgb(87%,87%,87%)	CSS (%RGB)	:	rgb(36%,36%,36%)

Verlauf Hintergrundfarbe gray222 nach Schriftfarbe gray94
#dedede	#cbcbcb	#b9b9b9	#a7a7a7	#949494	#828282	#707070	#5e5e5e
#dedede	#cbcbcb	#b9b9b9	#a7a7a7	#949494	#828282	#707070	#5e5e5e

Kombination von gray222 und gray94
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante.				Die Ähnlichkeit von gray94 und gray222 ergibt sich zu 77.05%. Die Lesbarkeit dieser Farbkombination liegt damit bei 22.95%. Auf Hintergrund gray222 ist gray94 ungeeignet. Zwar ist der Helligkeitsunterschied gross genug, doch die Farben selbst sind zu ähnlich.

Hintergrundfarbe gray222				Schriftfarbe gray94
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#dedede	#dedede	#dedede	#dedede	#5e5e5e	#5e5e5e	#5e5e5e	#5e5e5e
#e2e2e2	#e2e2e2	#bebebe	#bebebe	#757575	#757575	#505050	#505050
#e7e7e7	#e7e7e7	#9e9e9e	#9e9e9e	#8c8c8c	#8c8c8c	#434343	#434343
#ececec	#ececec	#7e7e7e	#7e7e7e	#a3a3a3	#a3a3a3	#353535	#353535
#f0f0f0	#f0f0f0	#5f5f5f	#5f5f5f	#bababa	#bababa	#282828	#282828
#f5f5f5	#f5f5f5	#3f3f3f	#3f3f3f	#d1d1d1	#d1d1d1	#1a1a1a	#1a1a1a
#fafafa	#fafafa	#1f1f1f	#1f1f1f	#e8e8e8	#e8e8e8	#0d0d0d	#0d0d0d
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray222 und Farbe gray94

Hintergrund/Text-Kombination bei Befehl a

Mit HTML-Tag <a> setzen Sie einen Hyperlink. Dieser kann farblich gestaltet werden.

Bei diesem Beispiel ändern wir die Textfarbe von <a> auf Farbe gray94 und die Hintergrundfarbe von <a> auf Farbe gray222. Die Schriftart ändern wir auf arial und als Schriftgröße setzen wir 126%.

<style type="text/css"><!--
  a { 
    font-size:126%; 
    background-color:gray222; 
    color:gray94; 
    font-family:arial;
  }
//-->
</style>

Mehr zum Thema können Sie in Verweise und Protokolle in HTML finden. Der hier gezeigte Befehl a ist in der HTML Referenz unter <a> gezeigt.

Wechsel der Textfarbe bei Hover mit HTML-Befehl acronym

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

Wir legen als Beispiel die Textfarbe von <acronym> auf Farbe gray222 fest. Zwar verändern wir die Hintergrundfarbe nicht, setzen jedoch die Schriftart auf verdana. Die Größe der Schrift ändern wir auf 13px:

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

Nun stellen wir ein, dass sich bei Hover die Textfarbe zu gray94 ändert.

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

Einzelheiten des hier verwendeten Tag acronym sind in der HTML Referenz bei <acronym> genau zusammengestellt.