Ressourcen: 16 Graustufen in HTML - Kombination von Farbwert #aaaaaa 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 #aaaaaa			Schriftfarbwert #000000
Detail	:	Hintergrund #aaaaaa	Detail	:	Schrift #000000
Farbwert	:	#aaaaaa	Farbwert	:	#000000
Farbe	:	gray170	Farbe	:	black
HTML	:	#aaaaaa	HTML	:	#000000
HTML (Wert)	:	#aaaaaa	HTML (Wert)	:	#000000
CSS	:	#aaaaaa	CSS	:	#000000
CSS (Wert)	:	#aaaaaa	CSS (Wert)	:	#000000
CSS (kürzest)	:	#aaa	CSS (kürzest)	:	#000
CSS (RGB)	:	rgb(170,170,170)	CSS (RGB)	:	rgb(0,0,0)
CSS (%RGB)	:	rgb(66%,66%,66%)	CSS (%RGB)	:	rgb(0%,0%,0%)

Verlauf Hintergrundfarbwert #aaaaaa nach Schriftfarbwert #000000
#aaaaaa	#919191	#797979	#616161	#484848	#303030	#181818	#000000
#aaaaaa	#919191	#797979	#616161	#484848	#303030	#181818	#000000

Kombination von #aaaaaa und #000000
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. Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				#000000 eignet sich als Schriftfarbe auf Hintergrund #aaaaaa. Die Unterschiede in Helligkeit und Farbe sind in Ordnung. Die Ähnlichkeit von #000000 und #aaaaaa beträgt 56.95%. Die Lesbarkeit dieser Farbkombination liegt damit bei 43.05%.

Hintergrundfarbwert #aaaaaa				Schriftfarbwert #000000
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#aaaaaa	#aaaaaa	#aaaaaa	#aaaaaa	#000000	#000000	#000000	#000000
#b6b6b6	#b6b6b6	#919191	#919191	#242424	#242424	#000000	#000000
#c2c2c2	#c2c2c2	#797979	#797979	#484848	#484848	#000000	#000000
#cecece	#cecece	#616161	#616161	#6d6d6d	#6d6d6d	#000000	#000000
#dadada	#dadada	#484848	#484848	#919191	#919191	#000000	#000000
#e6e6e6	#e6e6e6	#303030	#303030	#b6b6b6	#b6b6b6	#000000	#000000
#f2f2f2	#f2f2f2	#181818	#181818	#dadada	#dadada	#000000	#000000
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #aaaaaa und Farbwert #000000

Zebra-Effekt von HTML-Tag td

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, spricht man vom Zebra-Effekt. Er unterstützt das Auge, etwa die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ying und .yang für <td> mit den Hintergrundfarben Farbwert #aaaaaa und Farbwert #000000.

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

Diese werden abwechselnd verwendet.

<table>
<tr><td class="ying">N1.1</td><td class="yang">N2.1</td><td class="ying">N3.1</td></tr>
<tr><td class="ying">N1.2</td><td class="yang">N2.2</td><td class="ying">N3.2</td></tr>
<tr><td class="ying">N1.3</td><td class="yang">N2.3</td><td class="ying">N3.3</td></tr>
</table>

Weiteres zum Thema können Sie in Tabellen in HTML erfahren. Der Befehl td ist in der HTML Referenz unter <td> ausführlich gezeigt.

Wechsel der Textfarbe bei Hover bei HTML-Tag code

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

Für dieses Beispiel legen wir die Textfarbe von <code> auf Farbwert #aaaaaa fest. Die Größe der Schrift setzen wir auf 9pt:

<style type="text/css"><!--
  code { 
    font-size: 9pt; 
    color: #aaaaaa;
  }
//-->
</style>

Nun fordern wir, dass bei Mausberührung die Textfarbe auf #000000 geändert wird.

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

Mehr zum Thema code finden Sie in Text in HTML. Möglichkeiten vom Befehl code sind in der HTML Referenz unter <code> ausführlich gezeigt.