Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray74 und Farbe gray151

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 gray74			Schriftfarbe gray151
Detail	:	Hintergrund gray74	Detail	:	Schrift gray151
Farbe	:	gray74	Farbe	:	gray151
Farbwert	:	#4a4a4a	Farbwert	:	#979797
HTML	:	gray74	HTML	:	gray151
HTML (Wert)	:	#4a4a4a	HTML (Wert)	:	#979797
CSS	:	gray74	CSS	:	gray151
CSS (Wert)	:	#4a4a4a	CSS (Wert)	:	#979797
CSS (kürzest)	:	#4a4a4a	CSS (kürzest)	:	#979797
CSS (RGB)	:	rgb(74,74,74)	CSS (RGB)	:	rgb(151,151,151)
CSS (%RGB)	:	rgb(29%,29%,29%)	CSS (%RGB)	:	rgb(59%,59%,59%)

Verlauf Hintergrundfarbe gray74 nach Schriftfarbe gray151
#4a4a4a	#555555	#606060	#6b6b6b	#767676	#818181	#8c8c8c	#979797
#4a4a4a	#555555	#606060	#6b6b6b	#767676	#818181	#8c8c8c	#979797

Kombination von gray74 und gray151
Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Die Ähnlichkeit der Farben gray151 und gray74 beträgt 85.55%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 14.45%. gray151 ist nicht als Schriftfarbe auf Hintergrund gray74 geeignet, da die Unterschiede in der Helligkeit und Farbe nicht ausreichend sind.

Hintergrundfarbe gray74				Schriftfarbe gray151
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#4a4a4a	#4a4a4a	#4a4a4a	#4a4a4a	#979797	#979797	#979797	#979797
#636363	#636363	#3f3f3f	#3f3f3f	#a5a5a5	#a5a5a5	#818181	#818181
#7d7d7d	#7d7d7d	#343434	#343434	#b4b4b4	#b4b4b4	#6b6b6b	#6b6b6b
#979797	#979797	#2a2a2a	#2a2a2a	#c3c3c3	#c3c3c3	#565656	#565656
#b1b1b1	#b1b1b1	#1f1f1f	#1f1f1f	#d2d2d2	#d2d2d2	#404040	#404040
#cbcbcb	#cbcbcb	#151515	#151515	#e1e1e1	#e1e1e1	#2b2b2b	#2b2b2b
#e5e5e5	#e5e5e5	#0a0a0a	#0a0a0a	#f0f0f0	#f0f0f0	#151515	#151515
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray74 und Farbe gray151

Füllen und Umranden mit Tag dt

In diesem Beispiel umranden wir <dt> mit einem gepunkteten, 1 Pixel dicken Rahmen in Farbe gray151 . Die Hintergrundfarbe für <dt> färben wir mit Farbe gray74. In HTML ist dies nicht machbar. Wir nutzen daher CSS.

<style type="text/css"><!--
  dt { border:1px dotted gray151; background-color:gray74; }
//-->
</style>

Weiteres zu dt finden Sie in Listen und Glossare in HTML. Weiteres zum hier verwendeten Tag <dt>.

Wechsel der Umrandung bei Hover bei Tag dd

Die Rahmenfarbe soll sich von Farbe gray74 auf Farbe gray151 ändern, wenn man mit der Maus auf <dd> zeigt. Wir bereiten zunächst die Darstellung von <dd> in Farbe gray74 vor.

In diesem Beispiel umranden wir <dd> mit einem 5 Pixel dicken, herausstehenden Rahmen in Farbe gray74.

<style type="text/css"><!--
  dd { 
    border-style:outset; 
    border-width:5px; 
    border-color:gray74;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Berührung mit der Maus die Rahmenfarbe zu gray151 ändert.

<style type="text/css"><!--
  dd:hover { 
    border-color:gray151;
  }
//-->
</style>

Mehr zum Thema dd finden Sie in Listen und Glossare in HTML. Der hier genutzte Tag dd ist in der HTML Referenz bei <dd> ausführlich gezeigt.