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

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			Schriftfarbwert #555555
Detail	:	Hintergrund #222222	Detail	:	Schrift #555555
Farbwert	:	#222222	Farbwert	:	#555555
Farbe	:	gray34	Farbe	:	gray85
HTML	:	#222222	HTML	:	#555555
HTML (Wert)	:	#222222	HTML (Wert)	:	#555555
CSS	:	#222222	CSS	:	#555555
CSS (Wert)	:	#222222	CSS (Wert)	:	#555555
CSS (kürzest)	:	#222	CSS (kürzest)	:	#555
CSS (RGB)	:	rgb(34,34,34)	CSS (RGB)	:	rgb(85,85,85)
CSS (%RGB)	:	rgb(13%,13%,13%)	CSS (%RGB)	:	rgb(33%,33%,33%)

Verlauf Hintergrundfarbwert #222222 nach Schriftfarbwert #555555
#222222	#292929	#303030	#373737	#3f3f3f	#464646	#4d4d4d	#555555
#222222	#292929	#303030	#373737	#3f3f3f	#464646	#4d4d4d	#555555

Kombination von #222222 und #555555
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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in.				#555555 eignet sich nicht als Schriftfarbe auf Hintergrund #222222. Sowohl Helligkeit als auch die Farben sind sich zu ähnlich. Die Ähnlichkeit der Farben #555555 und #222222 beträgt 89.84%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 10.16%.

Hintergrundfarbwert #222222				Schriftfarbwert #555555
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#222222	#222222	#222222	#222222	#555555	#555555	#555555	#555555
#414141	#414141	#1d1d1d	#1d1d1d	#6d6d6d	#6d6d6d	#484848	#484848
#616161	#616161	#181818	#181818	#858585	#858585	#3c3c3c	#3c3c3c
#808080	#808080	#131313	#131313	#9d9d9d	#9d9d9d	#303030	#303030
#a0a0a0	#a0a0a0	#0e0e0e	#0e0e0e	#b6b6b6	#b6b6b6	#242424	#242424
#bfbfbf	#bfbfbf	#090909	#090909	#cecece	#cecece	#181818	#181818
#dfdfdf	#dfdfdf	#040404	#040404	#e6e6e6	#e6e6e6	#0c0c0c	#0c0c0c
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #222222 und Farbwert #555555

Wechsel der Umrandung bei Hover von Befehl a

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

Die Rahmenfarbe soll sich von Farbwert #222222 auf Farbwert #555555 ändern, wenn man mit der Maus auf <a> zeigt. Wir bereiten zunächst die Darstellung von <a> in Farbwert #222222 vor.

In diesem Beispiel umranden wir <a> mit einem 2 Pixel dicken, doppelten Rahmen in Farbwert #222222.

<style type="text/css"><!--
  a { 
    border-color: #222222; 
    border-style: double; 
    border-width: 2px;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Berührung mit der Maus die Rahmenfarbe auf #555555 ändert.

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

Mehr zu a finden Sie in Verweise und Protokolle in HTML. Mehr zum hier verwendeten HTML-Tag a ist in der HTML Referenz bei <a> genau gezeigt.

Wechsel der Hintergrundfarbe bei Hover bei Befehl tbody

Die Hintergrundfarbe soll sich von Farbwert #222222 auf Farbwert #555555 ändern, wenn man mit der Maus auf <tbody> zeigt. Bereiten wir zunächst eine Formatierung von <tbody> in Farbwert #222222 vor.

Hier legen wir Farbwert #222222 als Hintergrundfarbe von <tbody> fest. Zwar behalten wir die Textfarbe bei, setzen jedoch die Schriftart auf arial und vergrößern die Größe der Schrift auf 123%:

<style type="text/css"><!--
  tbody { 
    font-family: arial; 
    background-color: #222; 
    font-size: 123%;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Hover die Hintergrundfarbe auf #555555 ändert.

<style type="text/css"><!--
  tbody:hover { 
    background-color:#555;
  }
//-->
</style>

Mehr zu tbody erfahren Sie in Tabellen in HTML. Der hier verwendete HTML-Befehl tbody ist in der HTML Referenz unter <tbody> ausführlich gezeigt.