Ressourcen: 16 Graustufen in HTML - Kombination von Farbe gray17 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.

Hintergrundfarbe gray17			Schriftfarbwert #000000
Detail	:	Hintergrund gray17	Detail	:	Schrift #000000
Farbe	:	gray17	Farbwert	:	#000000
Farbwert	:	#111111	Farbe	:	black
HTML	:	gray17	HTML	:	#000000
HTML (Wert)	:	#111111	HTML (Wert)	:	#000000
CSS	:	gray17	CSS	:	#000000
CSS (Wert)	:	#111111	CSS (Wert)	:	#000000
CSS (kürzest)	:	#111	CSS (kürzest)	:	#000
CSS (RGB)	:	rgb(17,17,17)	CSS (RGB)	:	rgb(0,0,0)
CSS (%RGB)	:	rgb(6%,6%,6%)	CSS (%RGB)	:	rgb(0%,0%,0%)

Verlauf Hintergrundfarbe gray17 nach Schriftfarbwert #000000
#111111	#0e0e0e	#0c0c0c	#090909	#070707	#040404	#020202	#000000
#111111	#0e0e0e	#0c0c0c	#090909	#070707	#040404	#020202	#000000

Kombination von gray17 und #000000
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in.				#000000 ist nicht als Schriftfarbe auf Hintergrund gray17 geeignet. Die Unterschiede in der Helligkeit und Farbe sind unzureichend. Die Ähnlichkeit der Farben #000000 und gray17 ergibt sich zu 94.70%. Die Lesbarkeit dieser Kombination bewerte ich mit 5.30%.

Hintergrundfarbe gray17				Schriftfarbwert #000000
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#111111	#111111	#111111	#111111	#000000	#000000	#000000	#000000
#333333	#333333	#0e0e0e	#0e0e0e	#242424	#242424	#000000	#000000
#555555	#555555	#0c0c0c	#0c0c0c	#484848	#484848	#000000	#000000
#777777	#777777	#090909	#090909	#6d6d6d	#6d6d6d	#000000	#000000
#999999	#999999	#070707	#070707	#919191	#919191	#000000	#000000
#bbbbbb	#bbbbbb	#040404	#040404	#b6b6b6	#b6b6b6	#000000	#000000
#dddddd	#dddddd	#020202	#020202	#dadada	#dadada	#000000	#000000
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray17 und Farbwert #000000

Wechsel der Textfarbe bei Hover von HTML-Tag p

Die Textfarbe soll sich von Farbe gray17 auf Farbwert #000000 ändern, wenn man mit der Maus auf <p> zeigt. Wir bereiten zunächst eine Darstellung von <p> in Farbe gray17 vor.

Wir ändern zum Beispiel bei <p> die Textfarbe auf Farbe gray17. Zwar behalten wir die Hintergrundfarbe bei, ändern jedoch die Schriftart auf monospace und verringern die Größe der Schrift auf 91%.

<style type="text/css"><!--
  p { 
    font-family: monospace; 
    color: gray17; 
    font-size: 91%;
  }
//-->
</style>

Jetzt fordern wir, dass bei Hover die Textfarbe auf #000000 geändert wird.

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

Weiteres zu p können Sie in Grundlegende Gestaltungselemente in HTML finden. Beschreibung des Tag <p>.

Zebra-Effekt bei HTML-Befehl th

Man spricht von einem Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Dieser Effekt unterstützt das Auge zum Beispiel die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .even und .odd für <th> mit unterschiedlichen Hintergrundfarben Farbe gray17 und Farbwert #000000.

<style type="text/css"><!--
  th.even { 
    background-color:gray17;
  }
  th.odd { 
    background-color:#000;
  }
//-->
</style>

Diese werden dann abwechselnd verwendet.

<table>
<tr><td class="even">Ya~a</td><td class="odd">Yb~a</td><td class="even">Yc~a</td></tr>
<tr><td class="even">Ya~b</td><td class="odd">Yb~b</td><td class="even">Yc~b</td></tr>
<tr><td class="even">Ya~c</td><td class="odd">Yb~c</td><td class="even">Yc~c</td></tr>
</table>

Mehr zum Thema th können Sie in Tabellen in HTML nachsehen. Einzelheiten vom hier gezeigten HTML-Tag <th>.