Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray40 und Farbe gray227

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 gray40			Schriftfarbe gray227
Detail	:	Hintergrund gray40	Detail	:	Schrift gray227
Farbe	:	gray40	Farbe	:	gray227
Farbwert	:	#282828	Farbwert	:	#e3e3e3
HTML	:	gray40	HTML	:	gray227
HTML (Wert)	:	#282828	HTML (Wert)	:	#e3e3e3
CSS	:	gray40	CSS	:	gray227
CSS (Wert)	:	#282828	CSS (Wert)	:	#e3e3e3
CSS (kürzest)	:	#282828	CSS (kürzest)	:	#e3e3e3
CSS (RGB)	:	rgb(40,40,40)	CSS (RGB)	:	rgb(227,227,227)
CSS (%RGB)	:	rgb(15%,15%,15%)	CSS (%RGB)	:	rgb(89%,89%,89%)

Verlauf Hintergrundfarbe gray40 nach Schriftfarbe gray227
#282828	#424242	#5d5d5d	#787878	#929292	#adadad	#c8c8c8	#e3e3e3
#282828	#424242	#5d5d5d	#787878	#929292	#adadad	#c8c8c8	#e3e3e3

Kombination von gray40 und gray227
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. 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.				gray227 eignet sich als Schriftfarbe auf Hintergrund gray40. Sowohl der Helligkeitsunterschied als auch der Farbenunterschied sind ok. Die Ähnlichkeit der Farben gray227 und gray40 ergibt sich zu 45.30%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 54.70%.

Hintergrundfarbe gray40				Schriftfarbe gray227
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#282828	#282828	#282828	#282828	#e3e3e3	#e3e3e3	#e3e3e3	#e3e3e3
#464646	#464646	#222222	#222222	#e7e7e7	#e7e7e7	#c2c2c2	#c2c2c2
#656565	#656565	#1c1c1c	#1c1c1c	#ebebeb	#ebebeb	#a2a2a2	#a2a2a2
#848484	#848484	#161616	#161616	#efefef	#efefef	#818181	#818181
#a2a2a2	#a2a2a2	#111111	#111111	#f3f3f3	#f3f3f3	#616161	#616161
#c1c1c1	#c1c1c1	#0b0b0b	#0b0b0b	#f7f7f7	#f7f7f7	#404040	#404040
#e0e0e0	#e0e0e0	#050505	#050505	#fbfbfb	#fbfbfb	#202020	#202020
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiel zur Kombination von Farbe gray40 und Farbe gray227

Wechsel der Textfarbe bei Hover bei Tag q

Die Textfarbe soll sich von Farbe gray40 auf Farbe gray227 ändern, wenn man mit der Maus auf <q> zeigt. Wir bereiten zunächst eine Formatierung von <q> in Farbe gray40 vor.

Zum Beispiel legen wir die Textfarbe von <q> auf Farbe gray40 fest. Zwar behalten wir die Hintergrundfarbe bei, ändern jedoch die Schriftart auf courier new. Die Größe der Schrift setzen wir auf 114%.

<style type="text/css"><!--
  q { 
    font-size:114%; 
    color:gray40; 
    font-family:courier new;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Mausberührung die Textfarbe zu gray227 ändert.

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

Mehr zum HTML-Befehl q ist in der HTML Referenz bei <q> zusammengestellt.