Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #afafaf und Farbe gray37

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 #afafaf			Schriftfarbe gray37
Detail	:	Hintergrund #afafaf	Detail	:	Schrift gray37
Farbwert	:	#afafaf	Farbe	:	gray37
Farbe	:	gray175	Farbwert	:	#252525
HTML	:	#afafaf	HTML	:	gray37
HTML (Wert)	:	#afafaf	HTML (Wert)	:	#252525
CSS	:	#afafaf	CSS	:	gray37
CSS (Wert)	:	#afafaf	CSS (Wert)	:	#252525
CSS (kürzest)	:	#afafaf	CSS (kürzest)	:	#252525
CSS (RGB)	:	rgb(175,175,175)	CSS (RGB)	:	rgb(37,37,37)
CSS (%RGB)	:	rgb(68%,68%,68%)	CSS (%RGB)	:	rgb(14%,14%,14%)

Verlauf Hintergrundfarbwert #afafaf nach Schriftfarbe gray37
#afafaf	#9b9b9b	#878787	#737373	#606060	#4c4c4c	#383838	#252525
#afafaf	#9b9b9b	#878787	#737373	#606060	#4c4c4c	#383838	#252525

Kombination von #afafaf und gray37
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna.				Auf Hintergrund #afafaf ist gray37 ungeeignet. Zwar ist der Helligkeitsunterschied ausreichend, doch die Farben selbst sind zu ähnlich. Die Ähnlichkeit der Farben gray37 und #afafaf beträgt 66.72%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 33.28%.

Hintergrundfarbwert #afafaf				Schriftfarbe gray37
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#afafaf	#afafaf	#afafaf	#afafaf	#252525	#252525	#252525	#252525
#bababa	#bababa	#969696	#969696	#444444	#444444	#1f1f1f	#1f1f1f
#c5c5c5	#c5c5c5	#7d7d7d	#7d7d7d	#636363	#636363	#1a1a1a	#1a1a1a
#d1d1d1	#d1d1d1	#646464	#646464	#828282	#828282	#151515	#151515
#dcdcdc	#dcdcdc	#4b4b4b	#4b4b4b	#a1a1a1	#a1a1a1	#0f0f0f	#0f0f0f
#e8e8e8	#e8e8e8	#323232	#323232	#c0c0c0	#c0c0c0	#0a0a0a	#0a0a0a
#f3f3f3	#f3f3f3	#191919	#191919	#dfdfdf	#dfdfdf	#050505	#050505
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #afafaf und Farbe gray37

Wechsel der Hintergrundfarbe bei Hover von Befehl thead

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

Wir legen z.B. Farbwert #afafaf als Hintergrundfarbe von <thead> fest. Die Textfarbe lassen wir unverändert, setzen jedoch die Schriftart auf sans-serif.

<style type="text/css"><!--
  thead { 
    background-color: #afafaf; 
    font-family: sans-serif;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Mausberührung die Hintergrundfarbe zu gray37 ändert.

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

Mehr zum Thema thead erfahren Sie in Tabellen in HTML. Möglichkeiten des hier genutzten Tag <thead>.

Füllen und Umranden mit Tag abbr

Hier umranden wir <abbr> mit einem . Den Hintergrund von <abbr> färben wir entsprechend mit Farbwert #afafaf. Dies geht mit HTML nicht. Daher formatieren wir mit CSS.

<style type="text/css"><!--
  abbr { border:2pt groove gray37; background-color:#afafaf; }
//-->
</style>

Weiteres zum hier gezeigten Befehl abbr lesen Sie in der HTML Referenz unter <abbr>.