Ressourcen: 16 Graustufen in HTML - Kombination von Farbwert #888888 und Farbwert #000000

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.

Hintergrundfarbwert #888888			Schriftfarbwert #000000
Detail	:	Hintergrund #888888	Detail	:	Schrift #000000
Farbwert	:	#888888	Farbwert	:	#000000
Farbe	:	gray136	Farbe	:	black
HTML	:	#888888	HTML	:	#000000
HTML (Wert)	:	#888888	HTML (Wert)	:	#000000
CSS	:	#888888	CSS	:	#000000
CSS (Wert)	:	#888888	CSS (Wert)	:	#000000
CSS (kürzest)	:	#888	CSS (kürzest)	:	#000
CSS (RGB)	:	rgb(136,136,136)	CSS (RGB)	:	rgb(0,0,0)
CSS (%RGB)	:	rgb(53%,53%,53%)	CSS (%RGB)	:	rgb(0%,0%,0%)

Verlauf Hintergrundfarbwert #888888 nach Schriftfarbwert #000000
#888888	#747474	#616161	#4d4d4d	#3a3a3a	#262626	#131313	#000000
#888888	#747474	#616161	#4d4d4d	#3a3a3a	#262626	#131313	#000000

Kombination von #888888 und #000000
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante.				Die Ähnlichkeit von #000000 und #888888 beträgt 71.79%. Die Lesbarkeit dieser Kombination liegt damit bei 28.21%. Auf Hintergrund #888888 ist #000000 ungeeignet. Zwar ist der Helligkeitsunterschied gross genug, doch die Farben selbst sind zu ähnlich.

Hintergrundfarbwert #888888				Schriftfarbwert #000000
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#888888	#888888	#888888	#888888	#000000	#000000	#000000	#000000
#999999	#999999	#747474	#747474	#242424	#242424	#000000	#000000
#aaaaaa	#aaaaaa	#616161	#616161	#484848	#484848	#000000	#000000
#bbbbbb	#bbbbbb	#4d4d4d	#4d4d4d	#6d6d6d	#6d6d6d	#000000	#000000
#cccccc	#cccccc	#3a3a3a	#3a3a3a	#919191	#919191	#000000	#000000
#dddddd	#dddddd	#262626	#262626	#b6b6b6	#b6b6b6	#000000	#000000
#eeeeee	#eeeeee	#131313	#131313	#dadada	#dadada	#000000	#000000
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #888888 und Farbwert #000000

Wechsel der Textfarbe bei Hover mit HTML-Befehl dt

Die Textfarbe soll sich von Farbwert #888888 auf Farbwert #000000 ändern, wenn man mit der Maus auf <dt> zeigt. Bereiten wir zunächst die Formatierung von <dt> in Farbwert #888888 vor.

Wir legen als Beispiel die Textfarbe von <dt> auf Farbwert #888888 fest. Die Hintergrundfarbe verändern wir nicht, ändern jedoch die Schriftart auf monospace und ändern die Größe der Schrift auf 14pt.

<style type="text/css"><!--
  dt { 
    color: #888; 
    font-size: 14pt; 
    font-family: monospace;
  }
//-->
</style>

Nun stellen wir ein, dass bei Mausberührung die Textfarbe auf #000000 gesetzt wird.

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

Weiteres zum Thema erfahren Sie in Listen und Glossare in HTML. Möglichkeiten des Befehl <dt>.

Zebra-Effekt mit HTML-Befehl tr

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, spricht man von einem Zebra-Effekt. Der Effekt unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .yang und .ying für <tr> mit den Hintergrundfarben Farbwert #888888 und Farbwert #000000.

<style type="text/css"><!--
  tr.yang { 
    background-color: #888888;
  }
  tr.ying { 
    background-color:#000000;
  }
//-->
</style>

Diese Klassen werden abwechselnd verwendet.

<table>
<tr class="yang"><td>C1:1</td><td>C2:1</td><td>C3:1</td></tr>
<tr class="ying"><td>C1:2</td><td>C2:2</td><td>C3:2</td></tr>
<tr class="yang"><td>C1:3</td><td>C2:3</td><td>C3:3</td></tr>
</table>

Weiteres zum Thema können Sie in Tabellen in HTML erfahren. Zur Beschreibung des HTML-Befehl <tr>.