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

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 gray17			Schriftfarbwert #cccccc
Detail	:	Hintergrund gray17	Detail	:	Schrift #cccccc
Farbe	:	gray17	Farbwert	:	#cccccc
Farbwert	:	#111111	Farbe	:	gray204
HTML	:	gray17	HTML	:	#cccccc
HTML (Wert)	:	#111111	HTML (Wert)	:	#cccccc
CSS	:	gray17	CSS	:	#cccccc
CSS (Wert)	:	#111111	CSS (Wert)	:	#cccccc
CSS (kürzest)	:	#111	CSS (kürzest)	:	#ccc
CSS (RGB)	:	rgb(17,17,17)	CSS (RGB)	:	rgb(204,204,204)
CSS (%RGB)	:	rgb(6%,6%,6%)	CSS (%RGB)	:	rgb(80%,80%,80%)

Verlauf Hintergrundfarbe gray17 nach Schriftfarbwert #cccccc
#111111	#2b2b2b	#464646	#616161	#7b7b7b	#969696	#b1b1b1	#cccccc
#111111	#2b2b2b	#464646	#616161	#7b7b7b	#969696	#b1b1b1	#cccccc

Kombination von gray17 und #cccccc
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante.				#cccccc eignet sich als Schriftfarbe auf Hintergrund gray17. Sowohl der Unterschied in den Helligkeiten als auch der Farbenunterschied sind gut. Die Ähnlichkeit der Farben #cccccc und gray17 ergibt sich zu 44.01%. Die Lesbarkeit dieser Kombination ergibt sich zu 55.99%.

Hintergrundfarbe gray17				Schriftfarbwert #cccccc
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#111111	#111111	#111111	#111111	#cccccc	#cccccc	#cccccc	#cccccc
#333333	#333333	#0e0e0e	#0e0e0e	#d3d3d3	#d3d3d3	#aeaeae	#aeaeae
#555555	#555555	#0c0c0c	#0c0c0c	#dadada	#dadada	#919191	#919191
#777777	#777777	#090909	#090909	#e1e1e1	#e1e1e1	#747474	#747474
#999999	#999999	#070707	#070707	#e9e9e9	#e9e9e9	#575757	#575757
#bbbbbb	#bbbbbb	#040404	#040404	#f0f0f0	#f0f0f0	#3a3a3a	#3a3a3a
#dddddd	#dddddd	#020202	#020202	#f7f7f7	#f7f7f7	#1d1d1d	#1d1d1d
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray17 und Farbwert #cccccc

Wechsel der Textfarbe bei Hover von HTML-Befehl pre

Die Textfarbe soll sich von Farbe gray17 auf Farbwert #cccccc ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <pre> in Farbe gray17 vor.

Zum Beispiel legen wir bei <pre> die Textfarbe auf Farbe gray17 fest. Zwar verändern wir die Hintergrundfarbe nicht, setzen jedoch die Schriftart auf arial und setzen die Größe der Schrift auf 13px:

<style type="text/css"><!--
  pre { 
    font-family:arial; 
    color:gray17; 
    font-size:13px;
  }
//-->
</style>

Nun fordern wir, dass sich bei Mausberührung die Textfarbe zu #cccccc ändert.

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

Weiteres zu pre lesen Sie in Blockorientierte Elemente in HTML. Beschreibung des HTML-Befehl <pre>.

Hintergrund/Text-Kombination mit HTML-Tag address

Hier ändern wir die Textfarbe von <address> auf Farbwert #cccccc und die Hintergrundfarbe von <address> auf Farbe gray17. Die Schriftart ändern wir auf verdana. Als Schriftgröße setzen wir 95%.

<style type="text/css"><!--
  address { 
    font-family: verdana; 
    color: #cccccc; 
    font-size: 95%; 
    background-color: gray17;
  }
//-->
</style>

Mehr zum Thema lesen Sie in Blockorientierte Elemente in HTML. Möglichkeiten vom hier genutzten Tag address finden Sie in der HTML Referenz unter <address>.