Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #0c0c0c und Farbe gray91

Graustufen enthalten natürlich alle 16 Graustufen und insbesondere die unbunten Grundfarben Schwarz und Weiß.

Um 256 Graustufen in HTML bzw. CSS zu erzeugen, wählen wir Farbwerte rr, gg und bb mit Werten von 0 bis 255 (d.h. hexadezimal 00 bis ff).

Hintergrundfarbwert #0c0c0c			Schriftfarbe gray91
Detail	:	Hintergrund #0c0c0c	Detail	:	Schrift gray91
Farbwert	:	#0c0c0c	Farbe	:	gray91
Farbe	:	gray12	Farbwert	:	#5b5b5b
HTML	:	#0c0c0c	HTML	:	gray91
HTML (Wert)	:	#0c0c0c	HTML (Wert)	:	#5b5b5b
CSS	:	#0c0c0c	CSS	:	gray91
CSS (Wert)	:	#0c0c0c	CSS (Wert)	:	#5b5b5b
CSS (kürzest)	:	#0c0c0c	CSS (kürzest)	:	#5b5b5b
CSS (RGB)	:	rgb(12,12,12)	CSS (RGB)	:	rgb(91,91,91)
CSS (%RGB)	:	rgb(4%,4%,4%)	CSS (%RGB)	:	rgb(35%,35%,35%)

Verlauf Hintergrundfarbwert #0c0c0c nach Schriftfarbe gray91
#0c0c0c	#171717	#222222	#2d2d2d	#393939	#444444	#4f4f4f	#5b5b5b
#0c0c0c	#171717	#222222	#2d2d2d	#393939	#444444	#4f4f4f	#5b5b5b

Kombination von #0c0c0c und gray91
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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Die Ähnlichkeit der Farben gray91 und #0c0c0c ergibt sich zu 86.28%. Die Lesbarkeit dieser Farbkombination liegt damit bei 13.72%. gray91 ist nicht als Schriftfarbe auf Hintergrund #0c0c0c geeignet. Die Unterschiede in der Helligkeit und Farbe sind nicht ausreichend.

Hintergrundfarbwert #0c0c0c				Schriftfarbe gray91
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#0c0c0c	#0c0c0c	#0c0c0c	#0c0c0c	#5b5b5b	#5b5b5b	#5b5b5b	#5b5b5b
#2e2e2e	#2e2e2e	#0a0a0a	#0a0a0a	#727272	#727272	#4e4e4e	#4e4e4e
#515151	#515151	#080808	#080808	#898989	#898989	#414141	#414141
#747474	#747474	#060606	#060606	#a1a1a1	#a1a1a1	#343434	#343434
#969696	#969696	#050505	#050505	#b8b8b8	#b8b8b8	#272727	#272727
#b9b9b9	#b9b9b9	#030303	#030303	#d0d0d0	#d0d0d0	#1a1a1a	#1a1a1a
#dcdcdc	#dcdcdc	#010101	#010101	#e7e7e7	#e7e7e7	#0d0d0d	#0d0d0d
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #0c0c0c und Farbe gray91

Wechsel der Textfarbe bei Hover von HTML-Befehl s

Die Textfarbe soll sich von Farbwert #0c0c0c auf Farbe gray91 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Formatierung von <s> in Farbwert #0c0c0c vor.

Wir legen hier die Textfarbe von <s> auf Farbwert #0c0c0c fest. Die Größe der Schrift ändern wir auf 13px.

<style type="text/css"><!--
  s { 
    color:#0c0c0c; 
    font-size:13px;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Berührung mit der Maus die Textfarbe zu gray91 ändert.

<style type="text/css"><!--
  s: hover { 
    color: gray91;
  }
//-->
</style>

Mehr zu s können Sie in Text in HTML nachlesen. Möglichkeiten vom Tag s sind in der HTML Referenz unter <s> zusammengestellt.

Zebra-Effekt bei Tag tr

Man redet von einem so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Er unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .yang und .ying für <tr> mit den Hintergrundfarben Farbwert #0c0c0c und Farbe gray91.

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

Diese Klassen werden abwechselnd angewendet.

<table>
<tr class="yang"><td>I1-1</td><td>I2-1</td><td>I3-1</td></tr>
<tr class="ying"><td>I1-2</td><td>I2-2</td><td>I3-2</td></tr>
<tr class="yang"><td>I1-3</td><td>I2-3</td><td>I3-3</td></tr>
</table>

Mehr zum Thema tr erfahren Sie in Tabellen in HTML. Beschreibung vom HTML-Tag <tr>.