Ressourcen: 16 Graustufen in HTML - Kombination von Farbwert #cccccc 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.

Hintergrundfarbwert #cccccc			Schriftfarbwert #999999
Detail	:	Hintergrund #cccccc	Detail	:	Schrift #999999
Farbwert	:	#cccccc	Farbwert	:	#999999
Farbe	:	gray204	Farbe	:	gray153
HTML	:	#cccccc	HTML	:	#999999
HTML (Wert)	:	#cccccc	HTML (Wert)	:	#999999
CSS	:	#cccccc	CSS	:	#999999
CSS (Wert)	:	#cccccc	CSS (Wert)	:	#999999
CSS (kürzest)	:	#ccc	CSS (kürzest)	:	#999
CSS (RGB)	:	rgb(204,204,204)	CSS (RGB)	:	rgb(153,153,153)
CSS (%RGB)	:	rgb(80%,80%,80%)	CSS (%RGB)	:	rgb(60%,60%,60%)

Verlauf Hintergrundfarbwert #cccccc nach Schriftfarbwert #999999
#cccccc	#c4c4c4	#bdbdbd	#b6b6b6	#aeaeae	#a7a7a7	#a0a0a0	#999999
#cccccc	#c4c4c4	#bdbdbd	#b6b6b6	#aeaeae	#a7a7a7	#a0a0a0	#999999

Kombination von #cccccc und #999999
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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit der Farben #999999 und #cccccc ergibt sich zu 91.55%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 8.45%. #999999 ist nicht als Schriftfarbe auf Hintergrund #cccccc geeignet, weil die Unterschiede in der Helligkeit und Farbe unzureichend sind.

Hintergrundfarbwert #cccccc				Schriftfarbwert #999999
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#cccccc	#cccccc	#cccccc	#cccccc	#999999	#999999	#999999	#999999
#d3d3d3	#d3d3d3	#aeaeae	#aeaeae	#a7a7a7	#a7a7a7	#838383	#838383
#dadada	#dadada	#919191	#919191	#b6b6b6	#b6b6b6	#6d6d6d	#6d6d6d
#e1e1e1	#e1e1e1	#747474	#747474	#c4c4c4	#c4c4c4	#575757	#575757
#e9e9e9	#e9e9e9	#575757	#575757	#d3d3d3	#d3d3d3	#414141	#414141
#f0f0f0	#f0f0f0	#3a3a3a	#3a3a3a	#e1e1e1	#e1e1e1	#2b2b2b	#2b2b2b
#f7f7f7	#f7f7f7	#1d1d1d	#1d1d1d	#f0f0f0	#f0f0f0	#151515	#151515
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #cccccc und Farbwert #999999

Hintergrund/Text-Kombination mit Tag td

Wir ändern bei diesem Beispiel die Textfarbe von <td> auf Farbwert #999999 und die Hintergrundfarbe von <td> auf Farbwert #cccccc. Als Schriftart setzen wir verdana und setzen die Schriftgröße auf 13px.

<style type="text/css"><!--
  td { 
    background-color: #cccccc; 
    color: #999; 
    font-family: verdana; 
    font-size: 13px;
  }
//-->
</style>

Mehr zum Thema lesen Sie in Tabellen in HTML. Die Beschreibung vom hier gezeigten HTML-Befehl td lesen Sie in der HTML Referenz unter <td>.

Wechsel der Hintergrundfarbe bei Hover mit HTML-Tag h6

Mit HTML-Befehl <h6> wird eine Überschrift gesetzt und kann farblich gestaltet und hervorgehoben werden.

Die Hintergrundfarbe soll sich von Farbwert #cccccc auf Farbwert #999999 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Formatierung von <h6> in Farbwert #cccccc vor.

Zum Beispiel legen wir die Hintergrundfarbe von <h6> auf Farbwert #cccccc fest. Zwar lassen wir die Textfarbe unverändert, setzen jedoch die Schriftart auf monospace. Die Schriftgröße vergrößern wir auf 115%:

<style type="text/css"><!--
  h6 { 
    font-size:115%; 
    background-color:#cccccc; 
    font-family:monospace;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Berührung mit der Maus die Hintergrundfarbe auf #999999 ändert.

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

Weiteres zum Thema h6 können Sie in Grundlegende Gestaltungselemente in HTML lesen. Mehr zum hier genutzten HTML-Tag <h6>.