Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #8a2be2 und Farbe palegreen

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			Schriftfarbe palegreen
Detail	:	Hintergrund #8a2be2	Detail	:	Schrift palegreen
Farbwert	:	#8a2be2	Farbe	:	palegreen
Farbe	:	blueviolet	Farbwert	:	#98fb98
HTML	:	#8a2be2	HTML	:	palegreen
HTML (Wert)	:	#8a2be2	HTML (Wert)	:	#98fb98
CSS	:	#8a2be2	CSS	:	palegreen
CSS (Wert)	:	#8a2be2	CSS (Wert)	:	#98fb98
CSS (kürzest)	:	#8a2be2	CSS (kürzest)	:	#98fb98
CSS (RGB)	:	rgb(138,43,226)	CSS (RGB)	:	rgb(152,251,152)
CSS (%RGB)	:	rgb(54%,16%,88%)	CSS (%RGB)	:	rgb(59%,98%,59%)

Verlauf Hintergrundfarbwert #8a2be2 nach Schriftfarbe palegreen
#8a2be2	#8c48d7	#8e66cc	#9084c2	#92a1b7	#94bfad	#96dda2	#98fb98
#8a2be2	#8c48d7	#8e66cc	#9084c2	#92a1b7	#94bfad	#96dda2	#98fb98

Kombination von #8a2be2 und palegreen
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante.				palegreen eignet sich nicht als Schriftfarbe auf Hintergrund #8a2be2. Die Helligkeit und Farben sind zu ähnlich. Die Ähnlichkeit von palegreen und #8a2be2 ergibt sich zu 77.59%. Die Lesbarkeit dieser Farbkombination liegt damit bei 22.41%.

Hintergrundfarbwert #8a2be2				Schriftfarbe palegreen
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#8a2be2	#8a2be2	#8a2be2	#8a2be2	#98fb98	#98fb98	#98fb98	#98fb98
#9a49e6	#9a49e6	#7624c1	#7624c1	#a6fba6	#a6fba6	#82d782	#82d782
#ab67ea	#ab67ea	#621ea1	#621ea1	#b5fcb5	#b5fcb5	#6cb36c	#6cb36c
#bc85ee	#bc85ee	#4e1881	#4e1881	#c4fcc4	#c4fcc4	#568f56	#568f56
#cca4f2	#cca4f2	#3b1260	#3b1260	#d2fdd2	#d2fdd2	#416b41	#416b41
#ddc2f6	#ddc2f6	#270c40	#270c40	#e1fde1	#e1fde1	#2b472b	#2b472b
#eee0fa	#eee0fa	#130620	#130620	#f0fef0	#f0fef0	#152315	#152315
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #8a2be2 und Farbe palegreen

Wechsel der Hintergrundfarbe bei Hover mit Tag table

Die Hintergrundfarbe soll sich von Farbwert #8a2be2 auf Farbe palegreen ändern, wenn man mit der Maus auf <table> zeigt. Wir bereiten zunächst die Darstellung von <table> in Farbwert #8a2be2 vor.

Wir legen zum Beispiel Farbwert #8a2be2 als Hintergrundfarbe von <table> fest. Die Textfarbe lassen wir unverändert, setzen jedoch die Schriftart auf courier new.

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

Jetzt fordern wir, dass sich bei Mausberührung die Hintergrundfarbe zu palegreen ändert.

<style type="text/css"><!--
  table:hover { 
    background-color:palegreen;
  }
//-->
</style>

Weiteres zum Thema table finden Sie in Tabellen in HTML. Einzelheiten vom HTML-Tag table sind in der HTML Referenz bei <table> genau gezeigt.

Zebra-Effekt mit Tag td

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, redet man vom so genannten Zebra-Effekt. Der Effekt unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .gerade und .ungerade für <td> mit unterschiedlichen Hintergrundfarben Farbwert #8a2be2 und Farbe palegreen.

<style type="text/css"><!--
  td.gerade { 
    background-color:#8a2be2;
  }
  td.ungerade { 
    background-color:palegreen;
  }
//-->
</style>

Diese CSS-Klassen werden abwechselnd verwendet.

<table>
<tr><td class="gerade">QA:A</td><td class="ungerade">QB:A</td><td class="gerade">QC:A</td></tr>
<tr><td class="gerade">QA:B</td><td class="ungerade">QB:B</td><td class="gerade">QC:B</td></tr>
<tr><td class="gerade">QA:C</td><td class="ungerade">QB:C</td><td class="gerade">QC:C</td></tr>
</table>

Mehr zum Thema td lesen Sie in Tabellen in HTML. Weiteres zum hier genutzten HTML-Befehl td erfahren Sie in der HTML Referenz unter <td>.