Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #66cdaa und Farbwert #8b4513

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 #66cdaa			Schriftfarbwert #8b4513
Detail	:	Hintergrund #66cdaa	Detail	:	Schrift #8b4513
Farbwert	:	#66cdaa	Farbwert	:	#8b4513
Farbe	:	mediumaquamarine	Farbe	:	saddlebrown
HTML	:	#66cdaa	HTML	:	#8b4513
HTML (Wert)	:	#66cdaa	HTML (Wert)	:	#8b4513
CSS	:	#66cdaa	CSS	:	#8b4513
CSS (Wert)	:	#66cdaa	CSS (Wert)	:	#8b4513
CSS (kürzest)	:	#66cdaa	CSS (kürzest)	:	#8b4513
CSS (RGB)	:	rgb(102,205,170)	CSS (RGB)	:	rgb(139,69,19)
CSS (%RGB)	:	rgb(40%,80%,66%)	CSS (%RGB)	:	rgb(54%,27%,7%)

Verlauf Hintergrundfarbwert #66cdaa nach Schriftfarbwert #8b4513
#66cdaa	#6bb994	#70a67e	#759269	#7b7f53	#806b3e	#855828	#8b4513
#66cdaa	#6bb994	#70a67e	#759269	#7b7f53	#806b3e	#855828	#8b4513

Kombination von #66cdaa und #8b4513
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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante.				#8b4513 eignet sich nicht als Schriftfarbe auf Hintergrund #66cdaa. Die Helligkeit und Farben sind zu ähnlich. Die Ähnlichkeit der Farben #8b4513 und #66cdaa beträgt 82.49%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 17.51%.

Hintergrundfarbwert #66cdaa				Schriftfarbwert #8b4513
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#66cdaa	#66cdaa	#66cdaa	#66cdaa	#8b4513	#8b4513	#8b4513	#8b4513
#7bd4b6	#7bd4b6	#57af91	#57af91	#9b5f34	#9b5f34	#773b10	#773b10
#91dbc2	#91dbc2	#489279	#489279	#ac7a56	#ac7a56	#63310d	#63310d
#a7e2ce	#a7e2ce	#3a7561	#3a7561	#bc9478	#bc9478	#4f270a	#4f270a
#bde9da	#bde9da	#2b5748	#2b5748	#cdaf99	#cdaf99	#3b1d08	#3b1d08
#d3f0e6	#d3f0e6	#1d3a30	#1d3a30	#ddc9bb	#ddc9bb	#271305	#271305
#e9f7f2	#e9f7f2	#0e1d18	#0e1d18	#eee4dd	#eee4dd	#130902	#130902
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #66cdaa und Farbwert #8b4513

Zebra-Effekt bei HTML-Befehl tr

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, spricht 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 unterschiedlichen Hintergrundfarben Farbwert #66cdaa und Farbwert #8b4513.

<style type="text/css"><!--
  tr.ungerade { 
    background-color: #66cdaa;
  }
  tr.gerade { 
    background-color: #8b4513;
  }
//-->
</style>

Diese Klassen werden dann abwechselnd angewendet.

<table>
<tr class="ungerade"><td>Wa,a</td><td>Wb,a</td><td>Wc,a</td></tr>
<tr class="gerade"><td>Wa,b</td><td>Wb,b</td><td>Wc,b</td></tr>
<tr class="ungerade"><td>Wa,c</td><td>Wb,c</td><td>Wc,c</td></tr>
</table>

Mehr zu tr erfahren Sie in Tabellen in HTML. Die Beschreibung vom Befehl tr erfahren Sie in der HTML Referenz unter <tr>.

Wechsel der Hintergrundfarbe bei Hover mit HTML-Befehl td

Die Hintergrundfarbe soll sich von Farbwert #66cdaa auf Farbwert #8b4513 ändern, wenn man mit der Maus auf <td> zeigt. Bereiten wir zunächst die Darstellung von <td> in Farbwert #66cdaa vor.

Z.B. ändern wir die Hintergrundfarbe von <td> auf Farbwert #66cdaa. Zwar ändern wir die Textfarbe nicht, setzen jedoch die Schriftart auf verdana:

<style type="text/css"><!--
  td { 
    font-family:verdana; 
    background-color:#66cdaa;
  }
//-->
</style>

Nun fordern wir, dass bei Hover die Hintergrundfarbe auf #8b4513 gesetzt wird.

<style type="text/css"><!--
  td: hover { 
    background-color: #8b4513;
  }
//-->
</style>

Mehr zum Thema können Sie in Tabellen in HTML finden. Mehr zum hier gezeigten Tag td ist in der HTML Referenz bei <td> ausführlich beschrieben.