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

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 #e9967a
Detail	:	Hintergrund #f0f8ff	Detail	:	Schrift #e9967a
Farbwert	:	#f0f8ff	Farbwert	:	#e9967a
Farbe	:	aliceblue	Farbe	:	darksalmon
HTML	:	#f0f8ff	HTML	:	#e9967a
HTML (Wert)	:	#f0f8ff	HTML (Wert)	:	#e9967a
CSS	:	#f0f8ff	CSS	:	#e9967a
CSS (Wert)	:	#f0f8ff	CSS (Wert)	:	#e9967a
CSS (kürzest)	:	#f0f8ff	CSS (kürzest)	:	#e9967a
CSS (RGB)	:	rgb(240,248,255)	CSS (RGB)	:	rgb(233,150,122)
CSS (%RGB)	:	rgb(94%,97%,100%)	CSS (%RGB)	:	rgb(91%,58%,47%)

Verlauf Hintergrundfarbwert #f0f8ff nach Schriftfarbwert #e9967a
#f0f8ff	#efeaec	#eedcd9	#edcec6	#ecc0b3	#ebb2a0	#eaa48d	#e9967a
#f0f8ff	#efeaec	#eedcd9	#edcec6	#ecc0b3	#ebb2a0	#eaa48d	#e9967a

Kombination von #f0f8ff und #e9967a
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 vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante.				Die Ähnlichkeit von #e9967a und #f0f8ff beträgt 89.77%. Die Lesbarkeit dieser Farbkombination liegt damit bei 10.23%. #e9967a ist nicht als Schriftfarbe auf Hintergrund #f0f8ff geeignet, weil sowohl Helligkeit als auch die Farben zu ähnlich sind.

Hintergrundfarbwert #f0f8ff				Schriftfarbwert #e9967a
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#f0f8ff	#f0f8ff	#f0f8ff	#f0f8ff	#e9967a	#e9967a	#e9967a	#e9967a
#f2f9ff	#f2f9ff	#cdd4da	#cdd4da	#eca58d	#eca58d	#c78068	#c78068
#f4faff	#f4faff	#abb1b6	#abb1b6	#efb4a0	#efb4a0	#a66b57	#a66b57
#f6fbff	#f6fbff	#898d91	#898d91	#f2c3b3	#f2c3b3	#855545	#855545
#f8fcff	#f8fcff	#666a6d	#666a6d	#f5d2c6	#f5d2c6	#634034	#634034
#fafdff	#fafdff	#444648	#444648	#f8e1d9	#f8e1d9	#422a22	#422a22
#fcfeff	#fcfeff	#222324	#222324	#fbf0ec	#fbf0ec	#211511	#211511
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #f0f8ff und Farbwert #e9967a

Wechsel der Textfarbe bei Hover mit HTML-Tag p

Die Textfarbe soll sich von Farbwert #f0f8ff auf Farbwert #e9967a ändern, wenn man mit der Maus auf <p> zeigt. Bereiten wir zunächst eine Formatierung von <p> in Farbwert #f0f8ff vor.

Z.B. legen wir Farbwert #f0f8ff als Textfarbe von <p> fest. Die Größe der Schrift verringern wir auf 81%:

<style type="text/css"><!--
  p { 
    color:#f0f8ff; 
    font-size:81%;
  }
//-->
</style>

Nun fordern wir, dass sich bei Berührung mit der Maus die Textfarbe auf #e9967a ändert.

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

Weiteres zum Thema p können Sie in Grundlegende Gestaltungselemente in HTML finden. Einzelheiten des hier verwendeten HTML-Tag p erfahren Sie in der HTML Referenz unter <p>.

Wechsel der Hintergrundfarbe bei Hover mit Tag a

Einen Link setzen Sie mit HTML-Tag <a> und kann farblich gestaltet und hervorgehoben werden.

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

Wir legen in diesem Beispiel Farbwert #f0f8ff als Hintergrundfarbe von <a> fest. Die Textfarbe behalten wir bei, ändern jedoch die Schriftart auf monospace:

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

Nun fordern wir, dass sich bei Hover die Hintergrundfarbe zu #e9967a ändert.

<style type="text/css"><!--
  a:hover { 
    background-color:#e9967a;
  }
//-->
</style>

Weiteres zu a erfahren Sie in Verweise und Protokolle in HTML. Der Tag a ist in der HTML Referenz bei <a> beschrieben.