Ressourcen: 137 HTML Farbnamen - Kombination von Farbe lightyellow und Farbwert #6495ed

Netscape führte seinerzeit die websicheren Farben ein. Neben diesen, einem bestimmten Schema folgenden, Farbwerten, definierte man noch 120 Werte und ordnete ihnen Namen zu. Zusammen mit den 17 Standard-HTML-Farben, die ebenfalls Namen haben, ergeben sich so 137 HTML Farbnamen.

Hintergrundfarbe lightyellow			Schriftfarbwert #6495ed
Detail	:	Hintergrund lightyellow	Detail	:	Schrift #6495ed
Farbe	:	lightyellow	Farbwert	:	#6495ed
Farbwert	:	#ffffe0	Farbe	:	cornflowerblue
HTML	:	lightyellow	HTML	:	#6495ed
HTML (Wert)	:	#ffffe0	HTML (Wert)	:	#6495ed
CSS	:	lightyellow	CSS	:	#6495ed
CSS (Wert)	:	#ffffe0	CSS (Wert)	:	#6495ed
CSS (kürzest)	:	#ffffe0	CSS (kürzest)	:	#6495ed
CSS (RGB)	:	rgb(255,255,224)	CSS (RGB)	:	rgb(100,149,237)
CSS (%RGB)	:	rgb(100%,100%,87%)	CSS (%RGB)	:	rgb(39%,58%,92%)

Verlauf Hintergrundfarbe lightyellow nach Schriftfarbwert #6495ed
#ffffe0	#e8efe1	#d2e0e3	#bcd1e5	#a6c2e7	#90b3e9	#7aa4eb	#6495ed
#ffffe0	#e8efe1	#d2e0e3	#bcd1e5	#a6c2e7	#90b3e9	#7aa4eb	#6495ed

Kombination von lightyellow und #6495ed
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in.				Auf Hintergrund lightyellow ist #6495ed ungeeignet. Sowohl Helligkeit als auch die Farben sind sich zu ähnlich. Die Ähnlichkeit der Farben #6495ed und lightyellow beträgt 86.09%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 13.91%.

Hintergrundfarbe lightyellow				Schriftfarbwert #6495ed
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ffffe0	#ffffe0	#ffffe0	#ffffe0	#6495ed	#6495ed	#6495ed	#6495ed
#ffffe4	#ffffe4	#dadac0	#dadac0	#7aa4ef	#7aa4ef	#557fcb	#557fcb
#ffffe8	#ffffe8	#b6b6a0	#b6b6a0	#90b3f2	#90b3f2	#476aa9	#476aa9
#ffffed	#ffffed	#919180	#919180	#a6c2f4	#a6c2f4	#395587	#395587
#fffff1	#fffff1	#6d6d60	#6d6d60	#bcd1f7	#bcd1f7	#2a3f65	#2a3f65
#fffff6	#fffff6	#484840	#484840	#d2e0f9	#d2e0f9	#1c2a43	#1c2a43
#fffffa	#fffffa	#242420	#242420	#e8effc	#e8effc	#0e1521	#0e1521
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe lightyellow und Farbwert #6495ed

Zebra-Effekt mit Tag td

Man spricht vom Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Der Effekt unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ung und .ger für <td> mit den Hintergrundfarben Farbe lightyellow und Farbwert #6495ed.

<style type="text/css"><!--
  td.ung { 
    background-color:lightyellow;
  }
  td.ger { 
    background-color:#6495ed;
  }
//-->
</style>

Diese werden abwechselnd angewendet.

<table>
<tr><td class="ung">Ea/a</td><td class="ger">Eb/a</td><td class="ung">Ec/a</td></tr>
<tr><td class="ung">Ea/b</td><td class="ger">Eb/b</td><td class="ung">Ec/b</td></tr>
<tr><td class="ung">Ea/c</td><td class="ger">Eb/c</td><td class="ung">Ec/c</td></tr>
</table>

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

Wechsel der Textfarbe bei Hover mit Befehl li

Die Textfarbe soll sich von Farbe lightyellow auf Farbwert #6495ed ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Darstellung von <li> in Farbe lightyellow vor.

Wir legen in diesem Beispiel bei <li> die Textfarbe auf Farbe lightyellow fest. Zwar lassen wir die Hintergrundfarbe unverändert, ändern jedoch die Schriftart auf sans-serif. Die Größe der Schrift setzen wir auf 94%.

<style type="text/css"><!--
  li { 
    font-size:94%; 
    color:lightyellow; 
    font-family:sans-serif;
  }
//-->
</style>

Jetzt fordern wir, dass bei Hover die Textfarbe auf #6495ed geändert wird.

<style type="text/css"><!--
  li:hover { 
    color:#6495ed;
  }
//-->
</style>

Mehr zu li finden Sie in Listen und Glossare in HTML. Einzelheiten vom Befehl li lesen Sie in der HTML Referenz unter <li>.