Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray173 und Farbe gray157

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 gray173			Schriftfarbe gray157
Detail	:	Hintergrund gray173	Detail	:	Schrift gray157
Farbe	:	gray173	Farbe	:	gray157
Farbwert	:	#adadad	Farbwert	:	#9d9d9d
HTML	:	gray173	HTML	:	gray157
HTML (Wert)	:	#adadad	HTML (Wert)	:	#9d9d9d
CSS	:	gray173	CSS	:	gray157
CSS (Wert)	:	#adadad	CSS (Wert)	:	#9d9d9d
CSS (kürzest)	:	#adadad	CSS (kürzest)	:	#9d9d9d
CSS (RGB)	:	rgb(173,173,173)	CSS (RGB)	:	rgb(157,157,157)
CSS (%RGB)	:	rgb(67%,67%,67%)	CSS (%RGB)	:	rgb(61%,61%,61%)

Verlauf Hintergrundfarbe gray173 nach Schriftfarbe gray157
#adadad	#aaaaaa	#a8a8a8	#a6a6a6	#a3a3a3	#a1a1a1	#9f9f9f	#9d9d9d
#adadad	#aaaaaa	#a8a8a8	#a6a6a6	#a3a3a3	#a1a1a1	#9f9f9f	#9d9d9d

Kombination von gray173 und gray157
Cras id velit ante. 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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				Auf Hintergrund gray173 ist gray157 ungeeignet. Die Helligkeit und Farben sind sich zu ähnlich. Die Ähnlichkeit von gray157 und gray173 ergibt sich zu 94.25%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 5.75%.

Hintergrundfarbe gray173				Schriftfarbe gray157
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#adadad	#adadad	#adadad	#adadad	#9d9d9d	#9d9d9d	#9d9d9d	#9d9d9d
#b8b8b8	#b8b8b8	#949494	#949494	#ababab	#ababab	#868686	#868686
#c4c4c4	#c4c4c4	#7b7b7b	#7b7b7b	#b9b9b9	#b9b9b9	#707070	#707070
#d0d0d0	#d0d0d0	#626262	#626262	#c7c7c7	#c7c7c7	#595959	#595959
#dbdbdb	#dbdbdb	#4a4a4a	#4a4a4a	#d5d5d5	#d5d5d5	#434343	#434343
#e7e7e7	#e7e7e7	#313131	#313131	#e3e3e3	#e3e3e3	#2c2c2c	#2c2c2c
#f3f3f3	#f3f3f3	#181818	#181818	#f1f1f1	#f1f1f1	#161616	#161616
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray173 und Farbe gray157

Füllen und Umranden mit Tag li

Hier umranden wir <li> mit einem 3 Punkte dicken, einfallenden Rahmen in Farbe gray157 . Die Hintergrundfarbe für <li> setzen wir auf Farbe gray173. In HTML geht das kaum. Deshalb nutzen wir hier CSS.

<style type="text/css"><!--
  li { 
    background-color: gray173; 
    border-style: inset; 
    border-color: gray157; 
    border-width: 3pt;
  }
//-->
</style>

Weiteres zum Thema li erfahren Sie in Listen und Glossare in HTML. Möglichkeiten des hier genutzten Tag li finden Sie in der HTML Referenz unter <li>.

Wechsel der Hintergrundfarbe bei Hover mit Tag div

Ein Universalkontainer wird mit HTML-Befehl <div> gesetzt. Er kann farblich gestaltet werden.

Die Hintergrundfarbe soll sich von Farbe gray173 auf Farbe gray157 ändern, wenn man mit der Maus auf <div> zeigt. Bereiten wir zunächst die Formatierung von <div> in Farbe gray173 vor.

In diesem Beispiel legen wir Farbe gray173 als Hintergrundfarbe von <div> fest:

<style type="text/css"><!--
  div { 
    background-color: gray173;
  }
//-->
</style>

Jetzt stellen wir ein, dass bei Berührung mit der Maus die Hintergrundfarbe auf gray157 geändert wird.

<style type="text/css"><!--
  div: hover { 
    background-color: gray157;
  }
//-->
</style>

Weiteres zum Tag div lesen Sie in der HTML Referenz unter <div>.