Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray107 und Farbwert #d4d4d4

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 gray107			Schriftfarbwert #d4d4d4
Detail	:	Hintergrund gray107	Detail	:	Schrift #d4d4d4
Farbe	:	gray107	Farbwert	:	#d4d4d4
Farbwert	:	#6b6b6b	Farbe	:	gray212
HTML	:	gray107	HTML	:	#d4d4d4
HTML (Wert)	:	#6b6b6b	HTML (Wert)	:	#d4d4d4
CSS	:	gray107	CSS	:	#d4d4d4
CSS (Wert)	:	#6b6b6b	CSS (Wert)	:	#d4d4d4
CSS (kürzest)	:	#6b6b6b	CSS (kürzest)	:	#d4d4d4
CSS (RGB)	:	rgb(107,107,107)	CSS (RGB)	:	rgb(212,212,212)
CSS (%RGB)	:	rgb(41%,41%,41%)	CSS (%RGB)	:	rgb(83%,83%,83%)

Verlauf Hintergrundfarbe gray107 nach Schriftfarbwert #d4d4d4
#6b6b6b	#7a7a7a	#898989	#989898	#a7a7a7	#b6b6b6	#c5c5c5	#d4d4d4
#6b6b6b	#7a7a7a	#898989	#989898	#a7a7a7	#b6b6b6	#c5c5c5	#d4d4d4

Kombination von gray107 und #d4d4d4
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. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				Die Ähnlichkeit von #d4d4d4 und gray107 beträgt 82.88%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 17.12%. #d4d4d4 eignet sich nicht als Schriftfarbe auf Hintergrund gray107. Die Unterschiede in der Helligkeit und Farbe sind zu gering.

Hintergrundfarbe gray107				Schriftfarbwert #d4d4d4
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#6b6b6b	#6b6b6b	#6b6b6b	#6b6b6b	#d4d4d4	#d4d4d4	#d4d4d4	#d4d4d4
#808080	#808080	#5b5b5b	#5b5b5b	#dadada	#dadada	#b5b5b5	#b5b5b5
#959595	#959595	#4c4c4c	#4c4c4c	#e0e0e0	#e0e0e0	#979797	#979797
#aaaaaa	#aaaaaa	#3d3d3d	#3d3d3d	#e6e6e6	#e6e6e6	#797979	#797979
#bfbfbf	#bfbfbf	#2d2d2d	#2d2d2d	#ececec	#ececec	#5a5a5a	#5a5a5a
#d4d4d4	#d4d4d4	#1e1e1e	#1e1e1e	#f2f2f2	#f2f2f2	#3c3c3c	#3c3c3c
#e9e9e9	#e9e9e9	#0f0f0f	#0f0f0f	#f8f8f8	#f8f8f8	#1e1e1e	#1e1e1e
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray107 und Farbwert #d4d4d4

Hintergrund/Text-Kombination bei Tag blockquote

Hier ändern wir die Textfarbe von <blockquote> auf Farbwert #d4d4d4 und die Hintergrundfarbe von <blockquote> auf Farbe gray107. Als Schriftart setzen wir courier new und als Schriftgröße entscheiden wir uns für 80%.

<style type="text/css"><!--
  blockquote { 
    color: #d4d4d4; 
    background-color: gray107; 
    font-family: courier new; 
    font-size: 80%;
  }
//-->
</style>

Weiteres zum Thema blockquote können Sie in Blockorientierte Elemente in HTML lesen. Weiteres zum Befehl blockquote erfahren Sie in der HTML Referenz unter <blockquote>.

Wechsel der Hintergrundfarbe bei Hover mit Tag p

Die Hintergrundfarbe soll sich von Farbe gray107 auf Farbwert #d4d4d4 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <p> in Farbe gray107 vor.

Zum Beispiel legen wir Farbe gray107 als Hintergrundfarbe von <p> fest. Zwar behalten wir die Textfarbe bei, ändern jedoch die Schriftart auf courier new. Die Größe der Schrift ändern wir auf 12pt:

<style type="text/css"><!--
  p { 
    background-color:gray107; 
    font-family:courier new; 
    font-size:12pt;
  }
//-->
</style>

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

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

Mehr zum Thema p lesen Sie in Grundlegende Gestaltungselemente in HTML. Weiteres zum hier verwendeten Befehl p finden Sie in der HTML Referenz unter <p>.