Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray229 und Farbe gray198

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 gray229			Schriftfarbe gray198
Detail	:	Hintergrund gray229	Detail	:	Schrift gray198
Farbe	:	gray229	Farbe	:	gray198
Farbwert	:	#e5e5e5	Farbwert	:	#c6c6c6
HTML	:	gray229	HTML	:	gray198
HTML (Wert)	:	#e5e5e5	HTML (Wert)	:	#c6c6c6
CSS	:	gray229	CSS	:	gray198
CSS (Wert)	:	#e5e5e5	CSS (Wert)	:	#c6c6c6
CSS (kürzest)	:	#e5e5e5	CSS (kürzest)	:	#c6c6c6
CSS (RGB)	:	rgb(229,229,229)	CSS (RGB)	:	rgb(198,198,198)
CSS (%RGB)	:	rgb(89%,89%,89%)	CSS (%RGB)	:	rgb(77%,77%,77%)

Verlauf Hintergrundfarbe gray229 nach Schriftfarbe gray198
#e5e5e5	#e0e0e0	#dcdcdc	#d7d7d7	#d3d3d3	#cecece	#cacaca	#c6c6c6
#e5e5e5	#e0e0e0	#dcdcdc	#d7d7d7	#d3d3d3	#cecece	#cacaca	#c6c6c6

Kombination von gray229 und gray198
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.				Die Ähnlichkeit von gray198 und gray229 ergibt sich zu 93.54%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 6.46%. gray198 ist nicht als Schriftfarbe auf Hintergrund gray229 geeignet, da die Unterschiede in der Helligkeit und Farbe nicht ausreichend sind.

Hintergrundfarbe gray229				Schriftfarbe gray198
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#e5e5e5	#e5e5e5	#e5e5e5	#e5e5e5	#c6c6c6	#c6c6c6	#c6c6c6	#c6c6c6
#e8e8e8	#e8e8e8	#c4c4c4	#c4c4c4	#cecece	#cecece	#a9a9a9	#a9a9a9
#ececec	#ececec	#a3a3a3	#a3a3a3	#d6d6d6	#d6d6d6	#8d8d8d	#8d8d8d
#f0f0f0	#f0f0f0	#828282	#828282	#dedede	#dedede	#717171	#717171
#f3f3f3	#f3f3f3	#626262	#626262	#e6e6e6	#e6e6e6	#545454	#545454
#f7f7f7	#f7f7f7	#414141	#414141	#eeeeee	#eeeeee	#383838	#383838
#fbfbfb	#fbfbfb	#202020	#202020	#f6f6f6	#f6f6f6	#1c1c1c	#1c1c1c
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray229 und Farbe gray198

Hintergrund/Text-Kombination von Befehl dt

Hier ändern wir die Textfarbe von <dt> auf Farbe gray198 und die Hintergrundfarbe von <dt> auf Farbe gray229. Als Schriftart wählen wir verdana und als Schriftgröße setzen wir 13px.

<style type="text/css"><!--
  dt { 
    font-size:13px; 
    background-color:gray229; 
    color:gray198; 
    font-family:verdana;
  }
//-->
</style>

Mehr zum Thema lesen Sie in Listen und Glossare in HTML. Die Beschreibung vom Befehl dt finden Sie in der HTML Referenz unter <dt>.

Wechsel der Umrandung bei Hover von Tag ins

Die Rahmenfarbe soll sich von Farbe gray229 auf Farbe gray198 ändern, wenn man mit der Maus auf <ins> zeigt. Wir bereiten zunächst die Formatierung von <ins> in Farbe gray229 vor.

In diesem Beispiel umranden wir <ins> mit einem 2 Pixel dicken, gefurchten Rahmen in Farbe gray229.

<style type="text/css"><!--
  ins { border:2px groove gray229; }
//-->
</style>

Nun fordern wir, dass bei Berührung mit der Maus die Rahmenfarbe auf gray198 geändert wird.

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

Weiteres zum Tag ins finden Sie in der HTML Referenz unter <ins>.