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

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.

Hintergrundfarbwert #dddddd			Schriftfarbe gray119
Detail	:	Hintergrund #dddddd	Detail	:	Schrift gray119
Farbwert	:	#dddddd	Farbe	:	gray119
Farbe	:	gray221	Farbwert	:	#777777
HTML	:	#dddddd	HTML	:	gray119
HTML (Wert)	:	#dddddd	HTML (Wert)	:	#777777
CSS	:	#dddddd	CSS	:	gray119
CSS (Wert)	:	#dddddd	CSS (Wert)	:	#777777
CSS (kürzest)	:	#ddd	CSS (kürzest)	:	#777
CSS (RGB)	:	rgb(221,221,221)	CSS (RGB)	:	rgb(119,119,119)
CSS (%RGB)	:	rgb(86%,86%,86%)	CSS (%RGB)	:	rgb(46%,46%,46%)

Verlauf Hintergrundfarbwert #dddddd nach Schriftfarbe gray119
#dddddd	#cecece	#bfbfbf	#b1b1b1	#a2a2a2	#949494	#858585	#777777
#dddddd	#cecece	#bfbfbf	#b1b1b1	#a2a2a2	#949494	#858585	#777777

Kombination von #dddddd und gray119
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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				gray119 eignet sich nicht als Schriftfarbe auf Hintergrund #dddddd, weil weder der Helligkeitsunterschied noch der Farbunterschied gross genug sind. Die Ähnlichkeit der Farben gray119 und #dddddd ergibt sich zu 84.30%. Die Lesbarkeit dieser Kombination bewerte ich mit 15.70%.

Hintergrundfarbwert #dddddd				Schriftfarbe gray119
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#dddddd	#dddddd	#dddddd	#dddddd	#777777	#777777	#777777	#777777
#e1e1e1	#e1e1e1	#bdbdbd	#bdbdbd	#8a8a8a	#8a8a8a	#666666	#666666
#e6e6e6	#e6e6e6	#9d9d9d	#9d9d9d	#9d9d9d	#9d9d9d	#555555	#555555
#ebebeb	#ebebeb	#7e7e7e	#7e7e7e	#b1b1b1	#b1b1b1	#444444	#444444
#f0f0f0	#f0f0f0	#5e5e5e	#5e5e5e	#c4c4c4	#c4c4c4	#333333	#333333
#f5f5f5	#f5f5f5	#3f3f3f	#3f3f3f	#d8d8d8	#d8d8d8	#222222	#222222
#fafafa	#fafafa	#1f1f1f	#1f1f1f	#ebebeb	#ebebeb	#111111	#111111
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #dddddd und Farbe gray119

Zebra-Effekt bei Tag td

Man redet von einem Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Der Effekt unterstützt das Auge zum Beispiel die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .even und .odd für <td> mit unterschiedlichen Hintergrundfarben Farbwert #dddddd und Farbe gray119.

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

Diese werden dann abwechselnd angewendet.

<table>
<tr><td class="even">Na,a</td><td class="odd">Nb,a</td><td class="even">Nc,a</td></tr>
<tr><td class="even">Na,b</td><td class="odd">Nb,b</td><td class="even">Nc,b</td></tr>
<tr><td class="even">Na,c</td><td class="odd">Nb,c</td><td class="even">Nc,c</td></tr>
</table>

Mehr zu td können Sie in Tabellen in HTML nachlesen. Der hier genutzte HTML-Tag td ist in der HTML Referenz unter <td> ausführlich gezeigt.

Wechsel der Hintergrundfarbe bei Hover bei Befehl dt

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

Für dieses Beispiel legen wir bei <dt> die Hintergrundfarbe auf Farbwert #dddddd fest. Die Schriftgröße setzen wir auf 13px.

<style type="text/css"><!--
  dt { 
    background-color: #dddddd; 
    font-size: 13px;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Mausberührung die Hintergrundfarbe zu gray119 ändert.

<style type="text/css"><!--
  dt:hover { 
    background-color:gray119;
  }
//-->
</style>

Weiteres zum Thema lesen Sie in Listen und Glossare in HTML. Weiteres zum HTML-Befehl dt erfahren Sie in der HTML Referenz unter <dt>.