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

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 coral
Detail	:	Hintergrund chocolate	Detail	:	Schrift coral
Farbe	:	chocolate	Farbe	:	coral
Farbwert	:	#d2691e	Farbwert	:	#ff7f50
HTML	:	chocolate	HTML	:	coral
HTML (Wert)	:	#d2691e	HTML (Wert)	:	#ff7f50
CSS	:	chocolate	CSS	:	coral
CSS (Wert)	:	#d2691e	CSS (Wert)	:	#ff7f50
CSS (kürzest)	:	#d2691e	CSS (kürzest)	:	#ff7f50
CSS (RGB)	:	rgb(210,105,30)	CSS (RGB)	:	rgb(255,127,80)
CSS (%RGB)	:	rgb(82%,41%,11%)	CSS (%RGB)	:	rgb(100%,49%,31%)

Verlauf Hintergrundfarbe chocolate nach Schriftfarbe coral
#d2691e	#d86c25	#de6f2c	#e57233	#eb753a	#f27841	#f87b48	#ff7f50
#d2691e	#d86c25	#de6f2c	#e57233	#eb753a	#f27841	#f87b48	#ff7f50

Kombination von chocolate und coral
Cras id velit ante. 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Auf Hintergrund chocolate ist coral ungeeignet, da die Unterschiede in der Helligkeit und Farbe nicht ausreichend sind. Die Ähnlichkeit der Farben coral und chocolate beträgt 93.08%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 6.92%.

Hintergrundfarbe chocolate				Schriftfarbe coral
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#d2691e	#d2691e	#d2691e	#d2691e	#ff7f50	#ff7f50	#ff7f50	#ff7f50
#d87e3e	#d87e3e	#b45a19	#b45a19	#ff9169	#ff9169	#da6c44	#da6c44
#de935e	#de935e	#964b15	#964b15	#ffa382	#ffa382	#b65a39	#b65a39
#e5a97e	#e5a97e	#783c11	#783c11	#ffb59b	#ffb59b	#91482d	#91482d
#ebbe9e	#ebbe9e	#5a2d0c	#5a2d0c	#ffc8b4	#ffc8b4	#6d3622	#6d3622
#f2d4be	#f2d4be	#3c1e08	#3c1e08	#ffdacd	#ffdacd	#482416	#482416
#f8e9de	#f8e9de	#1e0f04	#1e0f04	#ffece6	#ffece6	#24120b	#24120b
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe chocolate und Farbe coral

Wechsel der Hintergrundfarbe bei Hover mit Tag dd

Die Hintergrundfarbe soll sich von Farbe chocolate auf Farbe coral ändern, wenn man mit der Maus auf <dd> zeigt. Bereiten wir zunächst eine Darstellung von <dd> in Farbe chocolate vor.

Hier ändern wir die Hintergrundfarbe von <dd> auf Farbe chocolate. Zwar ändern wir die Textfarbe nicht, setzen jedoch die Schriftart auf verdana und setzen die Schriftgröße auf 80%.

<style type="text/css"><!--
  dd { 
    font-size: 80%; 
    background-color: chocolate; 
    font-family: verdana;
  }
//-->
</style>

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

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

Weiteres zum Thema dd können Sie in Listen und Glossare in HTML lesen. Der Tag dd ist in der HTML Referenz unter <dd> genau gezeigt.

Zebra-Effekt bei Befehl tr

Man spricht vom so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Der Effekt unterstützt das Auge, etwa die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ying und .yang für <tr> mit den Hintergrundfarben Farbe chocolate und Farbe coral.

<style type="text/css"><!--
  tr.ying { 
    background-color: chocolate;
  }
  tr.yang { 
    background-color:coral;
  }
//-->
</style>

Diese CSS-Klassen werden dann abwechselnd genutzt.

<table>
<tr class="ying"><td>Fa/a</td><td>Fb/a</td><td>Fc/a</td></tr>
<tr class="yang"><td>Fa/b</td><td>Fb/b</td><td>Fc/b</td></tr>
<tr class="ying"><td>Fa/c</td><td>Fb/c</td><td>Fc/c</td></tr>
</table>

Weiteres zum Thema finden Sie in Tabellen in HTML. Einzelheiten vom hier gezeigten HTML-Befehl <tr>.