Ressourcen: 16 Graustufen in HTML - Kombination von Farbe gray119 und Farbwert #999999

Graustufen enthalten insbesondere die unbunten Grundfarben Schwarz und Weiß.

Um 16 Graustufen in HTML bzw. CSS zu erzeugen, wählen wir Farbwerte rr, gg und bb mit Werten von 0 bis 15 (d.h. hexadezimal 0 bis f) für r, g und b.

Hintergrundfarbe gray119			Schriftfarbwert #999999
Detail	:	Hintergrund gray119	Detail	:	Schrift #999999
Farbe	:	gray119	Farbwert	:	#999999
Farbwert	:	#777777	Farbe	:	gray153
HTML	:	gray119	HTML	:	#999999
HTML (Wert)	:	#777777	HTML (Wert)	:	#999999
CSS	:	gray119	CSS	:	#999999
CSS (Wert)	:	#777777	CSS (Wert)	:	#999999
CSS (kürzest)	:	#777	CSS (kürzest)	:	#999
CSS (RGB)	:	rgb(119,119,119)	CSS (RGB)	:	rgb(153,153,153)
CSS (%RGB)	:	rgb(46%,46%,46%)	CSS (%RGB)	:	rgb(60%,60%,60%)

Verlauf Hintergrundfarbe gray119 nach Schriftfarbwert #999999
#777777	#7b7b7b	#808080	#858585	#8a8a8a	#8f8f8f	#949494	#999999
#777777	#7b7b7b	#808080	#858585	#8a8a8a	#8f8f8f	#949494	#999999

Kombination von gray119 und #999999
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in.				#999999 ist nicht als Schriftfarbe auf Hintergrund gray119 geeignet, da die Unterschiede in der Helligkeit und Farbe zu gering sind. Die Ähnlichkeit der Farben #999999 und gray119 ergibt sich zu 92.52%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 7.48%.

Hintergrundfarbe gray119				Schriftfarbwert #999999
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#777777	#777777	#777777	#777777	#999999	#999999	#999999	#999999
#8a8a8a	#8a8a8a	#666666	#666666	#a7a7a7	#a7a7a7	#838383	#838383
#9d9d9d	#9d9d9d	#555555	#555555	#b6b6b6	#b6b6b6	#6d6d6d	#6d6d6d
#b1b1b1	#b1b1b1	#444444	#444444	#c4c4c4	#c4c4c4	#575757	#575757
#c4c4c4	#c4c4c4	#333333	#333333	#d3d3d3	#d3d3d3	#414141	#414141
#d8d8d8	#d8d8d8	#222222	#222222	#e1e1e1	#e1e1e1	#2b2b2b	#2b2b2b
#ebebeb	#ebebeb	#111111	#111111	#f0f0f0	#f0f0f0	#151515	#151515
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray119 und Farbwert #999999

Text- und Unterstreichungsfarben mit HTML-Befehl caption

Bei diesem Beispiel ändern wir die Textfarbe von <caption> auf Farbwert #999999 und lassen die Hintergrundfarbe unverändert. Die Schriftart ändern wir auf sans-serif. Die Schriftgröße ändern wir auf 9px. Wir unterstreichen den Inhalt von <caption> mit Hilfe eines gepunkteten Rahmens mit 1 Pixel Dicke in Farbe gray119. Das ist in HTML kaum möglich. Daher verwenden wir hierfür CSS.

<style type="text/css"><!--
  caption { 
    font-size:9px; 
    color:#999; 
    font-family:sans-serif; 
    border-bottom:1px dotted gray119;
  }
//-->
</style>

Die Idee ist, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben.

Weiteres zu caption können Sie in Tabellen in HTML finden. Mehr zum hier genutzten HTML-Tag <caption>.

Wechsel der Textfarbe bei Hover von HTML-Befehl p

Die Textfarbe soll sich von Farbe gray119 auf Farbwert #999999 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Formatierung von <p> in Farbe gray119 vor.

Wir legen z.B. bei <p> die Textfarbe auf Farbe gray119 fest. Die Schriftgröße setzen wir auf 13pt:

<style type="text/css"><!--
  p { 
    color:gray119; 
    font-size:13pt;
  }
//-->
</style>

Nun stellen wir ein, dass bei Mausberührung die Textfarbe auf #999999 gesetzt wird.

<style type="text/css"><!--
  p:hover { 
    color:#999999;
  }
//-->
</style>

Weiteres zu p können Sie in Grundlegende Gestaltungselemente in HTML lesen. Mehr zum Befehl <p>.