Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #ba55d3 und Farbwert #ffa500

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 #ba55d3			Schriftfarbwert #ffa500
Detail	:	Hintergrund #ba55d3	Detail	:	Schrift #ffa500
Farbwert	:	#ba55d3	Farbwert	:	#ffa500
Farbe	:	mediumorchid	Farbe	:	orange
HTML	:	#ba55d3	HTML	:	#ffa500
HTML (Wert)	:	#ba55d3	HTML (Wert)	:	#ffa500
CSS	:	#ba55d3	CSS	:	#ffa500
CSS (Wert)	:	#ba55d3	CSS (Wert)	:	#ffa500
CSS (kürzest)	:	#ba55d3	CSS (kürzest)	:	#ffa500
CSS (RGB)	:	rgb(186,85,211)	CSS (RGB)	:	rgb(255,165,0)
CSS (%RGB)	:	rgb(72%,33%,82%)	CSS (%RGB)	:	rgb(100%,64%,0%)

Verlauf Hintergrundfarbwert #ba55d3 nach Schriftfarbwert #ffa500
#ba55d3	#c360b4	#cd6b96	#d77778	#e1825a	#eb8e3c	#f5991e	#ffa500
#ba55d3	#c360b4	#cd6b96	#d77778	#e1825a	#eb8e3c	#f5991e	#ffa500

Kombination von #ba55d3 und #ffa500
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit von #ffa500 und #ba55d3 ergibt sich zu 90.50%. Die Lesbarkeit dieser Farbkombination liegt damit bei 9.50%. Auf Hintergrund #ba55d3 ist #ffa500 ungeeignet. Die Helligkeit und Farben sind zu ähnlich.

Hintergrundfarbwert #ba55d3				Schriftfarbwert #ffa500
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ba55d3	#ba55d3	#ba55d3	#ba55d3	#ffa500	#ffa500	#ffa500	#ffa500
#c36dd9	#c36dd9	#9f48b4	#9f48b4	#ffb124	#ffb124	#da8d00	#da8d00
#cd85df	#cd85df	#843c96	#843c96	#ffbe48	#ffbe48	#b67500	#b67500
#d79de5	#d79de5	#6a3078	#6a3078	#ffcb6d	#ffcb6d	#915e00	#915e00
#e1b6ec	#e1b6ec	#4f245a	#4f245a	#ffd891	#ffd891	#6d4600	#6d4600
#ebcef2	#ebcef2	#35183c	#35183c	#ffe5b6	#ffe5b6	#482f00	#482f00
#f5e6f8	#f5e6f8	#1a0c1e	#1a0c1e	#fff2da	#fff2da	#241700	#241700
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #ba55d3 und Farbwert #ffa500

Zebra-Effekt von Tag th

Man redet vom Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Dieser Effekt unterstützt das Auge zum Beispiel die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ung und .ger für <th> mit unterschiedlichen Hintergrundfarben Farbwert #ba55d3 und Farbwert #ffa500.

<style type="text/css"><!--
  th.ung { 
    background-color: #ba55d3;
  }
  th.ger { 
    background-color:#ffa500;
  }
//-->
</style>

Diese werden abwechselnd angewendet.

<table>
<tr><td class="ung">FA~A</td><td class="ger">FB~A</td><td class="ung">FC~A</td></tr>
<tr><td class="ung">FA~B</td><td class="ger">FB~B</td><td class="ung">FC~B</td></tr>
<tr><td class="ung">FA~C</td><td class="ger">FB~C</td><td class="ung">FC~C</td></tr>
</table>

Mehr zum Thema können Sie in Tabellen in HTML nachlesen. Weiteres zum Tag th ist in der HTML Referenz bei <th> beschrieben.

Wechsel der Umrandung bei Hover von HTML-Befehl iframe

Die Rahmenfarbe soll sich von Farbwert #ba55d3 auf Farbwert #ffa500 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Formatierung von <iframe> in Farbwert #ba55d3 vor.

In diesem Beispiel umranden wir <iframe> mit einem 5 Pixel dicken, herausstehenden Rahmen in Farbwert #ba55d3.

<style type="text/css"><!--
  iframe { border:5px outset #ba55d3; }
//-->
</style>

Jetzt stellen wir ein, dass bei Berührung mit der Maus die Rahmenfarbe auf #ffa500 gesetzt wird.

<style type="text/css"><!--
  iframe:hover { 
    border-color:#ffa500;
  }
//-->
</style>

Einzelheiten des HTML-Tag iframe sind in der HTML Referenz unter <iframe> ausführlich gezeigt.