Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #f0f8ff und Farbwert #00008b

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 #f0f8ff			Schriftfarbwert #00008b
Detail	:	Hintergrund #f0f8ff	Detail	:	Schrift #00008b
Farbwert	:	#f0f8ff	Farbwert	:	#00008b
Farbe	:	aliceblue	Farbe	:	darkblue
HTML	:	#f0f8ff	HTML	:	#00008b
HTML (Wert)	:	#f0f8ff	HTML (Wert)	:	#00008b
CSS	:	#f0f8ff	CSS	:	#00008b
CSS (Wert)	:	#f0f8ff	CSS (Wert)	:	#00008b
CSS (kürzest)	:	#f0f8ff	CSS (kürzest)	:	#00008b
CSS (RGB)	:	rgb(240,248,255)	CSS (RGB)	:	rgb(0,0,139)
CSS (%RGB)	:	rgb(94%,97%,100%)	CSS (%RGB)	:	rgb(0%,0%,54%)

Verlauf Hintergrundfarbwert #f0f8ff nach Schriftfarbwert #00008b
#f0f8ff	#cdd4ee	#abb1dd	#898dcd	#666abc	#4446ac	#22239b	#00008b
#f0f8ff	#cdd4ee	#abb1dd	#898dcd	#666abc	#4446ac	#22239b	#00008b

Kombination von #f0f8ff und #00008b
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 id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in.				#00008b eignet sich als Schriftfarbe auf Hintergrund #f0f8ff. Helligkeitsunterschied und Unterschied in den Farben sind in Ordnung. Die Ähnlichkeit der Farben #00008b und #f0f8ff beträgt 32.10%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 67.90%.

Hintergrundfarbwert #f0f8ff				Schriftfarbwert #00008b
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#f0f8ff	#f0f8ff	#f0f8ff	#f0f8ff	#00008b	#00008b	#00008b	#00008b
#f2f9ff	#f2f9ff	#cdd4da	#cdd4da	#24249b	#24249b	#000077	#000077
#f4faff	#f4faff	#abb1b6	#abb1b6	#4848ac	#4848ac	#000063	#000063
#f6fbff	#f6fbff	#898d91	#898d91	#6d6dbc	#6d6dbc	#00004f	#00004f
#f8fcff	#f8fcff	#666a6d	#666a6d	#9191cd	#9191cd	#00003b	#00003b
#fafdff	#fafdff	#444648	#444648	#b6b6dd	#b6b6dd	#000027	#000027
#fcfeff	#fcfeff	#222324	#222324	#dadaee	#dadaee	#000013	#000013
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #f0f8ff und Farbwert #00008b

Wechsel der Hintergrundfarbe bei Hover bei HTML-Befehl input

Die Hintergrundfarbe soll sich von Farbwert #f0f8ff auf Farbwert #00008b ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Darstellung von <input> in Farbwert #f0f8ff vor.

Als Beispiel legen wir Farbwert #f0f8ff als Hintergrundfarbe von <input> fest. Die Textfarbe verändern wir nicht, setzen jedoch die Schriftart auf courier new:

<style type="text/css"><!--
  input { 
    font-family:courier new; 
    background-color:#f0f8ff;
  }
//-->
</style>

Jetzt stellen wir ein, dass bei Hover die Hintergrundfarbe auf #00008b geändert wird.

<style type="text/css"><!--
  input: hover { 
    background-color: #00008b;
  }
//-->
</style>

Mehr zum Thema input können Sie in Formulare in HTML finden. Beschreibung des HTML-Tag <input>.

Zebra-Effekt bei Tag tr

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, redet man von einem Zebra-Effekt. Dieser Effekt unterstützt das Auge, etwa die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .yang und .ying für <tr> mit unterschiedlichen Hintergrundfarben Farbwert #f0f8ff und Farbwert #00008b.

<style type="text/css"><!--
  tr.yang { 
    background-color:#f0f8ff;
  }
  tr.ying { 
    background-color:#00008b;
  }
//-->
</style>

Diese Klassen werden dann abwechselnd verwendet.

<table>
<tr class="yang"><td>S1~1</td><td>S2~1</td><td>S3~1</td></tr>
<tr class="ying"><td>S1~2</td><td>S2~2</td><td>S3~2</td></tr>
<tr class="yang"><td>S1~3</td><td>S2~3</td><td>S3~3</td></tr>
</table>

Weiteres zum Thema tr können Sie in Tabellen in HTML lesen. Weiteres zum HTML-Tag tr ist in der HTML Referenz bei <tr> genau gezeigt.