Ressourcen: 16 Graustufen in HTML - Kombination von Farbe gray153 und Farbwert #dddddd

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 gray153			Schriftfarbwert #dddddd
Detail	:	Hintergrund gray153	Detail	:	Schrift #dddddd
Farbe	:	gray153	Farbwert	:	#dddddd
Farbwert	:	#999999	Farbe	:	gray221
HTML	:	gray153	HTML	:	#dddddd
HTML (Wert)	:	#999999	HTML (Wert)	:	#dddddd
CSS	:	gray153	CSS	:	#dddddd
CSS (Wert)	:	#999999	CSS (Wert)	:	#dddddd
CSS (kürzest)	:	#999	CSS (kürzest)	:	#ddd
CSS (RGB)	:	rgb(153,153,153)	CSS (RGB)	:	rgb(221,221,221)
CSS (%RGB)	:	rgb(60%,60%,60%)	CSS (%RGB)	:	rgb(86%,86%,86%)

Verlauf Hintergrundfarbe gray153 nach Schriftfarbwert #dddddd
#999999	#a2a2a2	#acacac	#b6b6b6	#bfbfbf	#c9c9c9	#d3d3d3	#dddddd
#999999	#a2a2a2	#acacac	#b6b6b6	#bfbfbf	#c9c9c9	#d3d3d3	#dddddd

Kombination von gray153 und #dddddd
Cras vestibulum tristique erat, ac interdum justo cursus in. 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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Die Ähnlichkeit von #dddddd und gray153 beträgt 90.01%. Die Lesbarkeit dieser Kombination bewerte ich mit 9.99%. #dddddd eignet sich nicht als Schriftfarbe auf Hintergrund gray153, weil die Unterschiede in der Helligkeit und Farbe nicht ausreichend sind.

Hintergrundfarbe gray153				Schriftfarbwert #dddddd
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#999999	#999999	#999999	#999999	#dddddd	#dddddd	#dddddd	#dddddd
#a7a7a7	#a7a7a7	#838383	#838383	#e1e1e1	#e1e1e1	#bdbdbd	#bdbdbd
#b6b6b6	#b6b6b6	#6d6d6d	#6d6d6d	#e6e6e6	#e6e6e6	#9d9d9d	#9d9d9d
#c4c4c4	#c4c4c4	#575757	#575757	#ebebeb	#ebebeb	#7e7e7e	#7e7e7e
#d3d3d3	#d3d3d3	#414141	#414141	#f0f0f0	#f0f0f0	#5e5e5e	#5e5e5e
#e1e1e1	#e1e1e1	#2b2b2b	#2b2b2b	#f5f5f5	#f5f5f5	#3f3f3f	#3f3f3f
#f0f0f0	#f0f0f0	#151515	#151515	#fafafa	#fafafa	#1f1f1f	#1f1f1f
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray153 und Farbwert #dddddd

Zebra-Effekt bei HTML-Befehl th

Man redet von einem so genannten 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 .even und .odd für <th> mit unterschiedlichen Hintergrundfarben Farbe gray153 und Farbwert #dddddd.

<style type="text/css"><!--
  th.even { 
    background-color:gray153;
  }
  th.odd { 
    background-color: #ddd;
  }
//-->
</style>

Diese werden dann abwechselnd angewendet.

<table>
<tr><td class="even">Ba-a</td><td class="odd">Bb-a</td><td class="even">Bc-a</td></tr>
<tr><td class="even">Ba-b</td><td class="odd">Bb-b</td><td class="even">Bc-b</td></tr>
<tr><td class="even">Ba-c</td><td class="odd">Bb-c</td><td class="even">Bc-c</td></tr>
</table>

Weiteres zum Thema th erfahren Sie in Tabellen in HTML. Mehr zum hier verwendeten Befehl <th>.

Wechsel der Hintergrundfarbe bei Hover von HTML-Tag thead

Die Hintergrundfarbe soll sich von Farbe gray153 auf Farbwert #dddddd ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <thead> in Farbe gray153 vor.

Als Beispiel legen wir Farbe gray153 als Hintergrundfarbe von <thead> fest:

<style type="text/css"><!--
  thead { 
    background-color: gray153;
  }
//-->
</style>

Jetzt stellen wir ein, dass bei Hover die Hintergrundfarbe auf #dddddd gesetzt wird.

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

Weiteres zum Thema können Sie in Tabellen in HTML erfahren. Möglichkeiten vom Befehl thead lesen Sie in der HTML Referenz unter <thead>.