Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #ff69b4 und Farbwert #98fb98

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 #ff69b4			Schriftfarbwert #98fb98
Detail	:	Hintergrund #ff69b4	Detail	:	Schrift #98fb98
Farbwert	:	#ff69b4	Farbwert	:	#98fb98
Farbe	:	hotpink	Farbe	:	palegreen
HTML	:	#ff69b4	HTML	:	#98fb98
HTML (Wert)	:	#ff69b4	HTML (Wert)	:	#98fb98
CSS	:	#ff69b4	CSS	:	#98fb98
CSS (Wert)	:	#ff69b4	CSS (Wert)	:	#98fb98
CSS (kürzest)	:	#ff69b4	CSS (kürzest)	:	#98fb98
CSS (RGB)	:	rgb(255,105,180)	CSS (RGB)	:	rgb(152,251,152)
CSS (%RGB)	:	rgb(100%,41%,70%)	CSS (%RGB)	:	rgb(59%,98%,59%)

Verlauf Hintergrundfarbwert #ff69b4 nach Schriftfarbwert #98fb98
#ff69b4	#f07db0	#e192ac	#d2a7a8	#c4bca4	#b5d1a0	#a6e69c	#98fb98
#ff69b4	#f07db0	#e192ac	#d2a7a8	#c4bca4	#b5d1a0	#a6e69c	#98fb98

Kombination von #ff69b4 und #98fb98
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.				Auf Hintergrund #ff69b4 ist #98fb98 ungeeignet. Sowohl Helligkeit als auch die Farben sind sich zu ähnlich. Die Ähnlichkeit der Farben #98fb98 und #ff69b4 beträgt 90.04%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 9.96%.

Hintergrundfarbwert #ff69b4				Schriftfarbwert #98fb98
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ff69b4	#ff69b4	#ff69b4	#ff69b4	#98fb98	#98fb98	#98fb98	#98fb98
#ff7ebe	#ff7ebe	#da5a9a	#da5a9a	#a6fba6	#a6fba6	#82d782	#82d782
#ff93c9	#ff93c9	#b64b80	#b64b80	#b5fcb5	#b5fcb5	#6cb36c	#6cb36c
#ffa9d4	#ffa9d4	#913c66	#913c66	#c4fcc4	#c4fcc4	#568f56	#568f56
#ffbede	#ffbede	#6d2d4d	#6d2d4d	#d2fdd2	#d2fdd2	#416b41	#416b41
#ffd4e9	#ffd4e9	#481e33	#481e33	#e1fde1	#e1fde1	#2b472b	#2b472b
#ffe9f4	#ffe9f4	#240f19	#240f19	#f0fef0	#f0fef0	#152315	#152315
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #ff69b4 und Farbwert #98fb98

Zebra-Effekt bei HTML-Befehl td

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, 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 .ying und .yang für <td> mit unterschiedlichen Hintergrundfarben Farbwert #ff69b4 und Farbwert #98fb98.

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

Diese Klassen werden dann abwechselnd genutzt.

<table>
<tr><td class="ying">KA~A</td><td class="yang">KB~A</td><td class="ying">KC~A</td></tr>
<tr><td class="ying">KA~B</td><td class="yang">KB~B</td><td class="ying">KC~B</td></tr>
<tr><td class="ying">KA~C</td><td class="yang">KB~C</td><td class="ying">KC~C</td></tr>
</table>

Mehr zum Thema td lesen Sie in Tabellen in HTML. Einzelheiten des Befehl <td>.

Wechsel der Hintergrundfarbe bei Hover mit HTML-Tag th

Die Hintergrundfarbe soll sich von Farbwert #ff69b4 auf Farbwert #98fb98 ändern, wenn man mit der Maus auf <th> zeigt. Wir bereiten zunächst die Formatierung von <th> in Farbwert #ff69b4 vor.

Wir legen als Beispiel Farbwert #ff69b4 als Hintergrundfarbe von <th> fest. Die Größe der Schrift vergrößern wir auf 126%.

<style type="text/css"><!--
  th { 
    font-size: 126%; 
    background-color: #ff69b4;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Mausberührung die Hintergrundfarbe auf #98fb98 ändert.

<style type="text/css"><!--
  th:hover { 
    background-color:#98fb98;
  }
//-->
</style>

Weiteres zum Thema th können Sie in Tabellen in HTML nachsehen. Möglichkeiten des Befehl th erfahren Sie in der HTML Referenz unter <th>.