Ressourcen: 120 HTML Farbnamen - Kombination von Farbe chocolate und Farbe whitesmoke

Netscape führte seinerzeit die websicheren Farben ein. Neben diesen Farbwerten, die einem bestimmten Schema folgen, definierte man noch 120 Werte und ordnete ihnen Namen zu.

Hintergrundfarbe chocolate			Schriftfarbe whitesmoke
Detail	:	Hintergrund chocolate	Detail	:	Schrift whitesmoke
Farbe	:	chocolate	Farbe	:	whitesmoke
Farbwert	:	#d2691e	Farbwert	:	#f5f5f5
HTML	:	chocolate	HTML	:	whitesmoke
HTML (Wert)	:	#d2691e	HTML (Wert)	:	#f5f5f5
CSS	:	chocolate	CSS	:	whitesmoke
CSS (Wert)	:	#d2691e	CSS (Wert)	:	#f5f5f5
CSS (kürzest)	:	#d2691e	CSS (kürzest)	:	#f5f5f5
CSS (RGB)	:	rgb(210,105,30)	CSS (RGB)	:	rgb(245,245,245)
CSS (%RGB)	:	rgb(82%,41%,11%)	CSS (%RGB)	:	rgb(96%,96%,96%)

Verlauf Hintergrundfarbe chocolate nach Schriftfarbe whitesmoke
#d2691e	#d77d3c	#dc915b	#e1a57a	#e6b998	#ebcdb7	#f0e1d6	#f5f5f5
#d2691e	#d77d3c	#dc915b	#e1a57a	#e6b998	#ebcdb7	#f0e1d6	#f5f5f5

Kombination von chocolate und whitesmoke
Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante. 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.				whitesmoke eignet sich nicht als Schriftfarbe auf Hintergrund chocolate, da sich die Helligkeit und Farben zu ähnlich sind. Die Ähnlichkeit von whitesmoke und chocolate ergibt sich zu 84.13%. Die Lesbarkeit dieser Kombination ergibt sich zu 15.87%.

Hintergrundfarbe chocolate				Schriftfarbe whitesmoke
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#d2691e	#d2691e	#d2691e	#d2691e	#f5f5f5	#f5f5f5	#f5f5f5	#f5f5f5
#d87e3e	#d87e3e	#b45a19	#b45a19	#f6f6f6	#f6f6f6	#d2d2d2	#d2d2d2
#de935e	#de935e	#964b15	#964b15	#f7f7f7	#f7f7f7	#afafaf	#afafaf
#e5a97e	#e5a97e	#783c11	#783c11	#f9f9f9	#f9f9f9	#8c8c8c	#8c8c8c
#ebbe9e	#ebbe9e	#5a2d0c	#5a2d0c	#fafafa	#fafafa	#696969	#696969
#f2d4be	#f2d4be	#3c1e08	#3c1e08	#fcfcfc	#fcfcfc	#464646	#464646
#f8e9de	#f8e9de	#1e0f04	#1e0f04	#fdfdfd	#fdfdfd	#232323	#232323
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe chocolate und Farbe whitesmoke

Wechsel der Textfarbe bei Hover bei HTML-Befehl center

Die Textfarbe soll sich von Farbe chocolate auf Farbe whitesmoke ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Darstellung von <center> in Farbe chocolate vor.

In diesem Beispiel legen wir Farbe chocolate als Textfarbe von <center> fest.

<style type="text/css"><!--
  center { 
    color: chocolate;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Mausberührung die Textfarbe auf whitesmoke ändert.

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

Weiteres zu center lesen Sie in Grundlegende Gestaltungselemente in HTML. Weiteres zum hier genutzten HTML-Befehl center ist in der HTML Referenz bei <center> beschrieben.

Zebra-Effekt von HTML-Befehl tr

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, redet man vom so genannten Zebra-Effekt. Der Effekt unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ungerade und .gerade für <tr> mit den Hintergrundfarben Farbe chocolate und Farbe whitesmoke.

<style type="text/css"><!--
  tr.ungerade { 
    background-color:chocolate;
  }
  tr.gerade { 
    background-color: whitesmoke;
  }
//-->
</style>

Diese Klassen werden abwechselnd verwendet.

<table>
<tr class="ungerade"><td>W1:1</td><td>W2:1</td><td>W3:1</td></tr>
<tr class="gerade"><td>W1:2</td><td>W2:2</td><td>W3:2</td></tr>
<tr class="ungerade"><td>W1:3</td><td>W2:3</td><td>W3:3</td></tr>
</table>

Weiteres zum Thema lesen Sie in Tabellen in HTML. Weiteres zum Tag tr ist in der HTML Referenz bei <tr> gezeigt.