Ressourcen: 16 Graustufen in HTML - Kombination von Farbwert #cccccc und Farbwert #eeeeee

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.

Hintergrundfarbwert #cccccc			Schriftfarbwert #eeeeee
Detail	:	Hintergrund #cccccc	Detail	:	Schrift #eeeeee
Farbwert	:	#cccccc	Farbwert	:	#eeeeee
Farbe	:	gray204	Farbe	:	gray238
HTML	:	#cccccc	HTML	:	#eeeeee
HTML (Wert)	:	#cccccc	HTML (Wert)	:	#eeeeee
CSS	:	#cccccc	CSS	:	#eeeeee
CSS (Wert)	:	#cccccc	CSS (Wert)	:	#eeeeee
CSS (kürzest)	:	#ccc	CSS (kürzest)	:	#eee
CSS (RGB)	:	rgb(204,204,204)	CSS (RGB)	:	rgb(238,238,238)
CSS (%RGB)	:	rgb(80%,80%,80%)	CSS (%RGB)	:	rgb(93%,93%,93%)

Verlauf Hintergrundfarbwert #cccccc nach Schriftfarbwert #eeeeee
#cccccc	#d0d0d0	#d5d5d5	#dadada	#dfdfdf	#e4e4e4	#e9e9e9	#eeeeee
#cccccc	#d0d0d0	#d5d5d5	#dadada	#dfdfdf	#e4e4e4	#e9e9e9	#eeeeee

Kombination von #cccccc und #eeeeee
Cras vestibulum tristique erat, ac interdum justo cursus in. 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.				Auf Hintergrund #cccccc ist #eeeeee ungeeignet. Sowohl Helligkeit als auch die Farben sind zu ähnlich. Die Ähnlichkeit von #eeeeee und #cccccc beträgt 93.41%. Die Lesbarkeit dieser Farbkombination liegt damit bei 6.59%.

Hintergrundfarbwert #cccccc				Schriftfarbwert #eeeeee
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#cccccc	#cccccc	#cccccc	#cccccc	#eeeeee	#eeeeee	#eeeeee	#eeeeee
#d3d3d3	#d3d3d3	#aeaeae	#aeaeae	#f0f0f0	#f0f0f0	#cccccc	#cccccc
#dadada	#dadada	#919191	#919191	#f2f2f2	#f2f2f2	#aaaaaa	#aaaaaa
#e1e1e1	#e1e1e1	#747474	#747474	#f5f5f5	#f5f5f5	#888888	#888888
#e9e9e9	#e9e9e9	#575757	#575757	#f7f7f7	#f7f7f7	#666666	#666666
#f0f0f0	#f0f0f0	#3a3a3a	#3a3a3a	#fafafa	#fafafa	#444444	#444444
#f7f7f7	#f7f7f7	#1d1d1d	#1d1d1d	#fcfcfc	#fcfcfc	#222222	#222222
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #cccccc und Farbwert #eeeeee

Hintergrund/Text-Kombination von HTML-Tag dd

Wir ändern für dieses Beispiel die Textfarbe von <dd> auf Farbwert #eeeeee und die Hintergrundfarbe von <dd> auf Farbwert #cccccc. Als Schriftart wählen wir sans-serif und als Schriftgröße entscheiden wir uns für 12pt.

<style type="text/css"><!--
  dd { 
    color: #eeeeee; 
    font-family: sans-serif; 
    background-color: #cccccc; 
    font-size: 12pt;
  }
//-->
</style>

Mehr zum Thema dd lesen Sie in Listen und Glossare in HTML. Mehr zum hier verwendeten HTML-Tag <dd>.

Wechsel der Textfarbe bei Hover mit Tag dt

Die Textfarbe soll sich von Farbwert #cccccc auf Farbwert #eeeeee ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Formatierung von <dt> in Farbwert #cccccc vor.

Für dieses Beispiel legen wir Farbwert #cccccc als Textfarbe von <dt> fest. Die Hintergrundfarbe lassen wir unverändert, setzen jedoch die Schriftart auf sans-serif und setzen die Größe der Schrift auf 81%.

<style type="text/css"><!--
  dt { 
    font-size: 81%; 
    font-family: sans-serif; 
    color: #ccc;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Hover die Textfarbe auf #eeeeee ändert.

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

Weiteres zu dt können Sie in Listen und Glossare in HTML finden. Der hier verwendete HTML-Tag dt ist in der HTML Referenz unter <dt> genau zusammengestellt.