Ressourcen: 137 HTML Farbnamen - Kombination von Farbe lightblue und Farbwert #fffff0

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 lightblue			Schriftfarbwert #fffff0
Detail	:	Hintergrund lightblue	Detail	:	Schrift #fffff0
Farbe	:	lightblue	Farbwert	:	#fffff0
Farbwert	:	#add8e6	Farbe	:	ivory
HTML	:	lightblue	HTML	:	#fffff0
HTML (Wert)	:	#add8e6	HTML (Wert)	:	#fffff0
CSS	:	lightblue	CSS	:	#fffff0
CSS (Wert)	:	#add8e6	CSS (Wert)	:	#fffff0
CSS (kürzest)	:	#add8e6	CSS (kürzest)	:	#fffff0
CSS (RGB)	:	rgb(173,216,230)	CSS (RGB)	:	rgb(255,255,240)
CSS (%RGB)	:	rgb(67%,84%,90%)	CSS (%RGB)	:	rgb(100%,100%,94%)

Verlauf Hintergrundfarbe lightblue nach Schriftfarbwert #fffff0
#add8e6	#b8dde7	#c4e3e8	#d0e8ea	#dbeeeb	#e7f3ed	#f3f9ee	#fffff0
#add8e6	#b8dde7	#c4e3e8	#d0e8ea	#dbeeeb	#e7f3ed	#f3f9ee	#fffff0

Kombination von lightblue und #fffff0
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. 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. Cras id velit ante.				Die Ähnlichkeit von #fffff0 und lightblue beträgt 92.79%. Die Lesbarkeit dieser Farbkombination liegt damit bei 7.21%. #fffff0 eignet sich nicht als Schriftfarbe auf Hintergrund lightblue. Sowohl Helligkeit als auch die Farben sind zu ähnlich.

Hintergrundfarbe lightblue				Schriftfarbwert #fffff0
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#add8e6	#add8e6	#add8e6	#add8e6	#fffff0	#fffff0	#fffff0	#fffff0
#b8dde9	#b8dde9	#94b9c5	#94b9c5	#fffff2	#fffff2	#dadacd	#dadacd
#c4e3ed	#c4e3ed	#7b9aa4	#7b9aa4	#fffff4	#fffff4	#b6b6ab	#b6b6ab
#d0e8f0	#d0e8f0	#627b83	#627b83	#fffff6	#fffff6	#919189	#919189
#dbeef4	#dbeef4	#4a5c62	#4a5c62	#fffff8	#fffff8	#6d6d66	#6d6d66
#e7f3f7	#e7f3f7	#313d41	#313d41	#fffffa	#fffffa	#484844	#484844
#f3f9fb	#f3f9fb	#181e20	#181e20	#fffffc	#fffffc	#242422	#242422
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe lightblue und Farbwert #fffff0

Wechsel der Textfarbe bei Hover von HTML-Befehl select

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

Z.B. legen wir bei <select> die Textfarbe auf Farbe lightblue fest. Die Hintergrundfarbe lassen wir unverändert, setzen jedoch die Schriftart auf verdana und erhöhen die Schriftgröße auf 127%:

<style type="text/css"><!--
  select { 
    font-size:127%; 
    color:lightblue; 
    font-family:verdana;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Mausberührung die Textfarbe zu #fffff0 ändert.

<style type="text/css"><!--
  select:hover { 
    color:#fffff0;
  }
//-->
</style>

Mehr zum Thema select können Sie in Formulare in HTML erfahren. Einzelheiten des HTML-Befehl select finden Sie in der HTML Referenz unter <select>.

Zebra-Effekt von Tag th

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, redet man von einem so genannten Zebra-Effekt. Er unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .yang und .ying für <th> mit den Hintergrundfarben Farbe lightblue und Farbwert #fffff0.

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

Diese CSS-Klassen werden abwechselnd verwendet.

<table>
<tr><td class="yang">W1:1</td><td class="ying">W2:1</td><td class="yang">W3:1</td></tr>
<tr><td class="yang">W1:2</td><td class="ying">W2:2</td><td class="yang">W3:2</td></tr>
<tr><td class="yang">W1:3</td><td class="ying">W2:3</td><td class="yang">W3:3</td></tr>
</table>

Weiteres zu th können Sie in Tabellen in HTML lesen. Die Beschreibung vom Tag th lesen Sie in der HTML Referenz unter <th>.