Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray211 und Farbwert #eeeeee

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 gray211			Schriftfarbwert #eeeeee
Detail	:	Hintergrund gray211	Detail	:	Schrift #eeeeee
Farbe	:	gray211	Farbwert	:	#eeeeee
Farbwert	:	#d3d3d3	Farbe	:	gray238
HTML	:	gray211	HTML	:	#eeeeee
HTML (Wert)	:	#d3d3d3	HTML (Wert)	:	#eeeeee
CSS	:	gray211	CSS	:	#eeeeee
CSS (Wert)	:	#d3d3d3	CSS (Wert)	:	#eeeeee
CSS (kürzest)	:	#d3d3d3	CSS (kürzest)	:	#eee
CSS (RGB)	:	rgb(211,211,211)	CSS (RGB)	:	rgb(238,238,238)
CSS (%RGB)	:	rgb(82%,82%,82%)	CSS (%RGB)	:	rgb(93%,93%,93%)

Verlauf Hintergrundfarbe gray211 nach Schriftfarbwert #eeeeee
#d3d3d3	#d6d6d6	#dadada	#dedede	#e2e2e2	#e6e6e6	#eaeaea	#eeeeee
#d3d3d3	#d6d6d6	#dadada	#dedede	#e2e2e2	#e6e6e6	#eaeaea	#eeeeee

Kombination von gray211 und #eeeeee
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. 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.				#eeeeee eignet sich nicht als Schriftfarbe auf Hintergrund gray211. Die Unterschiede in der Helligkeit und Farbe sind nicht ausreichend. Die Ähnlichkeit von #eeeeee und gray211 ergibt sich zu 93.86%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 6.14%.

Hintergrundfarbe gray211				Schriftfarbwert #eeeeee
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#d3d3d3	#d3d3d3	#d3d3d3	#d3d3d3	#eeeeee	#eeeeee	#eeeeee	#eeeeee
#d9d9d9	#d9d9d9	#b4b4b4	#b4b4b4	#f0f0f0	#f0f0f0	#cccccc	#cccccc
#dfdfdf	#dfdfdf	#969696	#969696	#f2f2f2	#f2f2f2	#aaaaaa	#aaaaaa
#e5e5e5	#e5e5e5	#787878	#787878	#f5f5f5	#f5f5f5	#888888	#888888
#ececec	#ececec	#5a5a5a	#5a5a5a	#f7f7f7	#f7f7f7	#666666	#666666
#f2f2f2	#f2f2f2	#3c3c3c	#3c3c3c	#fafafa	#fafafa	#444444	#444444
#f8f8f8	#f8f8f8	#1e1e1e	#1e1e1e	#fcfcfc	#fcfcfc	#222222	#222222
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray211 und Farbwert #eeeeee

Wechsel der Textfarbe bei Hover mit Befehl pre

Die Textfarbe soll sich von Farbe gray211 auf Farbwert #eeeeee ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Darstellung von <pre> in Farbe gray211 vor.

Wir legen in diesem Beispiel Farbe gray211 als Textfarbe von <pre> fest. Die Hintergrundfarbe lassen wir unverändert, ändern jedoch die Schriftart auf sans-serif und verkleinern die Größe der Schrift auf 94%:

<style type="text/css"><!--
  pre { 
    color: gray211; 
    font-size: 94%; 
    font-family: sans-serif;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Berührung mit der Maus die Textfarbe zu #eeeeee ändert.

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

Weiteres zum Thema pre finden Sie in Blockorientierte Elemente in HTML. Der hier verwendete Befehl pre ist in der HTML Referenz unter <pre> genau gezeigt.

Wechsel der Hintergrundfarbe bei Hover von Befehl textarea

Die Hintergrundfarbe soll sich von Farbe gray211 auf Farbwert #eeeeee ändern, wenn man mit der Maus auf <textarea> zeigt. Wir bereiten zunächst eine Darstellung von <textarea> in Farbe gray211 vor.

Als Beispiel legen wir die Hintergrundfarbe von <textarea> auf Farbe gray211 fest. Die Größe der Schrift verkleinern wir auf 94%:

<style type="text/css"><!--
  textarea { 
    background-color:gray211; 
    font-size:94%;
  }
//-->
</style>

Nun fordern wir, dass sich bei Berührung mit der Maus die Hintergrundfarbe auf #eeeeee ändert.

<style type="text/css"><!--
  textarea: hover { 
    background-color: #eee;
  }
//-->
</style>

Mehr zu textarea finden Sie in Formulare in HTML. Mehr zum hier genutzten Befehl textarea ist in der HTML Referenz bei <textarea> ausführlich zusammengestellt.