Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #00ff7f und Farbwert #40e0d0

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 #00ff7f			Schriftfarbwert #40e0d0
Detail	:	Hintergrund #00ff7f	Detail	:	Schrift #40e0d0
Farbwert	:	#00ff7f	Farbwert	:	#40e0d0
Farbe	:	springgreen	Farbe	:	turquoise
HTML	:	#00ff7f	HTML	:	#40e0d0
HTML (Wert)	:	#00ff7f	HTML (Wert)	:	#40e0d0
CSS	:	#00ff7f	CSS	:	#40e0d0
CSS (Wert)	:	#00ff7f	CSS (Wert)	:	#40e0d0
CSS (kürzest)	:	#00ff7f	CSS (kürzest)	:	#40e0d0
CSS (RGB)	:	rgb(0,255,127)	CSS (RGB)	:	rgb(64,224,208)
CSS (%RGB)	:	rgb(0%,100%,49%)	CSS (%RGB)	:	rgb(25%,87%,81%)

Verlauf Hintergrundfarbwert #00ff7f nach Schriftfarbwert #40e0d0
#00ff7f	#09fa8a	#12f696	#1bf1a1	#24edad	#2de8b8	#36e4c4	#40e0d0
#00ff7f	#09fa8a	#12f696	#1bf1a1	#24edad	#2de8b8	#36e4c4	#40e0d0

Kombination von #00ff7f und #40e0d0
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.				#40e0d0 eignet sich nicht als Schriftfarbe auf Hintergrund #00ff7f, da sowohl Helligkeit als auch die Farben zu ähnlich sind. Die Ähnlichkeit der Farben #40e0d0 und #00ff7f ergibt sich zu 94.19%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 5.81%.

Hintergrundfarbwert #00ff7f				Schriftfarbwert #40e0d0
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#00ff7f	#00ff7f	#00ff7f	#00ff7f	#40e0d0	#40e0d0	#40e0d0	#40e0d0
#24ff91	#24ff91	#00da6c	#00da6c	#5be4d6	#5be4d6	#36c0b2	#36c0b2
#48ffa3	#48ffa3	#00b65a	#00b65a	#76e8dd	#76e8dd	#2da094	#2da094
#6dffb5	#6dffb5	#009148	#009148	#91ede4	#91ede4	#248076	#248076
#91ffc8	#91ffc8	#006d36	#006d36	#adf1ea	#adf1ea	#1b6059	#1b6059
#b6ffda	#b6ffda	#004824	#004824	#c8f6f1	#c8f6f1	#12403b	#12403b
#daffec	#daffec	#002412	#002412	#e3faf8	#e3faf8	#09201d	#09201d
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #00ff7f und Farbwert #40e0d0

Wechsel der Umrandung bei Hover bei Befehl dfn

Die Rahmenfarbe soll sich von Farbwert #00ff7f auf Farbwert #40e0d0 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Darstellung von <dfn> in Farbwert #00ff7f vor.

In diesem Beispiel umranden wir <dfn> mit einem 2 Pixel dicken, einfallenden Rahmen in Farbwert #00ff7f.

<style type="text/css"><!--
  dfn { 
    border-style: inset; 
    border-width: 2px; 
    border-color: #00ff7f;
  }
//-->
</style>

Nun fordern wir, dass bei Mausberührung die Rahmenfarbe auf #40e0d0 gesetzt wird.

<style type="text/css"><!--
  dfn: hover { 
    border-color: #40e0d0;
  }
//-->
</style>

Mehr zu dfn erfahren Sie in Text in HTML. Einzelheiten vom HTML-Tag <dfn>.

Zebra-Effekt bei Tag th

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, redet man von einem so genannten Zebra-Effekt. Er unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .gerade und .ungerade für <th> mit unterschiedlichen Hintergrundfarben Farbwert #00ff7f und Farbwert #40e0d0.

<style type="text/css"><!--
  th.gerade { 
    background-color:#00ff7f;
  }
  th.ungerade { 
    background-color: #40e0d0;
  }
//-->
</style>

Diese CSS-Klassen werden dann abwechselnd verwendet.

<table>
<tr><td class="gerade">Ya,a</td><td class="ungerade">Yb,a</td><td class="gerade">Yc,a</td></tr>
<tr><td class="gerade">Ya,b</td><td class="ungerade">Yb,b</td><td class="gerade">Yc,b</td></tr>
<tr><td class="gerade">Ya,c</td><td class="ungerade">Yb,c</td><td class="gerade">Yc,c</td></tr>
</table>

Weiteres zu th können Sie in Tabellen in HTML nachlesen. Weiteres zum Befehl th finden Sie in der HTML Referenz unter <th>.