Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #2a2a2a und Farbwert #717171

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 #2a2a2a			Schriftfarbwert #717171
Detail	:	Hintergrund #2a2a2a	Detail	:	Schrift #717171
Farbwert	:	#2a2a2a	Farbwert	:	#717171
Farbe	:	gray42	Farbe	:	gray113
HTML	:	#2a2a2a	HTML	:	#717171
HTML (Wert)	:	#2a2a2a	HTML (Wert)	:	#717171
CSS	:	#2a2a2a	CSS	:	#717171
CSS (Wert)	:	#2a2a2a	CSS (Wert)	:	#717171
CSS (kürzest)	:	#2a2a2a	CSS (kürzest)	:	#717171
CSS (RGB)	:	rgb(42,42,42)	CSS (RGB)	:	rgb(113,113,113)
CSS (%RGB)	:	rgb(16%,16%,16%)	CSS (%RGB)	:	rgb(44%,44%,44%)

Verlauf Hintergrundfarbwert #2a2a2a nach Schriftfarbwert #717171
#2a2a2a	#343434	#3e3e3e	#484848	#525252	#5c5c5c	#666666	#717171
#2a2a2a	#343434	#3e3e3e	#484848	#525252	#5c5c5c	#666666	#717171

Kombination von #2a2a2a und #717171
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. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna.				Auf Hintergrund #2a2a2a ist #717171 ungeeignet, da sich die Helligkeit und Farben zu ähnlich sind. Die Ähnlichkeit von #717171 und #2a2a2a beträgt 86.00%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 14.00%.

Hintergrundfarbwert #2a2a2a				Schriftfarbwert #717171
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#2a2a2a	#2a2a2a	#2a2a2a	#2a2a2a	#717171	#717171	#717171	#717171
#484848	#484848	#242424	#242424	#858585	#858585	#606060	#606060
#666666	#666666	#1e1e1e	#1e1e1e	#999999	#999999	#505050	#505050
#858585	#858585	#181818	#181818	#adadad	#adadad	#404040	#404040
#a3a3a3	#a3a3a3	#121212	#121212	#c2c2c2	#c2c2c2	#303030	#303030
#c2c2c2	#c2c2c2	#0c0c0c	#0c0c0c	#d6d6d6	#d6d6d6	#202020	#202020
#e0e0e0	#e0e0e0	#060606	#060606	#eaeaea	#eaeaea	#101010	#101010
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #2a2a2a und Farbwert #717171

Wechsel der Hintergrundfarbe bei Hover bei Tag address

Die Hintergrundfarbe soll sich von Farbwert #2a2a2a auf Farbwert #717171 ändern, wenn man mit der Maus auf <address> zeigt. Bereiten wir zunächst die Darstellung von <address> in Farbwert #2a2a2a vor.

Wir legen hier bei <address> die Hintergrundfarbe auf Farbwert #2a2a2a fest. Die Größe der Schrift setzen wir auf 96%:

<style type="text/css"><!--
  address { 
    font-size: 96%; 
    background-color: #2a2a2a;
  }
//-->
</style>

Nun fordern wir, dass sich bei Hover die Hintergrundfarbe auf #717171 ändert.

<style type="text/css"><!--
  address: hover { 
    background-color: #717171;
  }
//-->
</style>

Mehr zum Thema können Sie in Blockorientierte Elemente in HTML nachlesen. Die Beschreibung vom hier genutzten HTML-Tag address finden Sie in der HTML Referenz unter <address>.

Zebra-Effekt bei Tag td

Man spricht von einem Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Der Effekt unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ying und .yang für <td> mit unterschiedlichen Hintergrundfarben Farbwert #2a2a2a und Farbwert #717171.

<style type="text/css"><!--
  td.ying { 
    background-color: #2a2a2a;
  }
  td.yang { 
    background-color: #717171;
  }
//-->
</style>

Diese Klassen werden abwechselnd angewendet.

<table>
<tr><td class="ying">P1:1</td><td class="yang">P2:1</td><td class="ying">P3:1</td></tr>
<tr><td class="ying">P1:2</td><td class="yang">P2:2</td><td class="ying">P3:2</td></tr>
<tr><td class="ying">P1:3</td><td class="yang">P2:3</td><td class="ying">P3:3</td></tr>
</table>

Weiteres zum Thema können Sie in Tabellen in HTML erfahren. Weiteres zum hier gezeigten Tag td ist in der HTML Referenz bei <td> genau zusammengestellt.