Ressourcen: 120 HTML Farbnamen - Kombination von Farbe springgreen und Farbe darkgreen

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.

Hintergrundfarbe springgreen			Schriftfarbe darkgreen
Detail	:	Hintergrund springgreen	Detail	:	Schrift darkgreen
Farbe	:	springgreen	Farbe	:	darkgreen
Farbwert	:	#00ff7f	Farbwert	:	#006400
HTML	:	springgreen	HTML	:	darkgreen
HTML (Wert)	:	#00ff7f	HTML (Wert)	:	#006400
CSS	:	springgreen	CSS	:	darkgreen
CSS (Wert)	:	#00ff7f	CSS (Wert)	:	#006400
CSS (kürzest)	:	#00ff7f	CSS (kürzest)	:	#006400
CSS (RGB)	:	rgb(0,255,127)	CSS (RGB)	:	rgb(0,100,0)
CSS (%RGB)	:	rgb(0%,100%,49%)	CSS (%RGB)	:	rgb(0%,39%,0%)

Verlauf Hintergrundfarbe springgreen nach Schriftfarbe darkgreen
#00ff7f	#00e86c	#00d25a	#00bc48	#00a636	#009024	#007a12	#006400
#00ff7f	#00e86c	#00d25a	#00bc48	#00a636	#009024	#007a12	#006400

Kombination von springgreen und darkgreen
Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in. 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				darkgreen ist nicht als Schriftfarbe auf Hintergrund springgreen geeignet. Die Unterschiede in der Helligkeit und Farbe sind nicht ausreichend. Die Ähnlichkeit von darkgreen und springgreen beträgt 73.67%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 26.33%.

Hintergrundfarbe springgreen				Schriftfarbe darkgreen
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#00ff7f	#00ff7f	#00ff7f	#00ff7f	#006400	#006400	#006400	#006400
#24ff91	#24ff91	#00da6c	#00da6c	#247a24	#247a24	#005500	#005500
#48ffa3	#48ffa3	#00b65a	#00b65a	#489048	#489048	#004700	#004700
#6dffb5	#6dffb5	#009148	#009148	#6da66d	#6da66d	#003900	#003900
#91ffc8	#91ffc8	#006d36	#006d36	#91bc91	#91bc91	#002a00	#002a00
#b6ffda	#b6ffda	#004824	#004824	#b6d2b6	#b6d2b6	#001c00	#001c00
#daffec	#daffec	#002412	#002412	#dae8da	#dae8da	#000e00	#000e00
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe springgreen und Farbe darkgreen

Zebra-Effekt mit Tag tr

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, spricht man vom so genannten Zebra-Effekt. Er unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ying und .yang für <tr> mit unterschiedlichen Hintergrundfarben Farbe springgreen und Farbe darkgreen.

<style type="text/css"><!--
  tr.ying { 
    background-color: springgreen;
  }
  tr.yang { 
    background-color: darkgreen;
  }
//-->
</style>

Diese werden dann abwechselnd angewendet.

<table>
<tr class="ying"><td>JA.A</td><td>JB.A</td><td>JC.A</td></tr>
<tr class="yang"><td>JA.B</td><td>JB.B</td><td>JC.B</td></tr>
<tr class="ying"><td>JA.C</td><td>JB.C</td><td>JC.C</td></tr>
</table>

Mehr zu tr können Sie in Tabellen in HTML erfahren. Weiteres zum hier genutzten HTML-Tag tr lesen Sie in der HTML Referenz unter <tr>.

Wechsel der Hintergrundfarbe bei Hover von HTML-Tag tbody

Die Hintergrundfarbe soll sich von Farbe springgreen auf Farbe darkgreen ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <tbody> in Farbe springgreen vor.

Für dieses Beispiel ändern wir bei <tbody> die Hintergrundfarbe auf Farbe springgreen. Die Textfarbe lassen wir unverändert, setzen jedoch die Schriftart auf sans-serif.

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

Nun fordern wir, dass bei Hover die Hintergrundfarbe auf darkgreen gesetzt wird.

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

Mehr zum Thema tbody lesen Sie in Tabellen in HTML. Weiteres zum hier verwendeten HTML-Tag tbody ist in der HTML Referenz unter <tbody> genau beschrieben.