Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #ffb6c1 und Farbe mediumspringgreen

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 #ffb6c1			Schriftfarbe mediumspringgreen
Detail	:	Hintergrund #ffb6c1	Detail	:	Schrift mediumspringgreen
Farbwert	:	#ffb6c1	Farbe	:	mediumspringgreen
Farbe	:	lightpink	Farbwert	:	#00fa9a
HTML	:	#ffb6c1	HTML	:	mediumspringgreen
HTML (Wert)	:	#ffb6c1	HTML (Wert)	:	#00fa9a
CSS	:	#ffb6c1	CSS	:	mediumspringgreen
CSS (Wert)	:	#ffb6c1	CSS (Wert)	:	#00fa9a
CSS (kürzest)	:	#ffb6c1	CSS (kürzest)	:	#00fa9a
CSS (RGB)	:	rgb(255,182,193)	CSS (RGB)	:	rgb(0,250,154)
CSS (%RGB)	:	rgb(100%,71%,75%)	CSS (%RGB)	:	rgb(0%,98%,60%)

Verlauf Hintergrundfarbwert #ffb6c1 nach Schriftfarbe mediumspringgreen
#ffb6c1	#dabfbb	#b6c9b5	#91d3b0	#6ddcaa	#48e6a5	#24f09f	#00fa9a
#ffb6c1	#dabfbb	#b6c9b5	#91d3b0	#6ddcaa	#48e6a5	#24f09f	#00fa9a

Kombination von #ffb6c1 und mediumspringgreen
Cras vestibulum tristique erat, ac interdum justo cursus in. 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 id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				mediumspringgreen ist nicht als Schriftfarbe auf Hintergrund #ffb6c1 geeignet, da die Unterschiede in der Helligkeit und Farbe zu gering sind. Die Ähnlichkeit der Farben mediumspringgreen und #ffb6c1 beträgt 94.33%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 5.67%.

Hintergrundfarbwert #ffb6c1				Schriftfarbe mediumspringgreen
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ffb6c1	#ffb6c1	#ffb6c1	#ffb6c1	#00fa9a	#00fa9a	#00fa9a	#00fa9a
#ffc0c9	#ffc0c9	#da9ca5	#da9ca5	#24faa8	#24faa8	#00d684	#00d684
#ffcad2	#ffcad2	#b68289	#b68289	#48fbb6	#48fbb6	#00b26e	#00b26e
#ffd5db	#ffd5db	#91686e	#91686e	#6dfcc5	#6dfcc5	#008e58	#008e58
#ffdfe4	#ffdfe4	#6d4e52	#6d4e52	#91fcd3	#91fcd3	#006b42	#006b42
#ffeaed	#ffeaed	#483437	#483437	#b6fde2	#b6fde2	#00472c	#00472c
#fff4f6	#fff4f6	#241a1b	#241a1b	#dafef0	#dafef0	#002316	#002316
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #ffb6c1 und Farbe mediumspringgreen

Zebra-Effekt bei Tag td

Man spricht vom Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Der Effekt unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .even und .odd für <td> mit den Hintergrundfarben Farbwert #ffb6c1 und Farbe mediumspringgreen.

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

Diese CSS-Klassen werden abwechselnd angewendet.

<table>
<tr><td class="even">E1~1</td><td class="odd">E2~1</td><td class="even">E3~1</td></tr>
<tr><td class="even">E1~2</td><td class="odd">E2~2</td><td class="even">E3~2</td></tr>
<tr><td class="even">E1~3</td><td class="odd">E2~3</td><td class="even">E3~3</td></tr>
</table>

Mehr zu td können Sie in Tabellen in HTML lesen. Einzelheiten vom hier gezeigten HTML-Befehl td finden Sie in der HTML Referenz unter <td>.

Wechsel der Hintergrundfarbe bei Hover bei Tag center

Die Hintergrundfarbe soll sich von Farbwert #ffb6c1 auf Farbe mediumspringgreen ändern, wenn man mit der Maus auf <center> zeigt. Bereiten wir zunächst eine Darstellung von <center> in Farbwert #ffb6c1 vor.

Wir ändern zum Beispiel die Hintergrundfarbe von <center> auf Farbwert #ffb6c1.

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

Nun fordern wir, dass sich bei Hover die Hintergrundfarbe auf mediumspringgreen ändert.

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

Weiteres zum Thema lesen Sie in Grundlegende Gestaltungselemente in HTML. Der hier verwendete HTML-Befehl center ist in der HTML Referenz bei <center> beschrieben.