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

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 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
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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in.				#cccccc eignet sich als Schriftfarbe auf Hintergrund gray17, weil die Unterschiede in Helligkeit und Farbe gut sind. Die Ähnlichkeit der Farben #cccccc und gray17 ergibt sich zu 44.01%. Die Lesbarkeit dieser Kombination bewerte ich mit 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 bei Befehl a

Mit Tag <a> erzeugen Sie einen Link. Dieser kann farblich gestaltet und hervorgehoben werden.

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

Hier setzen wir bei <a> die Textfarbe auf Farbe gray17. Zwar behalten wir die Hintergrundfarbe bei, setzen jedoch die Schriftart auf sans-serif.

<style type="text/css"><!--
  a { 
    font-family: sans-serif; 
    color: gray17;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Berührung mit der Maus die Textfarbe auf #cccccc ändert.

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

Mehr zum Thema a erfahren Sie in Verweise und Protokolle in HTML. Möglichkeiten vom hier verwendeten HTML-Tag a finden Sie in der HTML Referenz unter <a>.

Hintergrund/Text-Kombination mit Befehl strong

Für dieses Beispiel ändern wir die Textfarbe von <strong> auf Farbwert #cccccc und die Hintergrundfarbe von <strong> auf Farbe gray17. Die Schriftart ändern wir auf monospace. Die Schriftgröße vergrößern wir auf 118%.

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

Mehr zum Thema strong erfahren Sie in Text in HTML. Weiteres zum HTML-Befehl strong ist in der HTML Referenz unter <strong> ausführlich zusammengestellt.