Ressourcen: 120 HTML Farbnamen - Kombination von Farbe pink 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.

Hintergrundfarbe pink			Schriftfarbwert #98fb98
Detail	:	Hintergrund pink	Detail	:	Schrift #98fb98
Farbe	:	pink	Farbwert	:	#98fb98
Farbwert	:	#ffc0cb	Farbe	:	palegreen
HTML	:	pink	HTML	:	#98fb98
HTML (Wert)	:	#ffc0cb	HTML (Wert)	:	#98fb98
CSS	:	pink	CSS	:	#98fb98
CSS (Wert)	:	#ffc0cb	CSS (Wert)	:	#98fb98
CSS (kürzest)	:	#ffc0cb	CSS (kürzest)	:	#98fb98
CSS (RGB)	:	rgb(255,192,203)	CSS (RGB)	:	rgb(152,251,152)
CSS (%RGB)	:	rgb(100%,75%,79%)	CSS (%RGB)	:	rgb(59%,98%,59%)

Verlauf Hintergrundfarbe pink nach Schriftfarbwert #98fb98
#ffc0cb	#f0c8c3	#e1d0bc	#d2d9b5	#c4e1ad	#b5eaa6	#a6f29f	#98fb98
#ffc0cb	#f0c8c3	#e1d0bc	#d2d9b5	#c4e1ad	#b5eaa6	#a6f29f	#98fb98

Kombination von pink und #98fb98
Cras id velit ante. 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.				#98fb98 ist nicht als Schriftfarbe auf Hintergrund pink geeignet. Die Helligkeit und Farben sind zu ähnlich. Die Ähnlichkeit von #98fb98 und pink ergibt sich zu 94.22%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 5.78%.

Hintergrundfarbe pink				Schriftfarbwert #98fb98
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ffc0cb	#ffc0cb	#ffc0cb	#ffc0cb	#98fb98	#98fb98	#98fb98	#98fb98
#ffc9d2	#ffc9d2	#daa4ae	#daa4ae	#a6fba6	#a6fba6	#82d782	#82d782
#ffd2d9	#ffd2d9	#b68991	#b68991	#b5fcb5	#b5fcb5	#6cb36c	#6cb36c
#ffdbe1	#ffdbe1	#916d74	#916d74	#c4fcc4	#c4fcc4	#568f56	#568f56
#ffe4e8	#ffe4e8	#6d5257	#6d5257	#d2fdd2	#d2fdd2	#416b41	#416b41
#ffedf0	#ffedf0	#48363a	#48363a	#e1fde1	#e1fde1	#2b472b	#2b472b
#fff6f7	#fff6f7	#241b1d	#241b1d	#f0fef0	#f0fef0	#152315	#152315
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe pink und Farbwert #98fb98

Wechsel der Umrandung bei Hover bei Befehl frame

Die Rahmenfarbe soll sich von Farbe pink auf Farbwert #98fb98 ändern, wenn man mit der Maus auf <frame> zeigt. Wir bereiten zunächst eine Formatierung von <frame> in Farbe pink vor.

In diesem Beispiel umranden wir <frame> mit einem 3 Pixel dicken, gestrichelten Rahmen in Farbe pink.

<style type="text/css"><!--
  frame { border:3px dashed pink; }
//-->
</style>

Nun stellen wir ein, dass bei Hover die Rahmenfarbe auf #98fb98 geändert wird.

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

Weiteres zum hier gezeigten HTML-Befehl frame ist in der HTML Referenz unter <frame> ausführlich beschrieben.

Zebra-Effekt von HTML-Befehl th

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, spricht man vom so genannten Zebra-Effekt. Er unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ying und .yang für <th> mit unterschiedlichen Hintergrundfarben Farbe pink und Farbwert #98fb98.

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

Diese werden dann abwechselnd genutzt.

<table>
<tr><td class="ying">A1.1</td><td class="yang">A2.1</td><td class="ying">A3.1</td></tr>
<tr><td class="ying">A1.2</td><td class="yang">A2.2</td><td class="ying">A3.2</td></tr>
<tr><td class="ying">A1.3</td><td class="yang">A2.3</td><td class="ying">A3.3</td></tr>
</table>

Mehr zum Thema können Sie in Tabellen in HTML nachlesen. Weiteres zum Tag <th>.