Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #f6f6f6 und Farbe gray244

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 #f6f6f6			Schriftfarbe gray244
Detail	:	Hintergrund #f6f6f6	Detail	:	Schrift gray244
Farbwert	:	#f6f6f6	Farbe	:	gray244
Farbe	:	gray246	Farbwert	:	#f4f4f4
HTML	:	#f6f6f6	HTML	:	gray244
HTML (Wert)	:	#f6f6f6	HTML (Wert)	:	#f4f4f4
CSS	:	#f6f6f6	CSS	:	gray244
CSS (Wert)	:	#f6f6f6	CSS (Wert)	:	#f4f4f4
CSS (kürzest)	:	#f6f6f6	CSS (kürzest)	:	#f4f4f4
CSS (RGB)	:	rgb(246,246,246)	CSS (RGB)	:	rgb(244,244,244)
CSS (%RGB)	:	rgb(96%,96%,96%)	CSS (%RGB)	:	rgb(95%,95%,95%)

Verlauf Hintergrundfarbwert #f6f6f6 nach Schriftfarbe gray244
#f6f6f6	#f5f5f5	#f5f5f5	#f5f5f5	#f4f4f4	#f4f4f4	#f4f4f4	#f4f4f4
#f6f6f6	#f5f5f5	#f5f5f5	#f5f5f5	#f4f4f4	#f4f4f4	#f4f4f4	#f4f4f4

Kombination von #f6f6f6 und gray244
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 gray244 und #f6f6f6 ergibt sich zu 95.15%. Die Lesbarkeit dieser Kombination liegt damit bei 4.85%. gray244 eignet sich nicht als Schriftfarbe auf Hintergrund #f6f6f6. Die Helligkeit und Farben sind zu ähnlich.

Hintergrundfarbwert #f6f6f6				Schriftfarbe gray244
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#f6f6f6	#f6f6f6	#f6f6f6	#f6f6f6	#f4f4f4	#f4f4f4	#f4f4f4	#f4f4f4
#f7f7f7	#f7f7f7	#d2d2d2	#d2d2d2	#f5f5f5	#f5f5f5	#d1d1d1	#d1d1d1
#f8f8f8	#f8f8f8	#afafaf	#afafaf	#f7f7f7	#f7f7f7	#aeaeae	#aeaeae
#f9f9f9	#f9f9f9	#8c8c8c	#8c8c8c	#f8f8f8	#f8f8f8	#8b8b8b	#8b8b8b
#fbfbfb	#fbfbfb	#696969	#696969	#fafafa	#fafafa	#686868	#686868
#fcfcfc	#fcfcfc	#464646	#464646	#fbfbfb	#fbfbfb	#454545	#454545
#fdfdfd	#fdfdfd	#232323	#232323	#fdfdfd	#fdfdfd	#222222	#222222
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #f6f6f6 und Farbe gray244

Wechsel der Textfarbe bei Hover mit HTML-Tag s

Die Textfarbe soll sich von Farbwert #f6f6f6 auf Farbe gray244 ändern, wenn man mit der Maus auf <s> zeigt. Bereiten wir zunächst eine Formatierung von <s> in Farbwert #f6f6f6 vor.

Wir ändern als Beispiel bei <s> die Textfarbe auf Farbwert #f6f6f6. Die Schriftgröße setzen wir auf 14pt:

<style type="text/css"><!--
  s { 
    font-size:14pt; 
    color:#f6f6f6;
  }
//-->
</style>

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

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

Mehr zu s können Sie in Text in HTML nachlesen. Einzelheiten vom hier gezeigten Befehl s sind in der HTML Referenz unter <s> genau zusammengestellt.

Zebra-Effekt von Befehl tr

Man redet von einem Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Der Effekt unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .odd und .even für <tr> mit den Hintergrundfarben Farbwert #f6f6f6 und Farbe gray244.

<style type="text/css"><!--
  tr.odd { 
    background-color:#f6f6f6;
  }
  tr.even { 
    background-color: gray244;
  }
//-->
</style>

Diese werden dann abwechselnd genutzt.

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

Mehr zum Thema können Sie in Tabellen in HTML erfahren. Zur Beschreibung vom hier genutzten HTML-Tag <tr>.