Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #f4a460 und Farbe darkorchid

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			Schriftfarbe darkorchid
Detail	:	Hintergrund #f4a460	Detail	:	Schrift darkorchid
Farbwert	:	#f4a460	Farbe	:	darkorchid
Farbe	:	sandybrown	Farbwert	:	#9932cc
HTML	:	#f4a460	HTML	:	darkorchid
HTML (Wert)	:	#f4a460	HTML (Wert)	:	#9932cc
CSS	:	#f4a460	CSS	:	darkorchid
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 Schriftfarbe darkorchid
#f4a460	#e7936f	#da837e	#cd738e	#c0629d	#b352ad	#a642bc	#9932cc
#f4a460	#e7936f	#da837e	#cd738e	#c0629d	#b352ad	#a642bc	#9932cc

Kombination von #f4a460 und darkorchid
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. 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. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit von darkorchid und #f4a460 ergibt sich zu 86.65%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 13.35%. Auf Hintergrund #f4a460 ist darkorchid ungeeignet. Sowohl Helligkeit als auch die Farben sind sich zu ähnlich.

Hintergrundfarbwert #f4a460				Schriftfarbe darkorchid
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 Farbe darkorchid

Wechsel der Umrandung bei Hover mit Befehl h1

Mit HTML-Befehl <h1> setzen Sie eine Überschrift und kann hervorgehoben und farblich gestaltet werden.

Die Rahmenfarbe soll sich von Farbwert #f4a460 auf Farbe darkorchid ändern, wenn man mit der Maus auf <h1> zeigt. Bereiten wir zunächst eine Darstellung von <h1> in Farbwert #f4a460 vor.

In diesem Beispiel umranden wir <h1> mit einem 3 Pixel dicken, herausstehenden Rahmen in Farbwert #f4a460.

<style type="text/css"><!--
  h1 { border:3px outset #f4a460; }
//-->
</style>

Nun fordern wir, dass sich bei Hover die Rahmenfarbe auf darkorchid ändert.

<style type="text/css"><!--
  h1:hover { 
    border-color:darkorchid;
  }
//-->
</style>

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

Zebra-Effekt von HTML-Tag tr

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

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

Diese CSS-Klassen werden abwechselnd angewendet.

<table>
<tr class="ungerade"><td>Ja.a</td><td>Jb.a</td><td>Jc.a</td></tr>
<tr class="gerade"><td>Ja.b</td><td>Jb.b</td><td>Jc.b</td></tr>
<tr class="ungerade"><td>Ja.c</td><td>Jb.c</td><td>Jc.c</td></tr>
</table>

Mehr zum Thema tr können Sie in Tabellen in HTML lesen. Möglichkeiten vom Befehl tr sind in der HTML Referenz unter <tr> gezeigt.