Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #8a2be2 und Farbwert #7fff00

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 #8a2be2			Schriftfarbwert #7fff00
Detail	:	Hintergrund #8a2be2	Detail	:	Schrift #7fff00
Farbwert	:	#8a2be2	Farbwert	:	#7fff00
Farbe	:	blueviolet	Farbe	:	chartreuse
HTML	:	#8a2be2	HTML	:	#7fff00
HTML (Wert)	:	#8a2be2	HTML (Wert)	:	#7fff00
CSS	:	#8a2be2	CSS	:	#7fff00
CSS (Wert)	:	#8a2be2	CSS (Wert)	:	#7fff00
CSS (kürzest)	:	#8a2be2	CSS (kürzest)	:	#7fff00
CSS (RGB)	:	rgb(138,43,226)	CSS (RGB)	:	rgb(127,255,0)
CSS (%RGB)	:	rgb(54%,16%,88%)	CSS (%RGB)	:	rgb(49%,100%,0%)

Verlauf Hintergrundfarbwert #8a2be2 nach Schriftfarbwert #7fff00
#8a2be2	#8849c1	#8667a1	#858581	#83a460	#82c240	#80e020	#7fff00
#8a2be2	#8849c1	#8667a1	#858581	#83a460	#82c240	#80e020	#7fff00

Kombination von #8a2be2 und #7fff00
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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in.				#7fff00 eignet sich nicht als Schriftfarbe auf Hintergrund #8a2be2, weil die Helligkeit und Farben zu ähnlich sind. Die Ähnlichkeit von #7fff00 und #8a2be2 beträgt 78.10%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 21.90%.

Hintergrundfarbwert #8a2be2				Schriftfarbwert #7fff00
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#8a2be2	#8a2be2	#8a2be2	#8a2be2	#7fff00	#7fff00	#7fff00	#7fff00
#9a49e6	#9a49e6	#7624c1	#7624c1	#91ff24	#91ff24	#6cda00	#6cda00
#ab67ea	#ab67ea	#621ea1	#621ea1	#a3ff48	#a3ff48	#5ab600	#5ab600
#bc85ee	#bc85ee	#4e1881	#4e1881	#b5ff6d	#b5ff6d	#489100	#489100
#cca4f2	#cca4f2	#3b1260	#3b1260	#c8ff91	#c8ff91	#366d00	#366d00
#ddc2f6	#ddc2f6	#270c40	#270c40	#daffb6	#daffb6	#244800	#244800
#eee0fa	#eee0fa	#130620	#130620	#ecffda	#ecffda	#122400	#122400
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #8a2be2 und Farbwert #7fff00

Wechsel der Textfarbe bei Hover von HTML-Tag var

Die Textfarbe soll sich von Farbwert #8a2be2 auf Farbwert #7fff00 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Darstellung von <var> in Farbwert #8a2be2 vor.

Für dieses Beispiel ändern wir die Textfarbe von <var> auf Farbwert #8a2be2. Die Hintergrundfarbe behalten wir bei, ändern jedoch die Schriftart auf verdana:

<style type="text/css"><!--
  var { 
    font-family:verdana; 
    color:#8a2be2;
  }
//-->
</style>

Jetzt fordern wir, dass bei Hover die Textfarbe auf #7fff00 gesetzt wird.

<style type="text/css"><!--
  var:hover { 
    color:#7fff00;
  }
//-->
</style>

Weiteres zu var können Sie in Text in HTML erfahren. Einzelheiten des Befehl var lesen Sie in der HTML Referenz unter <var>.

Zebra-Effekt von HTML-Befehl tr

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, redet man vom so genannten Zebra-Effekt. Dieser Effekt unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ger und .ung für <tr> mit unterschiedlichen Hintergrundfarben Farbwert #8a2be2 und Farbwert #7fff00.

<style type="text/css"><!--
  tr.ger { 
    background-color: #8a2be2;
  }
  tr.ung { 
    background-color:#7fff00;
  }
//-->
</style>

Diese Klassen werden dann abwechselnd genutzt.

<table>
<tr class="ger"><td>P1:1</td><td>P2:1</td><td>P3:1</td></tr>
<tr class="ung"><td>P1:2</td><td>P2:2</td><td>P3:2</td></tr>
<tr class="ger"><td>P1:3</td><td>P2:3</td><td>P3:3</td></tr>
</table>

Weiteres zum Thema tr finden Sie in Tabellen in HTML. Weiteres zum Tag tr ist in der HTML Referenz unter <tr> ausführlich beschrieben.