Ressourcen: 16 Graustufen in HTML - Kombination von Farbe gray85 und Farbwert #444444

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.

Hintergrundfarbe gray85			Schriftfarbwert #444444
Detail	:	Hintergrund gray85	Detail	:	Schrift #444444
Farbe	:	gray85	Farbwert	:	#444444
Farbwert	:	#555555	Farbe	:	gray68
HTML	:	gray85	HTML	:	#444444
HTML (Wert)	:	#555555	HTML (Wert)	:	#444444
CSS	:	gray85	CSS	:	#444444
CSS (Wert)	:	#555555	CSS (Wert)	:	#444444
CSS (kürzest)	:	#555	CSS (kürzest)	:	#444
CSS (RGB)	:	rgb(85,85,85)	CSS (RGB)	:	rgb(68,68,68)
CSS (%RGB)	:	rgb(33%,33%,33%)	CSS (%RGB)	:	rgb(26%,26%,26%)

Verlauf Hintergrundfarbe gray85 nach Schriftfarbwert #444444
#555555	#525252	#505050	#4d4d4d	#4b4b4b	#484848	#464646	#444444
#555555	#525252	#505050	#4d4d4d	#4b4b4b	#484848	#464646	#444444

Kombination von gray85 und #444444
Cras vestibulum tristique erat, ac interdum justo cursus in. 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 id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Die Ähnlichkeit von #444444 und gray85 beträgt 93.78%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 6.22%. #444444 eignet sich nicht als Schriftfarbe auf Hintergrund gray85, weil die Helligkeit und Farben zu ähnlich sind.

Hintergrundfarbe gray85				Schriftfarbwert #444444
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#555555	#555555	#555555	#555555	#444444	#444444	#444444	#444444
#6d6d6d	#6d6d6d	#484848	#484848	#5e5e5e	#5e5e5e	#3a3a3a	#3a3a3a
#858585	#858585	#3c3c3c	#3c3c3c	#797979	#797979	#303030	#303030
#9d9d9d	#9d9d9d	#303030	#303030	#949494	#949494	#262626	#262626
#b6b6b6	#b6b6b6	#242424	#242424	#aeaeae	#aeaeae	#1d1d1d	#1d1d1d
#cecece	#cecece	#181818	#181818	#c9c9c9	#c9c9c9	#131313	#131313
#e6e6e6	#e6e6e6	#0c0c0c	#0c0c0c	#e4e4e4	#e4e4e4	#090909	#090909
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray85 und Farbwert #444444

Wechsel der Hintergrundfarbe bei Hover bei HTML-Befehl caption

Die Hintergrundfarbe soll sich von Farbe gray85 auf Farbwert #444444 ändern, wenn man mit der Maus auf <caption> zeigt. Bereiten wir zunächst die Formatierung von <caption> in Farbe gray85 vor.

Zum Beispiel legen wir Farbe gray85 als Hintergrundfarbe von <caption> fest. Die Größe der Schrift verkleinern wir auf 84%.

<style type="text/css"><!--
  caption { 
    font-size:84%; 
    background-color:gray85;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Hover die Hintergrundfarbe auf #444444 ändert.

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

Mehr zum Thema können Sie in Tabellen in HTML finden. Zur Beschreibung des HTML-Befehl <caption>.

Hintergrund/Text-Kombination mit HTML-Tag p

Hier ändern wir die Textfarbe von <p> auf Farbwert #444444 und die Hintergrundfarbe von <p> auf Farbe gray85. Die Schriftart setzen wir auf monospace und als Schriftgröße wählen wir 118%.

<style type="text/css"><!--
  p { 
    background-color: gray85; 
    font-size: 118%; 
    font-family: monospace; 
    color: #444444;
  }
//-->
</style>

Mehr zum Thema können Sie in Grundlegende Gestaltungselemente in HTML lesen. Der hier genutzte HTML-Befehl p ist in der HTML Referenz unter <p> ausführlich zusammengestellt.