Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray54 und Farbwert #d8d8d8

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 gray54			Schriftfarbwert #d8d8d8
Detail	:	Hintergrund gray54	Detail	:	Schrift #d8d8d8
Farbe	:	gray54	Farbwert	:	#d8d8d8
Farbwert	:	#363636	Farbe	:	gray216
HTML	:	gray54	HTML	:	#d8d8d8
HTML (Wert)	:	#363636	HTML (Wert)	:	#d8d8d8
CSS	:	gray54	CSS	:	#d8d8d8
CSS (Wert)	:	#363636	CSS (Wert)	:	#d8d8d8
CSS (kürzest)	:	#363636	CSS (kürzest)	:	#d8d8d8
CSS (RGB)	:	rgb(54,54,54)	CSS (RGB)	:	rgb(216,216,216)
CSS (%RGB)	:	rgb(21%,21%,21%)	CSS (%RGB)	:	rgb(84%,84%,84%)

Verlauf Hintergrundfarbe gray54 nach Schriftfarbwert #d8d8d8
#363636	#4d4d4d	#646464	#7b7b7b	#929292	#a9a9a9	#c0c0c0	#d8d8d8
#363636	#4d4d4d	#646464	#7b7b7b	#929292	#a9a9a9	#c0c0c0	#d8d8d8

Kombination von gray54 und #d8d8d8
Cras vestibulum tristique erat, ac interdum justo cursus in. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Die Ähnlichkeit der Farben #d8d8d8 und gray54 beträgt 59.63%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 40.37%. #d8d8d8 eignet sich nicht als Schriftfarbe auf Hintergrund gray54, da der Unterschied in den Farben nicht ausreichend ist

Hintergrundfarbe gray54				Schriftfarbwert #d8d8d8
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#363636	#363636	#363636	#363636	#d8d8d8	#d8d8d8	#d8d8d8	#d8d8d8
#525252	#525252	#2e2e2e	#2e2e2e	#dddddd	#dddddd	#b9b9b9	#b9b9b9
#6f6f6f	#6f6f6f	#262626	#262626	#e3e3e3	#e3e3e3	#9a9a9a	#9a9a9a
#8c8c8c	#8c8c8c	#1e1e1e	#1e1e1e	#e8e8e8	#e8e8e8	#7b7b7b	#7b7b7b
#a8a8a8	#a8a8a8	#171717	#171717	#eeeeee	#eeeeee	#5c5c5c	#5c5c5c
#c5c5c5	#c5c5c5	#0f0f0f	#0f0f0f	#f3f3f3	#f3f3f3	#3d3d3d	#3d3d3d
#e2e2e2	#e2e2e2	#070707	#070707	#f9f9f9	#f9f9f9	#1e1e1e	#1e1e1e
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray54 und Farbwert #d8d8d8

Wechsel der Hintergrundfarbe bei Hover mit Tag legend

Die Hintergrundfarbe soll sich von Farbe gray54 auf Farbwert #d8d8d8 ändern, wenn man mit der Maus auf <legend> zeigt. Bereiten wir zunächst eine Formatierung von <legend> in Farbe gray54 vor.

Für dieses Beispiel legen wir Farbe gray54 als Hintergrundfarbe von <legend> fest. Die Textfarbe lassen wir unverändert, ändern jedoch die Schriftart auf arial:

<style type="text/css"><!--
  legend { 
    font-family: arial; 
    background-color: gray54;
  }
//-->
</style>

Jetzt stellen wir ein, dass bei Hover die Hintergrundfarbe auf #d8d8d8 geändert wird.

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

Mehr zum Thema können Sie in Formulare in HTML nachlesen. Weiteres zum hier verwendeten Tag legend lesen Sie in der HTML Referenz unter <legend>.

Wechsel der Textfarbe bei Hover von HTML-Tag pre

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

Z.B. setzen wir bei <pre> die Textfarbe auf Farbe gray54. Die Hintergrundfarbe lassen wir unverändert. Die Schriftart ändern wir auf monospace und verringern die Schriftgröße auf 85S%:

<style type="text/css"><!--
  pre { 
    font-size:85S%; 
    color:gray54; 
    font-family:monospace;
  }
//-->
</style>

Jetzt stellen wir ein, dass bei Hover die Textfarbe auf #d8d8d8 gesetzt wird.

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

Weiteres zum Thema pre finden Sie in Blockorientierte Elemente in HTML. Weiteres zum Tag pre ist in der HTML Referenz bei <pre> ausführlich gezeigt.