Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray228 und Farbwert #9d9d9d

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).

Hintergrundfarbe gray228			Schriftfarbwert #9d9d9d
Detail	:	Hintergrund gray228	Detail	:	Schrift #9d9d9d
Farbe	:	gray228	Farbwert	:	#9d9d9d
Farbwert	:	#e4e4e4	Farbe	:	gray157
HTML	:	gray228	HTML	:	#9d9d9d
HTML (Wert)	:	#e4e4e4	HTML (Wert)	:	#9d9d9d
CSS	:	gray228	CSS	:	#9d9d9d
CSS (Wert)	:	#e4e4e4	CSS (Wert)	:	#9d9d9d
CSS (kürzest)	:	#e4e4e4	CSS (kürzest)	:	#9d9d9d
CSS (RGB)	:	rgb(228,228,228)	CSS (RGB)	:	rgb(157,157,157)
CSS (%RGB)	:	rgb(89%,89%,89%)	CSS (%RGB)	:	rgb(61%,61%,61%)

Verlauf Hintergrundfarbe gray228 nach Schriftfarbwert #9d9d9d
#e4e4e4	#d9d9d9	#cfcfcf	#c5c5c5	#bbbbbb	#b1b1b1	#a7a7a7	#9d9d9d
#e4e4e4	#d9d9d9	#cfcfcf	#c5c5c5	#bbbbbb	#b1b1b1	#a7a7a7	#9d9d9d

Kombination von gray228 und #9d9d9d
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 vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante.				Auf Hintergrund gray228 ist #9d9d9d ungeeignet. Die Unterschiede in der Helligkeit und Farbe sind nicht ausreichend. Die Ähnlichkeit von #9d9d9d und gray228 ergibt sich zu 89.84%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 10.16%.

Hintergrundfarbe gray228				Schriftfarbwert #9d9d9d
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#e4e4e4	#e4e4e4	#e4e4e4	#e4e4e4	#9d9d9d	#9d9d9d	#9d9d9d	#9d9d9d
#e7e7e7	#e7e7e7	#c3c3c3	#c3c3c3	#ababab	#ababab	#868686	#868686
#ebebeb	#ebebeb	#a2a2a2	#a2a2a2	#b9b9b9	#b9b9b9	#707070	#707070
#efefef	#efefef	#828282	#828282	#c7c7c7	#c7c7c7	#595959	#595959
#f3f3f3	#f3f3f3	#616161	#616161	#d5d5d5	#d5d5d5	#434343	#434343
#f7f7f7	#f7f7f7	#414141	#414141	#e3e3e3	#e3e3e3	#2c2c2c	#2c2c2c
#fbfbfb	#fbfbfb	#202020	#202020	#f1f1f1	#f1f1f1	#161616	#161616
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray228 und Farbwert #9d9d9d

Wechsel der Umrandung bei Hover bei HTML-Tag a

Einen Hyperlink setzt man mit HTML-Befehl <a>. Diesen können Sie farblich gestalten und hervorheben.

Die Rahmenfarbe soll sich von Farbe gray228 auf Farbwert #9d9d9d ändern, wenn man mit der Maus auf <a> zeigt. Bereiten wir zunächst die Darstellung von <a> in Farbe gray228 vor.

In diesem Beispiel umranden wir <a> mit einem 2 Pixel dicken, gezahnten Rahmen in Farbe gray228.

<style type="text/css"><!--
  a { border:2px ridge gray228; }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Hover die Rahmenfarbe zu #9d9d9d ändert.

<style type="text/css"><!--
  a:hover { 
    border-color:#9d9d9d;
  }
//-->
</style>

Weiteres zum Thema a können Sie in Verweise und Protokolle in HTML finden. Einzelheiten des HTML-Tag a lesen Sie in der HTML Referenz unter <a>.

Zebra-Effekt mit Tag td

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, redet man vom Zebra-Effekt. Dieser Effekt unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ungerade und .gerade für <td> mit den Hintergrundfarben Farbe gray228 und Farbwert #9d9d9d.

<style type="text/css"><!--
  td.ungerade { 
    background-color:gray228;
  }
  td.gerade { 
    background-color:#9d9d9d;
  }
//-->
</style>

Diese werden abwechselnd angewendet.

<table>
<tr><td class="ungerade">B1~1</td><td class="gerade">B2~1</td><td class="ungerade">B3~1</td></tr>
<tr><td class="ungerade">B1~2</td><td class="gerade">B2~2</td><td class="ungerade">B3~2</td></tr>
<tr><td class="ungerade">B1~3</td><td class="gerade">B2~3</td><td class="ungerade">B3~3</td></tr>
</table>

Mehr zum Thema td erfahren Sie in Tabellen in HTML. Einzelheiten des HTML-Tag td erfahren Sie in der HTML Referenz unter <td>.