Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray65 und Farbe gray155

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 gray65			Schriftfarbe gray155
Detail	:	Hintergrund gray65	Detail	:	Schrift gray155
Farbe	:	gray65	Farbe	:	gray155
Farbwert	:	#414141	Farbwert	:	#9b9b9b
HTML	:	gray65	HTML	:	gray155
HTML (Wert)	:	#414141	HTML (Wert)	:	#9b9b9b
CSS	:	gray65	CSS	:	gray155
CSS (Wert)	:	#414141	CSS (Wert)	:	#9b9b9b
CSS (kürzest)	:	#414141	CSS (kürzest)	:	#9b9b9b
CSS (RGB)	:	rgb(65,65,65)	CSS (RGB)	:	rgb(155,155,155)
CSS (%RGB)	:	rgb(25%,25%,25%)	CSS (%RGB)	:	rgb(60%,60%,60%)

Verlauf Hintergrundfarbe gray65 nach Schriftfarbe gray155
#414141	#4d4d4d	#5a5a5a	#676767	#747474	#818181	#8e8e8e	#9b9b9b
#414141	#4d4d4d	#5a5a5a	#676767	#747474	#818181	#8e8e8e	#9b9b9b

Kombination von gray65 und gray155
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante.				gray155 ist nicht als Schriftfarbe auf Hintergrund gray65 geeignet, da die Helligkeit und Farben zu ähnlich sind. Die Ähnlichkeit von gray155 und gray65 beträgt 82.51%. Die Lesbarkeit dieser Kombination ergibt sich zu 17.49%.

Hintergrundfarbe gray65				Schriftfarbe gray155
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#414141	#414141	#414141	#414141	#9b9b9b	#9b9b9b	#9b9b9b	#9b9b9b
#5c5c5c	#5c5c5c	#373737	#373737	#a9a9a9	#a9a9a9	#848484	#848484
#777777	#777777	#2e2e2e	#2e2e2e	#b7b7b7	#b7b7b7	#6e6e6e	#6e6e6e
#929292	#929292	#252525	#252525	#c5c5c5	#c5c5c5	#585858	#585858
#adadad	#adadad	#1b1b1b	#1b1b1b	#d4d4d4	#d4d4d4	#424242	#424242
#c8c8c8	#c8c8c8	#121212	#121212	#e2e2e2	#e2e2e2	#2c2c2c	#2c2c2c
#e3e3e3	#e3e3e3	#090909	#090909	#f0f0f0	#f0f0f0	#161616	#161616
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiel zur Kombination von Farbe gray65 und Farbe gray155

Wechsel der Hintergrundfarbe bei Hover von HTML-Tag pre

Die Hintergrundfarbe soll sich von Farbe gray65 auf Farbe gray155 ändern, wenn man mit der Maus auf <pre> zeigt. Bereiten wir zunächst die Formatierung von <pre> in Farbe gray65 vor.

Zum Beispiel legen wir Farbe gray65 als Hintergrundfarbe von <pre> fest. Zwar verändern wir die Textfarbe nicht, ändern jedoch die Schriftart auf monospace.

<style type="text/css"><!--
  pre { 
    background-color: gray65; 
    font-family: monospace;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Mausberührung die Hintergrundfarbe zu gray155 ändert.

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

Weiteres zum Thema lesen Sie in Blockorientierte Elemente in HTML. Einzelheiten vom HTML-Befehl <pre>.