Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #f4a460 und Farbwert #9932cc

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 #f4a460			Schriftfarbwert #9932cc
Detail	:	Hintergrund #f4a460	Detail	:	Schrift #9932cc
Farbwert	:	#f4a460	Farbwert	:	#9932cc
Farbe	:	sandybrown	Farbe	:	darkorchid
HTML	:	#f4a460	HTML	:	#9932cc
HTML (Wert)	:	#f4a460	HTML (Wert)	:	#9932cc
CSS	:	#f4a460	CSS	:	#9932cc
CSS (Wert)	:	#f4a460	CSS (Wert)	:	#9932cc
CSS (kürzest)	:	#f4a460	CSS (kürzest)	:	#9932cc
CSS (RGB)	:	rgb(244,164,96)	CSS (RGB)	:	rgb(153,50,204)
CSS (%RGB)	:	rgb(95%,64%,37%)	CSS (%RGB)	:	rgb(60%,19%,80%)

Verlauf Hintergrundfarbwert #f4a460 nach Schriftfarbwert #9932cc
#f4a460	#e7936f	#da837e	#cd738e	#c0629d	#b352ad	#a642bc	#9932cc
#f4a460	#e7936f	#da837e	#cd738e	#c0629d	#b352ad	#a642bc	#9932cc

Kombination von #f4a460 und #9932cc
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. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				#9932cc eignet sich nicht als Schriftfarbe auf Hintergrund #f4a460. Sowohl Helligkeit als auch die Farben sind sich zu ähnlich. Die Ähnlichkeit von #9932cc und #f4a460 beträgt 86.65%. Die Lesbarkeit dieser Kombination ergibt sich zu 13.35%.

Hintergrundfarbwert #f4a460				Schriftfarbwert #9932cc
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#f4a460	#f4a460	#f4a460	#f4a460	#9932cc	#9932cc	#9932cc	#9932cc
#f5b176	#f5b176	#d18c52	#d18c52	#a74fd3	#a74fd3	#832aae	#832aae
#f7be8d	#f7be8d	#ae7544	#ae7544	#b66cda	#b66cda	#6d2391	#6d2391
#f8cba4	#f8cba4	#8b5d36	#8b5d36	#c489e1	#c489e1	#571c74	#571c74
#fad8ba	#fad8ba	#684629	#684629	#d3a7e9	#d3a7e9	#411557	#411557
#fbe5d1	#fbe5d1	#452e1b	#452e1b	#e1c4f0	#e1c4f0	#2b0e3a	#2b0e3a
#fdf2e8	#fdf2e8	#22170d	#22170d	#f0e1f7	#f0e1f7	#15071d	#15071d
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #f4a460 und Farbwert #9932cc

Wechsel der Hintergrundfarbe bei Hover mit Tag h1

Mit HTML-Befehl <h1> erzeugen Sie eine Überschrift der 1. Stufe. Sie kann hervorgehoben und farblich gestaltet werden.

Die Hintergrundfarbe soll sich von Farbwert #f4a460 auf Farbwert #9932cc ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Darstellung von <h1> in Farbwert #f4a460 vor.

Wir legen hier bei <h1> die Hintergrundfarbe auf Farbwert #f4a460 fest. Die Textfarbe behalten wir bei. Die Schriftart setzen wir auf courier new.

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

Nun stellen wir ein, dass sich bei Berührung mit der Maus die Hintergrundfarbe auf #9932cc ändert.

<style type="text/css"><!--
  h1: hover { 
    background-color: #9932cc;
  }
//-->
</style>

Mehr zum Thema h1 können Sie in Grundlegende Gestaltungselemente in HTML nachlesen. Weiteres zum hier gezeigten HTML-Befehl h1 erfahren Sie in der HTML Referenz unter <h1>.

Wechsel der Textfarbe bei Hover mit Tag a

Mit HTML-Tag <a> wird ein Verweis erzeugt. Dieser kann farblich gestaltet werden.

Die Textfarbe soll sich von Farbwert #f4a460 auf Farbwert #9932cc ändern, wenn man mit der Maus auf <a> zeigt. Bereiten wir zunächst die Formatierung von <a> in Farbwert #f4a460 vor.

Zum Beispiel setzen wir die Textfarbe von <a> auf Farbwert #f4a460. Die Schriftgröße setzen wir auf 13px:

<style type="text/css"><!--
  a { 
    font-size: 13px; 
    color: #f4a460;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Mausberührung die Textfarbe auf #9932cc ändert.

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

Mehr zu a können Sie in Verweise und Protokolle in HTML nachsehen. Beschreibung vom HTML-Befehl <a>.