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

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 #a9a9a9
Detail	:	Hintergrund #8a2be2	Detail	:	Schrift #a9a9a9
Farbwert	:	#8a2be2	Farbwert	:	#a9a9a9
Farbe	:	blueviolet	Farbe	:	darkgray
HTML	:	#8a2be2	HTML	:	#a9a9a9
HTML (Wert)	:	#8a2be2	HTML (Wert)	:	#a9a9a9
CSS	:	#8a2be2	CSS	:	#a9a9a9
CSS (Wert)	:	#8a2be2	CSS (Wert)	:	#a9a9a9
CSS (kürzest)	:	#8a2be2	CSS (kürzest)	:	#a9a9a9
CSS (RGB)	:	rgb(138,43,226)	CSS (RGB)	:	rgb(169,169,169)
CSS (%RGB)	:	rgb(54%,16%,88%)	CSS (%RGB)	:	rgb(66%,66%,66%)

Verlauf Hintergrundfarbwert #8a2be2 nach Schriftfarbwert #a9a9a9
#8a2be2	#8e3dd9	#924fd1	#9761c9	#9b73c1	#a085b9	#a497b1	#a9a9a9
#8a2be2	#8e3dd9	#924fd1	#9761c9	#9b73c1	#a085b9	#a497b1	#a9a9a9

Kombination von #8a2be2 und #a9a9a9
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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante.				#a9a9a9 ist nicht als Schriftfarbe auf Hintergrund #8a2be2 geeignet, da die Helligkeit und Farben zu ähnlich sind. Die Ähnlichkeit der Farben #a9a9a9 und #8a2be2 beträgt 87.93%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 12.07%.

Hintergrundfarbwert #8a2be2				Schriftfarbwert #a9a9a9
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#8a2be2	#8a2be2	#8a2be2	#8a2be2	#a9a9a9	#a9a9a9	#a9a9a9	#a9a9a9
#9a49e6	#9a49e6	#7624c1	#7624c1	#b5b5b5	#b5b5b5	#909090	#909090
#ab67ea	#ab67ea	#621ea1	#621ea1	#c1c1c1	#c1c1c1	#787878	#787878
#bc85ee	#bc85ee	#4e1881	#4e1881	#cdcdcd	#cdcdcd	#606060	#606060
#cca4f2	#cca4f2	#3b1260	#3b1260	#dadada	#dadada	#484848	#484848
#ddc2f6	#ddc2f6	#270c40	#270c40	#e6e6e6	#e6e6e6	#303030	#303030
#eee0fa	#eee0fa	#130620	#130620	#f2f2f2	#f2f2f2	#181818	#181818
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #8a2be2 und Farbwert #a9a9a9

Zebra-Effekt von HTML-Tag td

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, spricht man vom so genannten Zebra-Effekt. Er unterstützt das Auge zum Beispiel die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .odd und .even für <td> mit den Hintergrundfarben Farbwert #8a2be2 und Farbwert #a9a9a9.

<style type="text/css"><!--
  td.odd { 
    background-color:#8a2be2;
  }
  td.even { 
    background-color:#a9a9a9;
  }
//-->
</style>

Diese Klassen werden abwechselnd genutzt.

<table>
<tr><td class="odd">S1:1</td><td class="even">S2:1</td><td class="odd">S3:1</td></tr>
<tr><td class="odd">S1:2</td><td class="even">S2:2</td><td class="odd">S3:2</td></tr>
<tr><td class="odd">S1:3</td><td class="even">S2:3</td><td class="odd">S3:3</td></tr>
</table>

Mehr zum Thema erfahren Sie in Tabellen in HTML. Die Beschreibung vom hier gezeigten Tag td erfahren Sie in der HTML Referenz unter <td>.

Wechsel der Textfarbe bei Hover mit Befehl div

Einen Universalkontainer setzt man mit Befehl <div>. Dieser kann hervorgehoben und farblich gestaltet werden.

Die Textfarbe soll sich von Farbwert #8a2be2 auf Farbwert #a9a9a9 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Darstellung von <div> in Farbwert #8a2be2 vor.

Wir legen hier bei <div> die Textfarbe auf Farbwert #8a2be2 fest. Zwar behalten wir die Hintergrundfarbe bei, setzen jedoch die Schriftart auf arial. Die Größe der Schrift ändern wir auf 9pt:

<style type="text/css"><!--
  div { 
    font-family: arial; 
    font-size: 9pt; 
    color: #8a2be2;
  }
//-->
</style>

Jetzt fordern wir, dass bei Berührung mit der Maus die Textfarbe auf #a9a9a9 geändert wird.

<style type="text/css"><!--
  div: hover { 
    color: #a9a9a9;
  }
//-->
</style>

Einzelheiten des Befehl <div>.