Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #575757 und Farbe gray3

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).

Hintergrundfarbwert #575757			Schriftfarbe gray3
Detail	:	Hintergrund #575757	Detail	:	Schrift gray3
Farbwert	:	#575757	Farbe	:	gray3
Farbe	:	gray87	Farbwert	:	#030303
HTML	:	#575757	HTML	:	gray3
HTML (Wert)	:	#575757	HTML (Wert)	:	#030303
CSS	:	#575757	CSS	:	gray3
CSS (Wert)	:	#575757	CSS (Wert)	:	#030303
CSS (kürzest)	:	#575757	CSS (kürzest)	:	#030303
CSS (RGB)	:	rgb(87,87,87)	CSS (RGB)	:	rgb(3,3,3)
CSS (%RGB)	:	rgb(34%,34%,34%)	CSS (%RGB)	:	rgb(1%,1%,1%)

Verlauf Hintergrundfarbwert #575757 nach Schriftfarbe gray3
#575757	#4b4b4b	#3f3f3f	#333333	#272727	#1b1b1b	#0f0f0f	#030303
#575757	#4b4b4b	#3f3f3f	#333333	#272727	#1b1b1b	#0f0f0f	#030303

Kombination von #575757 und gray3
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. Cras id velit ante.				Auf Hintergrund #575757 ist gray3 ungeeignet, da sich die Helligkeit und Farben zu ähnlich sind. Die Ähnlichkeit von gray3 und #575757 beträgt 86.41%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 13.59%.

Hintergrundfarbwert #575757				Schriftfarbe gray3
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#575757	#575757	#575757	#575757	#030303	#030303	#030303	#030303
#6f6f6f	#6f6f6f	#4a4a4a	#4a4a4a	#272727	#272727	#020202	#020202
#878787	#878787	#3e3e3e	#3e3e3e	#4b4b4b	#4b4b4b	#020202	#020202
#9f9f9f	#9f9f9f	#313131	#313131	#6f6f6f	#6f6f6f	#010101	#010101
#b7b7b7	#b7b7b7	#252525	#252525	#939393	#939393	#010101	#010101
#cfcfcf	#cfcfcf	#181818	#181818	#b7b7b7	#b7b7b7	#000000	#000000
#e7e7e7	#e7e7e7	#0c0c0c	#0c0c0c	#dbdbdb	#dbdbdb	#000000	#000000
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #575757 und Farbe gray3

Hintergrund/Text-Kombination mit HTML-Befehl div

Ein Kontainer wird mit HTML-Befehl <div> erzeugt und kann farblich gestaltet und hervorgehoben werden.

Wir ändern für dieses Beispiel die Textfarbe von <div> auf Farbe gray3 und die Hintergrundfarbe von <div> auf Farbwert #575757. Die Schriftart ändern wir auf arial. Als Schriftgröße setzen wir 85%.

<style type="text/css"><!--
  div { 
    color:gray3; 
    background-color:#575757; 
    font-size:85%; 
    font-family:arial;
  }
//-->
</style>

Weiteres zum hier gezeigten HTML-Befehl <div>.

Wechsel der Hintergrundfarbe bei Hover bei Tag caption

Die Hintergrundfarbe soll sich von Farbwert #575757 auf Farbe gray3 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Darstellung von <caption> in Farbwert #575757 vor.

Als Beispiel setzen wir bei <caption> die Hintergrundfarbe auf Farbwert #575757. Zwar verändern wir die Textfarbe nicht, ändern jedoch die Schriftart auf courier new. Die Schriftgröße verkleinern wir auf 87%.

<style type="text/css"><!--
  caption { 
    background-color: #575757; 
    font-size: 87%; 
    font-family: courier new;
  }
//-->
</style>

Jetzt fordern wir, dass bei Berührung mit der Maus die Hintergrundfarbe auf gray3 gesetzt wird.

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

Mehr zum Thema caption können Sie in Tabellen in HTML nachsehen. Einzelheiten des HTML-Tag caption sind in der HTML Referenz bei <caption> genau zusammengestellt.