Ressourcen: 16 Graustufen in HTML - Kombination von Farbe gray102 und Farbwert #eeeeee

Graustufen enthalten insbesondere die unbunten Grundfarben Schwarz und Weiß.

Um 16 Graustufen in HTML bzw. CSS zu erzeugen, wählen wir Farbwerte rr, gg und bb mit Werten von 0 bis 15 (d.h. hexadezimal 0 bis f) für r, g und b.

Hintergrundfarbe gray102			Schriftfarbwert #eeeeee
Detail	:	Hintergrund gray102	Detail	:	Schrift #eeeeee
Farbe	:	gray102	Farbwert	:	#eeeeee
Farbwert	:	#666666	Farbe	:	gray238
HTML	:	gray102	HTML	:	#eeeeee
HTML (Wert)	:	#666666	HTML (Wert)	:	#eeeeee
CSS	:	gray102	CSS	:	#eeeeee
CSS (Wert)	:	#666666	CSS (Wert)	:	#eeeeee
CSS (kürzest)	:	#666	CSS (kürzest)	:	#eee
CSS (RGB)	:	rgb(102,102,102)	CSS (RGB)	:	rgb(238,238,238)
CSS (%RGB)	:	rgb(40%,40%,40%)	CSS (%RGB)	:	rgb(93%,93%,93%)

Verlauf Hintergrundfarbe gray102 nach Schriftfarbwert #eeeeee
#666666	#797979	#8c8c8c	#a0a0a0	#b3b3b3	#c7c7c7	#dadada	#eeeeee
#666666	#797979	#8c8c8c	#a0a0a0	#b3b3b3	#c7c7c7	#dadada	#eeeeee

Kombination von gray102 und #eeeeee
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Cras id velit ante.				#eeeeee ist nicht als Schriftfarbe auf Hintergrund gray102 geeignet, weil die Farben zu ähnlich sind. Die Ähnlichkeit von #eeeeee und gray102 beträgt 76.43%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 23.57%.

Hintergrundfarbe gray102				Schriftfarbwert #eeeeee
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#666666	#666666	#666666	#666666	#eeeeee	#eeeeee	#eeeeee	#eeeeee
#7b7b7b	#7b7b7b	#575757	#575757	#f0f0f0	#f0f0f0	#cccccc	#cccccc
#919191	#919191	#484848	#484848	#f2f2f2	#f2f2f2	#aaaaaa	#aaaaaa
#a7a7a7	#a7a7a7	#3a3a3a	#3a3a3a	#f5f5f5	#f5f5f5	#888888	#888888
#bdbdbd	#bdbdbd	#2b2b2b	#2b2b2b	#f7f7f7	#f7f7f7	#666666	#666666
#d3d3d3	#d3d3d3	#1d1d1d	#1d1d1d	#fafafa	#fafafa	#444444	#444444
#e9e9e9	#e9e9e9	#0e0e0e	#0e0e0e	#fcfcfc	#fcfcfc	#222222	#222222
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray102 und Farbwert #eeeeee

Wechsel der Umrandung bei Hover von HTML-Tag form

Die Rahmenfarbe soll sich von Farbe gray102 auf Farbwert #eeeeee ändern, wenn man mit der Maus auf <form> zeigt. Bereiten wir zunächst eine Darstellung von <form> in Farbe gray102 vor.

In diesem Beispiel umranden wir <form> mit einem 4 Pixel dicken, gestrichelten Rahmen in Farbe gray102.

<style type="text/css"><!--
  form { border:4px dashed gray102; }
//-->
</style>

Jetzt fordern wir, dass bei Hover die Rahmenfarbe auf #eeeeee gesetzt wird.

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

Mehr zum Thema form können Sie in Formulare in HTML finden. Weiteres zum hier gezeigten Befehl form ist in der HTML Referenz unter <form> zusammengestellt.

Zebra-Effekt mit HTML-Befehl th

Man spricht von einem Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Dieser Effekt unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ying und .yang für <th> mit den Hintergrundfarben Farbe gray102 und Farbwert #eeeeee.

<style type="text/css"><!--
  th.ying { 
    background-color:gray102;
  }
  th.yang { 
    background-color:#eeeeee;
  }
//-->
</style>

Diese werden dann abwechselnd angewendet.

<table>
<tr><td class="ying"><tt>A~A</td><td class="yang"></tt>B~A</td><td class="ying"><tt>C~A</td></tr>
<tr><td class="ying"></tt>A~B</td><td class="yang"><tt>B~B</td><td class="ying"></tt>C~B</td></tr>
<tr><td class="ying"><tt>A~C</td><td class="yang"></tt>B~C</td><td class="ying">@C~C</td></tr>
</table>

Mehr zum Thema können Sie in Tabellen in HTML nachlesen. Einzelheiten des Tag th sind in der HTML Referenz bei <th> gezeigt.