Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #d2b48c und Farbwert #ff7f50

Netscape führte seinerzeit die websicheren Farben ein. Neben diesen, einem bestimmten Schema folgenden, Farbwerten, definierte man noch 120 Werte und ordnete ihnen Namen zu. Zusammen mit den 17 Standard-HTML-Farben, die ebenfalls Namen haben, ergeben sich so 137 HTML Farbnamen.

Hintergrundfarbwert #d2b48c			Schriftfarbwert #ff7f50
Detail	:	Hintergrund #d2b48c	Detail	:	Schrift #ff7f50
Farbwert	:	#d2b48c	Farbwert	:	#ff7f50
Farbe	:	tan	Farbe	:	coral
HTML	:	#d2b48c	HTML	:	#ff7f50
HTML (Wert)	:	#d2b48c	HTML (Wert)	:	#ff7f50
CSS	:	#d2b48c	CSS	:	#ff7f50
CSS (Wert)	:	#d2b48c	CSS (Wert)	:	#ff7f50
CSS (kürzest)	:	#d2b48c	CSS (kürzest)	:	#ff7f50
CSS (RGB)	:	rgb(210,180,140)	CSS (RGB)	:	rgb(255,127,80)
CSS (%RGB)	:	rgb(82%,70%,54%)	CSS (%RGB)	:	rgb(100%,49%,31%)

Verlauf Hintergrundfarbwert #d2b48c nach Schriftfarbwert #ff7f50
#d2b48c	#d8ac83	#dea47a	#e59d72	#eb9569	#f28e61	#f88658	#ff7f50
#d2b48c	#d8ac83	#dea47a	#e59d72	#eb9569	#f28e61	#f88658	#ff7f50

Kombination von #d2b48c und #ff7f50
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. 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.				Die Ähnlichkeit von #ff7f50 und #d2b48c ergibt sich zu 93.97%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 6.03%. #ff7f50 ist nicht als Schriftfarbe auf Hintergrund #d2b48c geeignet. Weder der Helligkeitsunterschied noch der Farbunterschied sind ausreichend.

Hintergrundfarbwert #d2b48c				Schriftfarbwert #ff7f50
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#d2b48c	#d2b48c	#d2b48c	#d2b48c	#ff7f50	#ff7f50	#ff7f50	#ff7f50
#d8be9c	#d8be9c	#b49a78	#b49a78	#ff9169	#ff9169	#da6c44	#da6c44
#dec9ac	#dec9ac	#968064	#968064	#ffa382	#ffa382	#b65a39	#b65a39
#e5d4bd	#e5d4bd	#786650	#786650	#ffb59b	#ffb59b	#91482d	#91482d
#ebdecd	#ebdecd	#5a4d3c	#5a4d3c	#ffc8b4	#ffc8b4	#6d3622	#6d3622
#f2e9de	#f2e9de	#3c3328	#3c3328	#ffdacd	#ffdacd	#482416	#482416
#f8f4ee	#f8f4ee	#1e1914	#1e1914	#ffece6	#ffece6	#24120b	#24120b
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #d2b48c und Farbwert #ff7f50

Zebra-Effekt mit HTML-Befehl td

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, redet man vom Zebra-Effekt. Dieser Effekt unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .yang und .ying für <td> mit den Hintergrundfarben Farbwert #d2b48c und Farbwert #ff7f50.

<style type="text/css"><!--
  td.yang { 
    background-color: #d2b48c;
  }
  td.ying { 
    background-color:#ff7f50;
  }
//-->
</style>

Diese werden dann abwechselnd genutzt.

<table>
<tr><td class="yang">GA.A</td><td class="ying">GB.A</td><td class="yang">GC.A</td></tr>
<tr><td class="yang">GA.B</td><td class="ying">GB.B</td><td class="yang">GC.B</td></tr>
<tr><td class="yang">GA.C</td><td class="ying">GB.C</td><td class="yang">GC.C</td></tr>
</table>

Weiteres zu td können Sie in Tabellen in HTML finden. Weiteres zum hier verwendeten Tag td ist in der HTML Referenz bei <td> beschrieben.

Wechsel der Hintergrundfarbe bei Hover mit HTML-Tag li

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

Für dieses Beispiel legen wir bei <li> die Hintergrundfarbe auf Farbwert #d2b48c fest. Die Textfarbe behalten wir bei, ändern jedoch die Schriftart auf sans-serif und setzen die Schriftgröße auf 115%:

<style type="text/css"><!--
  li { 
    font-size:115%; 
    font-family:sans-serif; 
    background-color:#d2b48c;
  }
//-->
</style>

Nun fordern wir, dass sich bei Hover die Hintergrundfarbe zu #ff7f50 ändert.

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

Mehr zum Thema li können Sie in Listen und Glossare in HTML nachlesen. Die Beschreibung vom Befehl li finden Sie in der HTML Referenz unter <li>.