Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #f0f8ff und Farbe rosybrown

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			Schriftfarbe rosybrown
Detail	:	Hintergrund #f0f8ff	Detail	:	Schrift rosybrown
Farbwert	:	#f0f8ff	Farbe	:	rosybrown
Farbe	:	aliceblue	Farbwert	:	#bc8f8f
HTML	:	#f0f8ff	HTML	:	rosybrown
HTML (Wert)	:	#f0f8ff	HTML (Wert)	:	#bc8f8f
CSS	:	#f0f8ff	CSS	:	rosybrown
CSS (Wert)	:	#f0f8ff	CSS (Wert)	:	#bc8f8f
CSS (kürzest)	:	#f0f8ff	CSS (kürzest)	:	#bc8f8f
CSS (RGB)	:	rgb(240,248,255)	CSS (RGB)	:	rgb(188,143,143)
CSS (%RGB)	:	rgb(94%,97%,100%)	CSS (%RGB)	:	rgb(73%,56%,56%)

Verlauf Hintergrundfarbwert #f0f8ff nach Schriftfarbe rosybrown
#f0f8ff	#e8e9ef	#e1dadf	#d9cbcf	#d2bcbf	#caadaf	#c39e9f	#bc8f8f
#f0f8ff	#e8e9ef	#e1dadf	#d9cbcf	#d2bcbf	#caadaf	#c39e9f	#bc8f8f

Kombination von #f0f8ff und rosybrown
Cras vestibulum tristique erat, ac interdum justo cursus in. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante.				Die Ähnlichkeit von rosybrown und #f0f8ff ergibt sich zu 87.51%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 12.49%. rosybrown eignet sich nicht als Schriftfarbe auf Hintergrund #f0f8ff. Sowohl Helligkeit als auch die Farben sind sich zu ähnlich.

Hintergrundfarbwert #f0f8ff				Schriftfarbe rosybrown
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#f0f8ff	#f0f8ff	#f0f8ff	#f0f8ff	#bc8f8f	#bc8f8f	#bc8f8f	#bc8f8f
#f2f9ff	#f2f9ff	#cdd4da	#cdd4da	#c59f9f	#c59f9f	#a17a7a	#a17a7a
#f4faff	#f4faff	#abb1b6	#abb1b6	#cfafaf	#cfafaf	#866666	#866666
#f6fbff	#f6fbff	#898d91	#898d91	#d8bfbf	#d8bfbf	#6b5151	#6b5151
#f8fcff	#f8fcff	#666a6d	#666a6d	#e2cfcf	#e2cfcf	#503d3d	#503d3d
#fafdff	#fafdff	#444648	#444648	#ebdfdf	#ebdfdf	#352828	#352828
#fcfeff	#fcfeff	#222324	#222324	#f5efef	#f5efef	#1a1414	#1a1414
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #f0f8ff und Farbe rosybrown

Wechsel der Hintergrundfarbe bei Hover bei Befehl input

Die Hintergrundfarbe soll sich von Farbwert #f0f8ff auf Farbe rosybrown ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Formatierung von <input> in Farbwert #f0f8ff vor.

Wir legen zum Beispiel bei <input> die Hintergrundfarbe auf Farbwert #f0f8ff fest. Die Textfarbe ändern wir nicht, setzen jedoch die Schriftart auf sans-serif.

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

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

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

Weiteres zum Thema input können Sie in Formulare in HTML finden. Die Beschreibung des hier gezeigten HTML-Tag input finden Sie in der HTML Referenz unter <input>.

Zebra-Effekt bei Tag td

Man redet von einem Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Er unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ger und .ung für <td> mit unterschiedlichen Hintergrundfarben Farbwert #f0f8ff und Farbe rosybrown.

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

Diese Klassen werden dann abwechselnd verwendet.

<table>
<tr><td class="ger">BA-A</td><td class="ung">BB-A</td><td class="ger">BC-A</td></tr>
<tr><td class="ger">BA-B</td><td class="ung">BB-B</td><td class="ger">BC-B</td></tr>
<tr><td class="ger">BA-C</td><td class="ung">BB-C</td><td class="ger">BC-C</td></tr>
</table>

Weiteres zu td erfahren Sie in Tabellen in HTML. Möglichkeiten des hier genutzten Befehl td finden Sie in der HTML Referenz unter <td>.