Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #fffff0 und Farbwert #1e90ff

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 #fffff0			Schriftfarbwert #1e90ff
Detail	:	Hintergrund #fffff0	Detail	:	Schrift #1e90ff
Farbwert	:	#fffff0	Farbwert	:	#1e90ff
Farbe	:	ivory	Farbe	:	dodgerblue
HTML	:	#fffff0	HTML	:	#1e90ff
HTML (Wert)	:	#fffff0	HTML (Wert)	:	#1e90ff
CSS	:	#fffff0	CSS	:	#1e90ff
CSS (Wert)	:	#fffff0	CSS (Wert)	:	#1e90ff
CSS (kürzest)	:	#fffff0	CSS (kürzest)	:	#1e90ff
CSS (RGB)	:	rgb(255,255,240)	CSS (RGB)	:	rgb(30,144,255)
CSS (%RGB)	:	rgb(100%,100%,94%)	CSS (%RGB)	:	rgb(11%,56%,100%)

Verlauf Hintergrundfarbwert #fffff0 nach Schriftfarbwert #1e90ff
#fffff0	#deeff2	#bedff4	#9ecff6	#7ebff8	#5eaffa	#3e9ffc	#1e90ff
#fffff0	#deeff2	#bedff4	#9ecff6	#7ebff8	#5eaffa	#3e9ffc	#1e90ff

Kombination von #fffff0 und #1e90ff
Cras id velit ante. 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in.				#1e90ff ist nicht als Schriftfarbe auf Hintergrund #fffff0 geeignet. Zwar ist der Helligkeitsunterschied ausreichend, doch die Farben selbst sind zu ähnlich. Die Ähnlichkeit von #1e90ff und #fffff0 ergibt sich zu 84.72%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 15.28%.

Hintergrundfarbwert #fffff0				Schriftfarbwert #1e90ff
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#fffff0	#fffff0	#fffff0	#fffff0	#1e90ff	#1e90ff	#1e90ff	#1e90ff
#fffff2	#fffff2	#dadacd	#dadacd	#3e9fff	#3e9fff	#197bda	#197bda
#fffff4	#fffff4	#b6b6ab	#b6b6ab	#5eafff	#5eafff	#1566b6	#1566b6
#fffff6	#fffff6	#919189	#919189	#7ebfff	#7ebfff	#115291	#115291
#fffff8	#fffff8	#6d6d66	#6d6d66	#9ecfff	#9ecfff	#0c3d6d	#0c3d6d
#fffffa	#fffffa	#484844	#484844	#bedfff	#bedfff	#082948	#082948
#fffffc	#fffffc	#242422	#242422	#deefff	#deefff	#041424	#041424
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #fffff0 und Farbwert #1e90ff

Wechsel der Textfarbe bei Hover mit HTML-Tag legend

Die Textfarbe soll sich von Farbwert #fffff0 auf Farbwert #1e90ff ändern, wenn man mit der Maus auf <legend> zeigt. Wir bereiten zunächst die Formatierung von <legend> in Farbwert #fffff0 vor.

Wir legen z.B. Farbwert #fffff0 als Textfarbe von <legend> fest. Zwar behalten wir die Hintergrundfarbe bei, ändern jedoch die Schriftart auf courier new. Die Schriftgröße setzen wir auf 113%.

<style type="text/css"><!--
  legend { 
    font-family: courier new; 
    color: #fffff0; 
    font-size: 113%;
  }
//-->
</style>

Nun fordern wir, dass sich bei Mausberührung die Textfarbe zu #1e90ff ändert.

<style type="text/css"><!--
  legend: hover { 
    color: #1e90ff;
  }
//-->
</style>

Weiteres zum Thema können Sie in Formulare in HTML erfahren. Weiteres zum HTML-Befehl legend erfahren Sie in der HTML Referenz unter <legend>.

Zebra-Effekt mit Befehl tr

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, redet man von einem so genannten Zebra-Effekt. Dieser Effekt unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .gerade und .ungerade für <tr> mit unterschiedlichen Hintergrundfarben Farbwert #fffff0 und Farbwert #1e90ff.

<style type="text/css"><!--
  tr.gerade { 
    background-color: #fffff0;
  }
  tr.ungerade { 
    background-color: #1e90ff;
  }
//-->
</style>

Diese werden abwechselnd angewendet.

<table>
<tr class="gerade"><td>Q1.1</td><td>Q2.1</td><td>Q3.1</td></tr>
<tr class="ungerade"><td>Q1.2</td><td>Q2.2</td><td>Q3.2</td></tr>
<tr class="gerade"><td>Q1.3</td><td>Q2.3</td><td>Q3.3</td></tr>
</table>

Mehr zum Thema tr können Sie in Tabellen in HTML finden. Zur Beschreibung vom HTML-Tag <tr>.