Ressourcen: 16 Graustufen in HTML - Kombination von Farbe gray51 und Farbwert #bbbbbb

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 gray51			Schriftfarbwert #bbbbbb
Detail	:	Hintergrund gray51	Detail	:	Schrift #bbbbbb
Farbe	:	gray51	Farbwert	:	#bbbbbb
Farbwert	:	#333333	Farbe	:	gray187
HTML	:	gray51	HTML	:	#bbbbbb
HTML (Wert)	:	#333333	HTML (Wert)	:	#bbbbbb
CSS	:	gray51	CSS	:	#bbbbbb
CSS (Wert)	:	#333333	CSS (Wert)	:	#bbbbbb
CSS (kürzest)	:	#333	CSS (kürzest)	:	#bbb
CSS (RGB)	:	rgb(51,51,51)	CSS (RGB)	:	rgb(187,187,187)
CSS (%RGB)	:	rgb(20%,20%,20%)	CSS (%RGB)	:	rgb(73%,73%,73%)

Verlauf Hintergrundfarbe gray51 nach Schriftfarbwert #bbbbbb
#333333	#464646	#595959	#6d6d6d	#808080	#949494	#a7a7a7	#bbbbbb
#333333	#464646	#595959	#6d6d6d	#808080	#949494	#a7a7a7	#bbbbbb

Kombination von gray51 und #bbbbbb
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. 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.				#bbbbbb eignet sich nicht als Schriftfarbe auf Hintergrund gray51. Zwar ist der Helligkeitsunterschied gut, die Farben selbst sind sich jedoch zu ähnlich. Die Ähnlichkeit von #bbbbbb und gray51 beträgt 68.66%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 31.34%.

Hintergrundfarbe gray51				Schriftfarbwert #bbbbbb
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#333333	#333333	#333333	#333333	#bbbbbb	#bbbbbb	#bbbbbb	#bbbbbb
#505050	#505050	#2b2b2b	#2b2b2b	#c4c4c4	#c4c4c4	#a0a0a0	#a0a0a0
#6d6d6d	#6d6d6d	#242424	#242424	#cecece	#cecece	#858585	#858585
#8a8a8a	#8a8a8a	#1d1d1d	#1d1d1d	#d8d8d8	#d8d8d8	#6a6a6a	#6a6a6a
#a7a7a7	#a7a7a7	#151515	#151515	#e1e1e1	#e1e1e1	#505050	#505050
#c4c4c4	#c4c4c4	#0e0e0e	#0e0e0e	#ebebeb	#ebebeb	#353535	#353535
#e1e1e1	#e1e1e1	#070707	#070707	#f5f5f5	#f5f5f5	#1a1a1a	#1a1a1a
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray51 und Farbwert #bbbbbb

Wechsel der Textfarbe bei Hover von Befehl dt

Die Textfarbe soll sich von Farbe gray51 auf Farbwert #bbbbbb ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Formatierung von <dt> in Farbe gray51 vor.

Wir legen z.B. Farbe gray51 als Textfarbe von <dt> fest. Zwar lassen wir die Hintergrundfarbe unverändert, ändern jedoch die Schriftart auf verdana. Die Schriftgröße ändern wir auf 9px:

<style type="text/css"><!--
  dt { 
    color:gray51; 
    font-size:9px; 
    font-family:verdana;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Hover die Textfarbe zu #bbbbbb ändert.

<style type="text/css"><!--
  dt:hover { 
    color:#bbb;
  }
//-->
</style>

Weiteres zum Thema finden Sie in Listen und Glossare in HTML. Einzelheiten vom HTML-Befehl dt lesen Sie in der HTML Referenz unter <dt>.

Zebra-Effekt von Befehl tr

Man redet von einem so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Der Effekt unterstützt das Auge zum Beispiel die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ungerade und .gerade für <tr> mit unterschiedlichen Hintergrundfarben Farbe gray51 und Farbwert #bbbbbb.

<style type="text/css"><!--
  tr.ungerade { 
    background-color: gray51;
  }
  tr.gerade { 
    background-color: #bbb;
  }
//-->
</style>

Diese Klassen werden dann abwechselnd genutzt.

<table>
<tr class="ungerade"><td>Ca/a</td><td>Cb/a</td><td>Cc/a</td></tr>
<tr class="gerade"><td>Ca/b</td><td>Cb/b</td><td>Cc/b</td></tr>
<tr class="ungerade"><td>Ca/c</td><td>Cb/c</td><td>Cc/c</td></tr>
</table>

Weiteres zu tr lesen Sie in Tabellen in HTML. Der HTML-Tag tr ist in der HTML Referenz bei <tr> ausführlich gezeigt.