Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #a0522d und Farbwert #cd5c5c

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.

Hintergrundfarbwert #a0522d			Schriftfarbwert #cd5c5c
Detail	:	Hintergrund #a0522d	Detail	:	Schrift #cd5c5c
Farbwert	:	#a0522d	Farbwert	:	#cd5c5c
Farbe	:	sienna	Farbe	:	indianred
HTML	:	#a0522d	HTML	:	#cd5c5c
HTML (Wert)	:	#a0522d	HTML (Wert)	:	#cd5c5c
CSS	:	#a0522d	CSS	:	#cd5c5c
CSS (Wert)	:	#a0522d	CSS (Wert)	:	#cd5c5c
CSS (kürzest)	:	#a0522d	CSS (kürzest)	:	#cd5c5c
CSS (RGB)	:	rgb(160,82,45)	CSS (RGB)	:	rgb(205,92,92)
CSS (%RGB)	:	rgb(62%,32%,17%)	CSS (%RGB)	:	rgb(80%,36%,36%)

Verlauf Hintergrundfarbwert #a0522d nach Schriftfarbwert #cd5c5c
#a0522d	#a65333	#ac543a	#b35641	#b95747	#c0594e	#c65a55	#cd5c5c
#a0522d	#a65333	#ac543a	#b35641	#b95747	#c0594e	#c65a55	#cd5c5c

Kombination von #a0522d und #cd5c5c
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				#cd5c5c eignet sich nicht als Schriftfarbe auf Hintergrund #a0522d. Die Unterschiede in der Helligkeit und Farbe sind nicht ausreichend. Die Ähnlichkeit der Farben #cd5c5c und #a0522d ergibt sich zu 93.27%. Die Lesbarkeit dieser Kombination ergibt sich zu 6.73%.

Hintergrundfarbwert #a0522d				Schriftfarbwert #cd5c5c
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#a0522d	#a0522d	#a0522d	#a0522d	#cd5c5c	#cd5c5c	#cd5c5c	#cd5c5c
#ad6a4b	#ad6a4b	#894626	#894626	#d47373	#d47373	#af4e4e	#af4e4e
#bb8369	#bb8369	#723a20	#723a20	#db8a8a	#db8a8a	#924141	#924141
#c89c87	#c89c87	#5b2e19	#5b2e19	#e2a1a1	#e2a1a1	#753434	#753434
#d6b4a5	#d6b4a5	#442313	#442313	#e9b9b9	#e9b9b9	#572727	#572727
#e3cdc3	#e3cdc3	#2d170c	#2d170c	#f0d0d0	#f0d0d0	#3a1a1a	#3a1a1a
#f1e6e1	#f1e6e1	#160b06	#160b06	#f7e7e7	#f7e7e7	#1d0d0d	#1d0d0d
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #a0522d und Farbwert #cd5c5c

Zebra-Effekt von HTML-Tag tr

Man spricht vom Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Dieser Effekt unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ungerade und .gerade für <tr> mit unterschiedlichen Hintergrundfarben Farbwert #a0522d und Farbwert #cd5c5c.

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

Diese CSS-Klassen werden abwechselnd angewendet.

<table>
<tr class="ungerade"><td>CA/A</td><td>CB/A</td><td>CC/A</td></tr>
<tr class="gerade"><td>CA/B</td><td>CB/B</td><td>CC/B</td></tr>
<tr class="ungerade"><td>CA/C</td><td>CB/C</td><td>CC/C</td></tr>
</table>

Weiteres zum Thema tr erfahren Sie in Tabellen in HTML. Der hier verwendete Befehl tr ist in der HTML Referenz bei <tr> genau beschrieben.

Wechsel der Hintergrundfarbe bei Hover mit HTML-Tag li

Die Hintergrundfarbe soll sich von Farbwert #a0522d auf Farbwert #cd5c5c ändern, wenn man mit der Maus auf <li> zeigt. Bereiten wir zunächst die Formatierung von <li> in Farbwert #a0522d vor.

Zum Beispiel legen wir Farbwert #a0522d als Hintergrundfarbe von <li> fest. Zwar lassen wir die Textfarbe unverändert, ändern jedoch die Schriftart auf verdana und ändern die Schriftgröße auf 14px.

<style type="text/css"><!--
  li { 
    font-size: 14px; 
    background-color: #a0522d; 
    font-family: verdana;
  }
//-->
</style>

Nun fordern wir, dass sich bei Mausberührung die Hintergrundfarbe auf #cd5c5c ändert.

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

Weiteres zum Thema li finden Sie in Listen und Glossare in HTML. Weiteres zum HTML-Tag li ist in der HTML Referenz unter <li> gezeigt.