Ressourcen: 16 Graustufen in HTML - Kombination von Farbe gray102 und Farbwert #777777

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 gray102			Schriftfarbwert #777777
Detail	:	Hintergrund gray102	Detail	:	Schrift #777777
Farbe	:	gray102	Farbwert	:	#777777
Farbwert	:	#666666	Farbe	:	gray119
HTML	:	gray102	HTML	:	#777777
HTML (Wert)	:	#666666	HTML (Wert)	:	#777777
CSS	:	gray102	CSS	:	#777777
CSS (Wert)	:	#666666	CSS (Wert)	:	#777777
CSS (kürzest)	:	#666	CSS (kürzest)	:	#777
CSS (RGB)	:	rgb(102,102,102)	CSS (RGB)	:	rgb(119,119,119)
CSS (%RGB)	:	rgb(40%,40%,40%)	CSS (%RGB)	:	rgb(46%,46%,46%)

Verlauf Hintergrundfarbe gray102 nach Schriftfarbwert #777777
#666666	#686868	#6a6a6a	#6d6d6d	#6f6f6f	#727272	#747474	#777777
#666666	#686868	#6a6a6a	#6d6d6d	#6f6f6f	#727272	#747474	#777777

Kombination von gray102 und #777777
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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante.				#777777 eignet sich nicht als Schriftfarbe auf Hintergrund gray102, da die Unterschiede in der Helligkeit und Farbe unzureichend sind. Die Ähnlichkeit der Farben #777777 und gray102 beträgt 93.89%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 6.11%.

Hintergrundfarbe gray102				Schriftfarbwert #777777
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#666666	#666666	#666666	#666666	#777777	#777777	#777777	#777777
#7b7b7b	#7b7b7b	#575757	#575757	#8a8a8a	#8a8a8a	#666666	#666666
#919191	#919191	#484848	#484848	#9d9d9d	#9d9d9d	#555555	#555555
#a7a7a7	#a7a7a7	#3a3a3a	#3a3a3a	#b1b1b1	#b1b1b1	#444444	#444444
#bdbdbd	#bdbdbd	#2b2b2b	#2b2b2b	#c4c4c4	#c4c4c4	#333333	#333333
#d3d3d3	#d3d3d3	#1d1d1d	#1d1d1d	#d8d8d8	#d8d8d8	#222222	#222222
#e9e9e9	#e9e9e9	#0e0e0e	#0e0e0e	#ebebeb	#ebebeb	#111111	#111111
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray102 und Farbwert #777777

Wechsel der Hintergrundfarbe bei Hover mit HTML-Befehl label

Die Hintergrundfarbe soll sich von Farbe gray102 auf Farbwert #777777 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <label> in Farbe gray102 vor.

Wir legen z.B. Farbe gray102 als Hintergrundfarbe von <label> fest und verkleinern die Größe der Schrift auf 91%:

<style type="text/css"><!--
  label { 
    background-color: gray102; 
    font-size: 91%;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Berührung mit der Maus die Hintergrundfarbe zu #777777 ändert.

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

Weiteres zu label können Sie in Formulare in HTML finden. Weiteres zum hier gezeigten HTML-Tag label erfahren Sie in der HTML Referenz unter <label>.

Zebra-Effekt von HTML-Tag tr

Man spricht vom Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Dieser Effekt unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .gerade und .ungerade für <tr> mit unterschiedlichen Hintergrundfarben Farbe gray102 und Farbwert #777777.

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

Diese CSS-Klassen werden abwechselnd verwendet.

<table>
<tr class="gerade"><td>Ta-a</td><td>Tb-a</td><td>Tc-a</td></tr>
<tr class="ungerade"><td>Ta-b</td><td>Tb-b</td><td>Tc-b</td></tr>
<tr class="gerade"><td>Ta-c</td><td>Tb-c</td><td>Tc-c</td></tr>
</table>

Mehr zum Thema können Sie in Tabellen in HTML lesen. Weiteres zum hier verwendeten Tag <tr>.