Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #9400d3 und Farbwert #afeeee

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 #9400d3			Schriftfarbwert #afeeee
Detail	:	Hintergrund #9400d3	Detail	:	Schrift #afeeee
Farbwert	:	#9400d3	Farbwert	:	#afeeee
Farbe	:	darkviolet	Farbe	:	paleturquoise
HTML	:	#9400d3	HTML	:	#afeeee
HTML (Wert)	:	#9400d3	HTML (Wert)	:	#afeeee
CSS	:	#9400d3	CSS	:	#afeeee
CSS (Wert)	:	#9400d3	CSS (Wert)	:	#afeeee
CSS (kürzest)	:	#9400d3	CSS (kürzest)	:	#afeeee
CSS (RGB)	:	rgb(148,0,211)	CSS (RGB)	:	rgb(175,238,238)
CSS (%RGB)	:	rgb(58%,0%,82%)	CSS (%RGB)	:	rgb(68%,93%,93%)

Verlauf Hintergrundfarbwert #9400d3 nach Schriftfarbwert #afeeee
#9400d3	#9722d6	#9b44da	#9f66de	#a388e2	#a7aae6	#abccea	#afeeee
#9400d3	#9722d6	#9b44da	#9f66de	#a388e2	#a7aae6	#abccea	#afeeee

Kombination von #9400d3 und #afeeee
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. 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 #afeeee und #9400d3 beträgt 75.76%. Die Lesbarkeit dieser Kombination bewerte ich mit 24.24%. #afeeee eignet sich nicht als Schriftfarbe auf Hintergrund #9400d3, weil der Unterschied in den Farben zu gering ist

Hintergrundfarbwert #9400d3				Schriftfarbwert #afeeee
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#9400d3	#9400d3	#9400d3	#9400d3	#afeeee	#afeeee	#afeeee	#afeeee
#a324d9	#a324d9	#7e00b4	#7e00b4	#baf0f0	#baf0f0	#96cccc	#96cccc
#b248df	#b248df	#690096	#690096	#c5f2f2	#c5f2f2	#7daaaa	#7daaaa
#c16de5	#c16de5	#540078	#540078	#d1f5f5	#d1f5f5	#648888	#648888
#d191ec	#d191ec	#3f005a	#3f005a	#dcf7f7	#dcf7f7	#4b6666	#4b6666
#e0b6f2	#e0b6f2	#2a003c	#2a003c	#e8fafa	#e8fafa	#324444	#324444
#efdaf8	#efdaf8	#15001e	#15001e	#f3fcfc	#f3fcfc	#192222	#192222
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #9400d3 und Farbwert #afeeee

Zebra-Effekt bei HTML-Befehl td

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 .yang und .ying für <td> mit unterschiedlichen Hintergrundfarben Farbwert #9400d3 und Farbwert #afeeee.

<style type="text/css"><!--
  td.yang { 
    background-color: #9400d3;
  }
  td.ying { 
    background-color: #afeeee;
  }
//-->
</style>

Diese werden dann abwechselnd angewendet.

<table>
<tr><td class="yang">R1-1</td><td class="ying">R2-1</td><td class="yang">R3-1</td></tr>
<tr><td class="yang">R1-2</td><td class="ying">R2-2</td><td class="yang">R3-2</td></tr>
<tr><td class="yang">R1-3</td><td class="ying">R2-3</td><td class="yang">R3-3</td></tr>
</table>

Weiteres zu td erfahren Sie in Tabellen in HTML. Weiteres zum Befehl <td>.

Wechsel der Hintergrundfarbe bei Hover bei HTML-Befehl a

Mit HTML-Befehl <a> setzen Sie einen Verweis. Diesen kann man hervorheben und farblich gestalten.

Die Hintergrundfarbe soll sich von Farbwert #9400d3 auf Farbwert #afeeee ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Darstellung von <a> in Farbwert #9400d3 vor.

Wir ändern für dieses Beispiel die Hintergrundfarbe von <a> auf Farbwert #9400d3. Zwar behalten wir die Textfarbe bei, ändern jedoch die Schriftart auf arial. Die Größe der Schrift ändern wir auf 13px.

<style type="text/css"><!--
  a { 
    background-color: #9400d3; 
    font-family: arial; 
    font-size: 13px;
  }
//-->
</style>

Nun fordern wir, dass sich bei Berührung mit der Maus die Hintergrundfarbe auf #afeeee ändert.

<style type="text/css"><!--
  a:hover { 
    background-color:#afeeee;
  }
//-->
</style>

Weiteres zum Thema können Sie in Verweise und Protokolle in HTML finden. Weiteres zum hier gezeigten Tag a lesen Sie in der HTML Referenz unter <a>.