Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray184 und Farbwert #9d9d9d

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 gray184			Schriftfarbwert #9d9d9d
Detail	:	Hintergrund gray184	Detail	:	Schrift #9d9d9d
Farbe	:	gray184	Farbwert	:	#9d9d9d
Farbwert	:	#b8b8b8	Farbe	:	gray157
HTML	:	gray184	HTML	:	#9d9d9d
HTML (Wert)	:	#b8b8b8	HTML (Wert)	:	#9d9d9d
CSS	:	gray184	CSS	:	#9d9d9d
CSS (Wert)	:	#b8b8b8	CSS (Wert)	:	#9d9d9d
CSS (kürzest)	:	#b8b8b8	CSS (kürzest)	:	#9d9d9d
CSS (RGB)	:	rgb(184,184,184)	CSS (RGB)	:	rgb(157,157,157)
CSS (%RGB)	:	rgb(72%,72%,72%)	CSS (%RGB)	:	rgb(61%,61%,61%)

Verlauf Hintergrundfarbe gray184 nach Schriftfarbwert #9d9d9d
#b8b8b8	#b4b4b4	#b0b0b0	#acacac	#a8a8a8	#a4a4a4	#a0a0a0	#9d9d9d
#b8b8b8	#b4b4b4	#b0b0b0	#acacac	#a8a8a8	#a4a4a4	#a0a0a0	#9d9d9d

Kombination von gray184 und #9d9d9d
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				#9d9d9d ist nicht als Schriftfarbe auf Hintergrund gray184 geeignet. Die Unterschiede in der Helligkeit und Farbe sind nicht ausreichend. Die Ähnlichkeit von #9d9d9d und gray184 ergibt sich zu 93.49%. Die Lesbarkeit dieser Kombination bewerte ich mit 6.51%.

Hintergrundfarbe gray184				Schriftfarbwert #9d9d9d
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#b8b8b8	#b8b8b8	#b8b8b8	#b8b8b8	#9d9d9d	#9d9d9d	#9d9d9d	#9d9d9d
#c2c2c2	#c2c2c2	#9d9d9d	#9d9d9d	#ababab	#ababab	#868686	#868686
#cccccc	#cccccc	#838383	#838383	#b9b9b9	#b9b9b9	#707070	#707070
#d6d6d6	#d6d6d6	#696969	#696969	#c7c7c7	#c7c7c7	#595959	#595959
#e0e0e0	#e0e0e0	#4e4e4e	#4e4e4e	#d5d5d5	#d5d5d5	#434343	#434343
#eaeaea	#eaeaea	#343434	#343434	#e3e3e3	#e3e3e3	#2c2c2c	#2c2c2c
#f4f4f4	#f4f4f4	#1a1a1a	#1a1a1a	#f1f1f1	#f1f1f1	#161616	#161616
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray184 und Farbwert #9d9d9d

Wechsel der Hintergrundfarbe bei Hover bei Befehl pre

Die Hintergrundfarbe soll sich von Farbe gray184 auf Farbwert #9d9d9d ändern, wenn man mit der Maus auf <pre> zeigt. Wir bereiten zunächst eine Darstellung von <pre> in Farbe gray184 vor.

Wir legen z.B. bei <pre> die Hintergrundfarbe auf Farbe gray184 fest und setzen die Größe der Schrift auf 117%.

<style type="text/css"><!--
  pre { 
    background-color:gray184; 
    font-size:117%;
  }
//-->
</style>

Nun fordern wir, dass bei Hover die Hintergrundfarbe auf #9d9d9d geändert wird.

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

Mehr zum Thema finden Sie in Blockorientierte Elemente in HTML. Weiteres zum Befehl pre erfahren Sie in der HTML Referenz unter <pre>.

Füllen und Umranden bei Tag q

Für dieses Beispiel umranden wir <q> mit einem . Die Hintergrundfarbe für <q> färben wir entsprechend mit Farbe gray184. Dies ist mit HTML so kaum möglich. Deshalb formatieren wir mit CSS.

<style type="text/css"><!--
  q { 
    background-color:gray184; 
    border-width:3pt; 
    border-color:#9d9d9d; 
    border-style:groove;
  }
//-->
</style>

Mehr zum Befehl q finden Sie in der HTML Referenz unter <q>.