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

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

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

Kombination von gray74 und gray152
Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna.				gray152 eignet sich nicht als Schriftfarbe auf Hintergrund gray74, weil sich sowohl Helligkeit als auch die Farben zu ähnlich sind. Die Ähnlichkeit der Farben gray152 und gray74 beträgt 85.37%. Die Lesbarkeit dieser Farbkombination liegt damit bei 14.63%.

Hintergrundfarbe gray74				Schriftfarbe gray152
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#4a4a4a	#4a4a4a	#4a4a4a	#4a4a4a	#989898	#989898	#989898	#989898
#636363	#636363	#3f3f3f	#3f3f3f	#a6a6a6	#a6a6a6	#828282	#828282
#7d7d7d	#7d7d7d	#343434	#343434	#b5b5b5	#b5b5b5	#6c6c6c	#6c6c6c
#979797	#979797	#2a2a2a	#2a2a2a	#c4c4c4	#c4c4c4	#565656	#565656
#b1b1b1	#b1b1b1	#1f1f1f	#1f1f1f	#d2d2d2	#d2d2d2	#414141	#414141
#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 gray152

Füllen und Umranden von HTML-Befehl img

Für dieses Beispiel umranden wir <img> mit einem 1 Punkte dicken, doppelten Rahmen in Farbe gray152 . Die Hintergrundfarbe für <img> färben wir entsprechend mit Farbe gray74. Mit HTML geht das kaum. Deshalb nutzen wir hier CSS.

<style type="text/css"><!--
  img { 
    border-style:double; 
    border-width:1pt; 
    background-color:gray74; 
    border-color:gray152;
  }
//-->
</style>

Weiteres zu img können Sie in Grafik in HTML nachlesen. Mehr zum Befehl <img>.

Wechsel der Textfarbe bei Hover von HTML-Tag address

Die Textfarbe soll sich von Farbe gray74 auf Farbe gray152 ändern, wenn man mit der Maus auf <address> zeigt. Bereiten wir zunächst die Darstellung von <address> in Farbe gray74 vor.

Wir setzen in diesem Beispiel die Textfarbe von <address> auf Farbe gray74. Zwar behalten wir die Hintergrundfarbe bei, setzen jedoch die Schriftart auf monospace.

<style type="text/css"><!--
  address { 
    font-family: monospace; 
    color: gray74;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Berührung mit der Maus die Textfarbe zu gray152 ändert.

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

Weiteres zum Thema finden Sie in Blockorientierte Elemente in HTML. Möglichkeiten vom HTML-Befehl address sind in der HTML Referenz bei <address> gezeigt.