Ressourcen: 16 Graustufen in HTML - Kombination von Farbwert #222222 und Farbe gray153

Graustufen enthalten insbesondere die unbunten Grundfarben Schwarz und Weiß.

Um 16 Graustufen in HTML bzw. CSS zu erzeugen, wählen wir Farbwerte rr, gg und bb mit Werten von 0 bis 15 (d.h. hexadezimal 0 bis f) für r, g und b.

Hintergrundfarbwert #222222			Schriftfarbe gray153
Detail	:	Hintergrund #222222	Detail	:	Schrift gray153
Farbwert	:	#222222	Farbe	:	gray153
Farbe	:	gray34	Farbwert	:	#999999
HTML	:	#222222	HTML	:	gray153
HTML (Wert)	:	#222222	HTML (Wert)	:	#999999
CSS	:	#222222	CSS	:	gray153
CSS (Wert)	:	#222222	CSS (Wert)	:	#999999
CSS (kürzest)	:	#222	CSS (kürzest)	:	#999
CSS (RGB)	:	rgb(34,34,34)	CSS (RGB)	:	rgb(153,153,153)
CSS (%RGB)	:	rgb(13%,13%,13%)	CSS (%RGB)	:	rgb(60%,60%,60%)

Verlauf Hintergrundfarbwert #222222 nach Schriftfarbe gray153
#222222	#333333	#444444	#555555	#666666	#777777	#888888	#999999
#222222	#333333	#444444	#555555	#666666	#777777	#888888	#999999

Kombination von #222222 und gray153
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante.				Die Ähnlichkeit der Farben gray153 und #222222 ergibt sich zu 73.41%. Die Lesbarkeit dieser Farbkombination liegt damit bei 26.59%. gray153 ist nicht als Schriftfarbe auf Hintergrund #222222 geeignet. Weder der Helligkeitsunterschied noch der Farbunterschied sind geeignet.

Hintergrundfarbwert #222222				Schriftfarbe gray153
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#222222	#222222	#222222	#222222	#999999	#999999	#999999	#999999
#414141	#414141	#1d1d1d	#1d1d1d	#a7a7a7	#a7a7a7	#838383	#838383
#616161	#616161	#181818	#181818	#b6b6b6	#b6b6b6	#6d6d6d	#6d6d6d
#808080	#808080	#131313	#131313	#c4c4c4	#c4c4c4	#575757	#575757
#a0a0a0	#a0a0a0	#0e0e0e	#0e0e0e	#d3d3d3	#d3d3d3	#414141	#414141
#bfbfbf	#bfbfbf	#090909	#090909	#e1e1e1	#e1e1e1	#2b2b2b	#2b2b2b
#dfdfdf	#dfdfdf	#040404	#040404	#f0f0f0	#f0f0f0	#151515	#151515
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #222222 und Farbe gray153

Wechsel der Textfarbe bei Hover mit Tag a

Mit HTML-Tag <a> wird ein Verweis gesetzt. Dieser kann farblich gestaltet werden.

Die Textfarbe soll sich von Farbwert #222222 auf Farbe gray153 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Formatierung von <a> in Farbwert #222222 vor.

Hier legen wir die Textfarbe von <a> auf Farbwert #222222 fest. Zwar behalten wir die Hintergrundfarbe bei, ändern jedoch die Schriftart auf courier new und vergrößern die Größe der Schrift auf 129%.

<style type="text/css"><!--
  a { 
    font-size: 129%; 
    color: #222; 
    font-family: courier new;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Mausberührung die Textfarbe auf gray153 ändert.

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

Weiteres zum Thema finden Sie in Verweise und Protokolle in HTML. Weiteres zum hier verwendeten HTML-Tag a finden Sie in der HTML Referenz unter <a>.

Hintergrund/Text-Kombination von HTML-Befehl address

Wir ändern bei diesem Beispiel die Textfarbe von <address> auf Farbe gray153 und die Hintergrundfarbe von <address> auf Farbwert #222222. Als Schriftart setzen wir courier new und setzen die Schriftgröße auf 9pt.

<style type="text/css"><!--
  address { 
    color:gray153; 
    font-size:9pt; 
    font-family:courier new; 
    background-color:#222222;
  }
//-->
</style>

Mehr zum Thema address finden Sie in Blockorientierte Elemente in HTML. Einzelheiten vom HTML-Befehl <address>.