Ressourcen: 137 HTML Farbnamen - Kombination von Farbe purple und Farbwert #32cd32

Netscape führte seinerzeit die websicheren Farben ein. Neben diesen, einem bestimmten Schema folgenden, Farbwerten, definierte man noch 120 Werte und ordnete ihnen Namen zu. Zusammen mit den 17 Standard-HTML-Farben, die ebenfalls Namen haben, ergeben sich so 137 HTML Farbnamen.

Hintergrundfarbe purple			Schriftfarbwert #32cd32
Detail	:	Hintergrund purple	Detail	:	Schrift #32cd32
Farbe	:	purple	Farbwert	:	#32cd32
Farbwert	:	#800080	Farbe	:	limegreen
HTML	:	purple	HTML	:	#32cd32
HTML (Wert)	:	#800080	HTML (Wert)	:	#32cd32
CSS	:	purple	CSS	:	#32cd32
CSS (Wert)	:	#800080	CSS (Wert)	:	#32cd32
CSS (kürzest)	:	#800080	CSS (kürzest)	:	#32cd32
CSS (RGB)	:	rgb(128,0,128)	CSS (RGB)	:	rgb(50,205,50)
CSS (%RGB)	:	rgb(50%,0%,50%)	CSS (%RGB)	:	rgb(19%,80%,19%)

Verlauf Hintergrundfarbe purple nach Schriftfarbwert #32cd32
#800080	#741d74	#693a69	#5e575e	#537553	#489248	#3daf3d	#32cd32
#800080	#741d74	#693a69	#5e575e	#537553	#489248	#3daf3d	#32cd32

Kombination von purple und #32cd32
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Cras vestibulum tristique erat, ac interdum justo cursus in.				#32cd32 ist nicht als Schriftfarbe auf Hintergrund purple geeignet, weil die Helligkeit und Farben zu ähnlich sind. Die Ähnlichkeit von #32cd32 und purple ergibt sich zu 78.83%. Die Lesbarkeit dieser Kombination ergibt sich zu 21.17%.

Hintergrundfarbe purple				Schriftfarbwert #32cd32
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#800080	#800080	#800080	#800080	#32cd32	#32cd32	#32cd32	#32cd32
#922492	#922492	#6d006d	#6d006d	#4fd44f	#4fd44f	#2aaf2a	#2aaf2a
#a448a4	#a448a4	#5b005b	#5b005b	#6cdb6c	#6cdb6c	#239223	#239223
#b66db6	#b66db6	#490049	#490049	#89e289	#89e289	#1c751c	#1c751c
#c891c8	#c891c8	#360036	#360036	#a7e9a7	#a7e9a7	#155715	#155715
#dab6da	#dab6da	#240024	#240024	#c4f0c4	#c4f0c4	#0e3a0e	#0e3a0e
#ecdaec	#ecdaec	#120012	#120012	#e1f7e1	#e1f7e1	#071d07	#071d07
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe purple und Farbwert #32cd32

Wechsel der Textfarbe bei Hover bei HTML-Befehl h6

Eine Überschrift der 6. Stufe erzeugt man mit HTML-Befehl <h6>. Sie kann hervorgehoben und farblich gestaltet werden.

Die Textfarbe soll sich von Farbe purple auf Farbwert #32cd32 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Formatierung von <h6> in Farbe purple vor.

Wir legen z.B. Farbe purple als Textfarbe von <h6> fest. Die Hintergrundfarbe behalten wir bei. Die Schriftart ändern wir auf sans-serif.

<style type="text/css"><!--
  h6 { 
    color: purple; 
    font-family: sans-serif;
  }
//-->
</style>

Jetzt fordern wir, dass bei Mausberührung die Textfarbe auf #32cd32 geändert wird.

<style type="text/css"><!--
  h6: hover { 
    color: #32cd32;
  }
//-->
</style>

Weiteres zu h6 können Sie in Grundlegende Gestaltungselemente in HTML erfahren. Einzelheiten des HTML-Tag h6 sind in der HTML Referenz bei <h6> zusammengestellt.

Zebra-Effekt mit Tag th

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, redet man vom so genannten Zebra-Effekt. Dieser Effekt unterstützt das Auge zum Beispiel die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .yang und .ying für <th> mit den Hintergrundfarben Farbe purple und Farbwert #32cd32.

<style type="text/css"><!--
  th.yang { 
    background-color:purple;
  }
  th.ying { 
    background-color: #32cd32;
  }
//-->
</style>

Diese CSS-Klassen werden abwechselnd verwendet.

<table>
<tr><td class="yang">M1,1</td><td class="ying">M2,1</td><td class="yang">M3,1</td></tr>
<tr><td class="yang">M1,2</td><td class="ying">M2,2</td><td class="yang">M3,2</td></tr>
<tr><td class="yang">M1,3</td><td class="ying">M2,3</td><td class="yang">M3,3</td></tr>
</table>

Mehr zum Thema lesen Sie in Tabellen in HTML. Weiteres zum hier verwendeten HTML-Befehl th finden Sie in der HTML Referenz unter <th>.