Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #9acd32 und Farbwert #ffb6c1

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 #9acd32			Schriftfarbwert #ffb6c1
Detail	:	Hintergrund #9acd32	Detail	:	Schrift #ffb6c1
Farbwert	:	#9acd32	Farbwert	:	#ffb6c1
Farbe	:	yellowgreen	Farbe	:	lightpink
HTML	:	#9acd32	HTML	:	#ffb6c1
HTML (Wert)	:	#9acd32	HTML (Wert)	:	#ffb6c1
CSS	:	#9acd32	CSS	:	#ffb6c1
CSS (Wert)	:	#9acd32	CSS (Wert)	:	#ffb6c1
CSS (kürzest)	:	#9acd32	CSS (kürzest)	:	#ffb6c1
CSS (RGB)	:	rgb(154,205,50)	CSS (RGB)	:	rgb(255,182,193)
CSS (%RGB)	:	rgb(60%,80%,19%)	CSS (%RGB)	:	rgb(100%,71%,75%)

Verlauf Hintergrundfarbwert #9acd32 nach Schriftfarbwert #ffb6c1
#9acd32	#a8c946	#b6c65a	#c5c36f	#d3bf83	#e2bc98	#f0b9ac	#ffb6c1
#9acd32	#a8c946	#b6c65a	#c5c36f	#d3bf83	#e2bc98	#f0b9ac	#ffb6c1

Kombination von #9acd32 und #ffb6c1
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.				#ffb6c1 eignet sich nicht als Schriftfarbe auf Hintergrund #9acd32, weil weder der Helligkeitsunterschied noch der Farbunterschied ausreichend sind. Die Ähnlichkeit von #ffb6c1 und #9acd32 beträgt 94.57%. Die Lesbarkeit dieser Farbkombination liegt damit bei 5.43%.

Hintergrundfarbwert #9acd32				Schriftfarbwert #ffb6c1
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#9acd32	#9acd32	#9acd32	#9acd32	#ffb6c1	#ffb6c1	#ffb6c1	#ffb6c1
#a8d44f	#a8d44f	#84af2a	#84af2a	#ffc0c9	#ffc0c9	#da9ca5	#da9ca5
#b6db6c	#b6db6c	#6e9223	#6e9223	#ffcad2	#ffcad2	#b68289	#b68289
#c5e289	#c5e289	#58751c	#58751c	#ffd5db	#ffd5db	#91686e	#91686e
#d3e9a7	#d3e9a7	#425715	#425715	#ffdfe4	#ffdfe4	#6d4e52	#6d4e52
#e2f0c4	#e2f0c4	#2c3a0e	#2c3a0e	#ffeaed	#ffeaed	#483437	#483437
#f0f7e1	#f0f7e1	#161d07	#161d07	#fff4f6	#fff4f6	#241a1b	#241a1b
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #9acd32 und Farbwert #ffb6c1

Wechsel der Textfarbe bei Hover mit Tag table

Die Textfarbe soll sich von Farbwert #9acd32 auf Farbwert #ffb6c1 ändern, wenn man mit der Maus auf <table> zeigt. Wir bereiten zunächst eine Formatierung von <table> in Farbwert #9acd32 vor.

Wir legen für dieses Beispiel die Textfarbe von <table> auf Farbwert #9acd32 fest. Die Größe der Schrift ändern wir auf 13px.

<style type="text/css"><!--
  table { 
    font-size: 13px; 
    color: #9acd32;
  }
//-->
</style>

Nun fordern wir, dass sich bei Mausberührung die Textfarbe zu #ffb6c1 ändert.

<style type="text/css"><!--
  table: hover { 
    color: #ffb6c1;
  }
//-->
</style>

Mehr zum Thema lesen Sie in Tabellen in HTML. Möglichkeiten des hier gezeigten HTML-Tag table lesen Sie in der HTML Referenz unter <table>.

Zebra-Effekt mit HTML-Tag th

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, redet man vom Zebra-Effekt. Er unterstützt das Auge zum Beispiel die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .odd und .even für <th> mit den Hintergrundfarben Farbwert #9acd32 und Farbwert #ffb6c1.

<style type="text/css"><!--
  th.odd { 
    background-color: #9acd32;
  }
  th.even { 
    background-color:#ffb6c1;
  }
//-->
</style>

Diese werden abwechselnd genutzt.

<table>
<tr><td class="odd">J1,1</td><td class="even">J2,1</td><td class="odd">J3,1</td></tr>
<tr><td class="odd">J1,2</td><td class="even">J2,2</td><td class="odd">J3,2</td></tr>
<tr><td class="odd">J1,3</td><td class="even">J2,3</td><td class="odd">J3,3</td></tr>
</table>

Mehr zu th können Sie in Tabellen in HTML finden. Die Beschreibung vom HTML-Befehl th finden Sie in der HTML Referenz unter <th>.