Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray143 und Farbe gray59

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 gray143			Schriftfarbe gray59
Detail	:	Hintergrund gray143	Detail	:	Schrift gray59
Farbe	:	gray143	Farbe	:	gray59
Farbwert	:	#8f8f8f	Farbwert	:	#3b3b3b
HTML	:	gray143	HTML	:	gray59
HTML (Wert)	:	#8f8f8f	HTML (Wert)	:	#3b3b3b
CSS	:	gray143	CSS	:	gray59
CSS (Wert)	:	#8f8f8f	CSS (Wert)	:	#3b3b3b
CSS (kürzest)	:	#8f8f8f	CSS (kürzest)	:	#3b3b3b
CSS (RGB)	:	rgb(143,143,143)	CSS (RGB)	:	rgb(59,59,59)
CSS (%RGB)	:	rgb(56%,56%,56%)	CSS (%RGB)	:	rgb(23%,23%,23%)

Verlauf Hintergrundfarbe gray143 nach Schriftfarbe gray59
#8f8f8f	#838383	#777777	#6b6b6b	#5f5f5f	#535353	#474747	#3b3b3b
#8f8f8f	#838383	#777777	#6b6b6b	#5f5f5f	#535353	#474747	#3b3b3b

Kombination von gray143 und gray59
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. 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.				gray59 eignet sich nicht als Schriftfarbe auf Hintergrund gray143. Die Helligkeit und Farben sind sich zu ähnlich. Die Ähnlichkeit der Farben gray59 und gray143 ergibt sich zu 83.51%. Die Lesbarkeit dieser Kombination bewerte ich mit 16.49%.

Hintergrundfarbe gray143				Schriftfarbe gray59
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#8f8f8f	#8f8f8f	#8f8f8f	#8f8f8f	#3b3b3b	#3b3b3b	#3b3b3b	#3b3b3b
#9f9f9f	#9f9f9f	#7a7a7a	#7a7a7a	#575757	#575757	#323232	#323232
#afafaf	#afafaf	#666666	#666666	#737373	#737373	#2a2a2a	#2a2a2a
#bfbfbf	#bfbfbf	#515151	#515151	#8f8f8f	#8f8f8f	#212121	#212121
#cfcfcf	#cfcfcf	#3d3d3d	#3d3d3d	#ababab	#ababab	#191919	#191919
#dfdfdf	#dfdfdf	#282828	#282828	#c7c7c7	#c7c7c7	#101010	#101010
#efefef	#efefef	#141414	#141414	#e3e3e3	#e3e3e3	#080808	#080808
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray143 und Farbe gray59

Füllen und Umranden bei Befehl del

Für dieses Beispiel umranden wir <del> mit einem 2 Punkte dicken, gepunkteten Rahmen in Farbe gray59 . Die Hintergrundfarbe für <del> färben wir mit Farbe gray143. Dies ist mit HTML nicht möglich. Wir verwenden deshalb CSS zur Formatierung.

<style type="text/css"><!--
  del { border:2pt dotted gray59; background-color:gray143; }
//-->
</style>

Mehr zum HTML-Tag del ist in der HTML Referenz bei <del> gezeigt.

Wechsel der Textfarbe bei Hover von Befehl em

Die Textfarbe soll sich von Farbe gray143 auf Farbe gray59 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Darstellung von <em> in Farbe gray143 vor.

Wir setzen in diesem Beispiel die Textfarbe von <em> auf Farbe gray143. Die Hintergrundfarbe lassen wir unverändert. Die Schriftart setzen wir auf courier new.

<style type="text/css"><!--
  em { 
    color:gray143; 
    font-family:courier new;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Hover die Textfarbe zu gray59 ändert.

<style type="text/css"><!--
  em:hover { 
    color:gray59;
  }
//-->
</style>

Weiteres zu em erfahren Sie in Text in HTML. Beschreibung des Tag <em>.