Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray53 und Farbwert #ededed

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 gray53			Schriftfarbwert #ededed
Detail	:	Hintergrund gray53	Detail	:	Schrift #ededed
Farbe	:	gray53	Farbwert	:	#ededed
Farbwert	:	#353535	Farbe	:	gray237
HTML	:	gray53	HTML	:	#ededed
HTML (Wert)	:	#353535	HTML (Wert)	:	#ededed
CSS	:	gray53	CSS	:	#ededed
CSS (Wert)	:	#353535	CSS (Wert)	:	#ededed
CSS (kürzest)	:	#353535	CSS (kürzest)	:	#ededed
CSS (RGB)	:	rgb(53,53,53)	CSS (RGB)	:	rgb(237,237,237)
CSS (%RGB)	:	rgb(20%,20%,20%)	CSS (%RGB)	:	rgb(92%,92%,92%)

Verlauf Hintergrundfarbe gray53 nach Schriftfarbwert #ededed
#353535	#4f4f4f	#696969	#838383	#9e9e9e	#b8b8b8	#d2d2d2	#ededed
#353535	#4f4f4f	#696969	#838383	#9e9e9e	#b8b8b8	#d2d2d2	#ededed

Kombination von gray53 und #ededed
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. Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				#ededed eignet sich als Schriftfarbe auf Hintergrund gray53, da Unterschied in den Helligkeiten und Farbenunterschied in Ordnung sind. Die Ähnlichkeit der Farben #ededed und gray53 ergibt sich zu 50.11%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 49.89%.

Hintergrundfarbe gray53				Schriftfarbwert #ededed
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#353535	#353535	#353535	#353535	#ededed	#ededed	#ededed	#ededed
#515151	#515151	#2d2d2d	#2d2d2d	#efefef	#efefef	#cbcbcb	#cbcbcb
#6e6e6e	#6e6e6e	#252525	#252525	#f2f2f2	#f2f2f2	#a9a9a9	#a9a9a9
#8b8b8b	#8b8b8b	#1e1e1e	#1e1e1e	#f4f4f4	#f4f4f4	#878787	#878787
#a8a8a8	#a8a8a8	#161616	#161616	#f7f7f7	#f7f7f7	#656565	#656565
#c5c5c5	#c5c5c5	#0f0f0f	#0f0f0f	#f9f9f9	#f9f9f9	#434343	#434343
#e2e2e2	#e2e2e2	#070707	#070707	#fcfcfc	#fcfcfc	#212121	#212121
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray53 und Farbwert #ededed

Wechsel der Umrandung bei Hover bei Befehl center

Die Rahmenfarbe soll sich von Farbe gray53 auf Farbwert #ededed ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Darstellung von <center> in Farbe gray53 vor.

In diesem Beispiel umranden wir <center> mit einem 5 Pixel dicken, gefurchten Rahmen in Farbe gray53.

<style type="text/css"><!--
  center { 
    border-style:groove; 
    border-color:gray53; 
    border-width:5px;
  }
//-->
</style>

Nun fordern wir, dass sich bei Hover die Rahmenfarbe zu #ededed ändert.

<style type="text/css"><!--
  center:hover { 
    border-color:#ededed;
  }
//-->
</style>

Weiteres zum Thema können Sie in Grundlegende Gestaltungselemente in HTML erfahren. Möglichkeiten des hier genutzten HTML-Befehl center sind in der HTML Referenz bei <center> ausführlich gezeigt.

Zebra-Effekt von HTML-Tag td

Man redet vom Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Der Effekt unterstützt das Auge zum Beispiel die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ungerade und .gerade für <td> mit den Hintergrundfarben Farbe gray53 und Farbwert #ededed.

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

Diese Klassen werden dann abwechselnd angewendet.

<table>
<tr><td class="ungerade">Ia/a</td><td class="gerade">Ib/a</td><td class="ungerade">Ic/a</td></tr>
<tr><td class="ungerade">Ia/b</td><td class="gerade">Ib/b</td><td class="ungerade">Ic/b</td></tr>
<tr><td class="ungerade">Ia/c</td><td class="gerade">Ib/c</td><td class="ungerade">Ic/c</td></tr>
</table>

Weiteres zum Thema können Sie in Tabellen in HTML nachlesen. Der HTML-Befehl td ist in der HTML Referenz unter <td> genau gezeigt.