Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray186 und Farbwert #121212

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 gray186			Schriftfarbwert #121212
Detail	:	Hintergrund gray186	Detail	:	Schrift #121212
Farbe	:	gray186	Farbwert	:	#121212
Farbwert	:	#bababa	Farbe	:	gray18
HTML	:	gray186	HTML	:	#121212
HTML (Wert)	:	#bababa	HTML (Wert)	:	#121212
CSS	:	gray186	CSS	:	#121212
CSS (Wert)	:	#bababa	CSS (Wert)	:	#121212
CSS (kürzest)	:	#bababa	CSS (kürzest)	:	#121212
CSS (RGB)	:	rgb(186,186,186)	CSS (RGB)	:	rgb(18,18,18)
CSS (%RGB)	:	rgb(72%,72%,72%)	CSS (%RGB)	:	rgb(7%,7%,7%)

Verlauf Hintergrundfarbe gray186 nach Schriftfarbwert #121212
#bababa	#a2a2a2	#8a8a8a	#727272	#5a5a5a	#424242	#2a2a2a	#121212
#bababa	#a2a2a2	#8a8a8a	#727272	#5a5a5a	#424242	#2a2a2a	#121212

Kombination von gray186 und #121212
Cras vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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.				Die Ähnlichkeit der Farben #121212 und gray186 beträgt 54.03%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 45.97%. #121212 eignet sich als Schriftfarbe auf Hintergrund gray186, weil die Unterschiede in Helligkeit und Farbe gut sind.

Hintergrundfarbe gray186				Schriftfarbwert #121212
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#bababa	#bababa	#bababa	#bababa	#121212	#121212	#121212	#121212
#c3c3c3	#c3c3c3	#9f9f9f	#9f9f9f	#333333	#333333	#0f0f0f	#0f0f0f
#cdcdcd	#cdcdcd	#848484	#848484	#555555	#555555	#0c0c0c	#0c0c0c
#d7d7d7	#d7d7d7	#6a6a6a	#6a6a6a	#777777	#777777	#0a0a0a	#0a0a0a
#e1e1e1	#e1e1e1	#4f4f4f	#4f4f4f	#999999	#999999	#070707	#070707
#ebebeb	#ebebeb	#353535	#353535	#bbbbbb	#bbbbbb	#050505	#050505
#f5f5f5	#f5f5f5	#1a1a1a	#1a1a1a	#dddddd	#dddddd	#020202	#020202
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray186 und Farbwert #121212

Wechsel der Textfarbe bei Hover bei Befehl acronym

Die Textfarbe soll sich von Farbe gray186 auf Farbwert #121212 ändern, wenn man mit der Maus auf <acronym> zeigt. Bereiten wir zunächst die Formatierung von <acronym> in Farbe gray186 vor.

Wir legen z.B. Farbe gray186 als Textfarbe von <acronym> fest. Zwar behalten wir die Hintergrundfarbe bei, ändern jedoch die Schriftart auf courier new und setzen die Größe der Schrift auf 9pt:

<style type="text/css"><!--
  acronym { 
    font-size: 9pt; 
    font-family: courier new; 
    color: gray186;
  }
//-->
</style>

Nun fordern wir, dass bei Hover die Textfarbe auf #121212 gesetzt wird.

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

Die Beschreibung vom HTML-Tag acronym erfahren Sie in der HTML Referenz unter <acronym>.

Füllen und Umranden bei Tag del

Für dieses Beispiel umranden wir <del> mit einem doppelten, 5 Pixel dicken Rahmen in Farbwert #121212 . Die Hintergrundfarbe für <del> setzen wir entsprechend auf Farbe gray186. In HTML geht dies nicht. Wir verwenden deshalb CSS zur Formatierung.

<style type="text/css"><!--
  del { border:5px double #121212; background-color:gray186; }
//-->
</style>

Der HTML-Tag del ist in der HTML Referenz unter <del> ausführlich beschrieben.