Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #ff69b4 und Farbe yellowgreen

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			Schriftfarbe yellowgreen
Detail	:	Hintergrund #ff69b4	Detail	:	Schrift yellowgreen
Farbwert	:	#ff69b4	Farbe	:	yellowgreen
Farbe	:	hotpink	Farbwert	:	#9acd32
HTML	:	#ff69b4	HTML	:	yellowgreen
HTML (Wert)	:	#ff69b4	HTML (Wert)	:	#9acd32
CSS	:	#ff69b4	CSS	:	yellowgreen
CSS (Wert)	:	#ff69b4	CSS (Wert)	:	#9acd32
CSS (kürzest)	:	#ff69b4	CSS (kürzest)	:	#9acd32
CSS (RGB)	:	rgb(255,105,180)	CSS (RGB)	:	rgb(154,205,50)
CSS (%RGB)	:	rgb(100%,41%,70%)	CSS (%RGB)	:	rgb(60%,80%,19%)

Verlauf Hintergrundfarbwert #ff69b4 nach Schriftfarbe yellowgreen
#ff69b4	#f077a1	#e2858e	#d3937c	#c5a269	#b6b057	#a8be44	#9acd32
#ff69b4	#f077a1	#e2858e	#d3937c	#c5a269	#b6b057	#a8be44	#9acd32

Kombination von #ff69b4 und yellowgreen
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit der Farben yellowgreen und #ff69b4 ergibt sich zu 93.30%. Die Lesbarkeit dieser Farbkombination liegt damit bei 6.70%. Auf Hintergrund #ff69b4 ist yellowgreen ungeeignet, da sich sowohl Helligkeit als auch die Farben zu ähnlich sind.

Hintergrundfarbwert #ff69b4				Schriftfarbe yellowgreen
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ff69b4	#ff69b4	#ff69b4	#ff69b4	#9acd32	#9acd32	#9acd32	#9acd32
#ff7ebe	#ff7ebe	#da5a9a	#da5a9a	#a8d44f	#a8d44f	#84af2a	#84af2a
#ff93c9	#ff93c9	#b64b80	#b64b80	#b6db6c	#b6db6c	#6e9223	#6e9223
#ffa9d4	#ffa9d4	#913c66	#913c66	#c5e289	#c5e289	#58751c	#58751c
#ffbede	#ffbede	#6d2d4d	#6d2d4d	#d3e9a7	#d3e9a7	#425715	#425715
#ffd4e9	#ffd4e9	#481e33	#481e33	#e2f0c4	#e2f0c4	#2c3a0e	#2c3a0e
#ffe9f4	#ffe9f4	#240f19	#240f19	#f0f7e1	#f0f7e1	#161d07	#161d07
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #ff69b4 und Farbe yellowgreen

Zebra-Effekt bei HTML-Tag tr

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, redet man vom Zebra-Effekt. Der Effekt unterstützt das Auge zum Beispiel die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .even und .odd für <tr> mit den Hintergrundfarben Farbwert #ff69b4 und Farbe yellowgreen.

<style type="text/css"><!--
  tr.even { 
    background-color:#ff69b4;
  }
  tr.odd { 
    background-color:yellowgreen;
  }
//-->
</style>

Diese Klassen werden abwechselnd verwendet.

<table>
<tr class="even"><td>Ta,a</td><td>Tb,a</td><td>Tc,a</td></tr>
<tr class="odd"><td>Ta,b</td><td>Tb,b</td><td>Tc,b</td></tr>
<tr class="even"><td>Ta,c</td><td>Tb,c</td><td>Tc,c</td></tr>
</table>

Mehr zum Thema tr lesen Sie in Tabellen in HTML. Möglichkeiten des Tag <tr>.

Wechsel der Umrandung bei Hover bei HTML-Befehl frame

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

In diesem Beispiel umranden wir <frame> mit einem 1 Pixel dicken, einfallenden Rahmen in Farbwert #ff69b4.

<style type="text/css"><!--
  frame { 
    border-width:1px; 
    border-color:#ff69b4; 
    border-style:inset;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Berührung mit der Maus die Rahmenfarbe auf yellowgreen ändert.

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

Einzelheiten des Befehl frame finden Sie in der HTML Referenz unter <frame>.