Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #40e0d0 und Farbe palegreen

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 #40e0d0			Schriftfarbe palegreen
Detail	:	Hintergrund #40e0d0	Detail	:	Schrift palegreen
Farbwert	:	#40e0d0	Farbe	:	palegreen
Farbe	:	turquoise	Farbwert	:	#98fb98
HTML	:	#40e0d0	HTML	:	palegreen
HTML (Wert)	:	#40e0d0	HTML (Wert)	:	#98fb98
CSS	:	#40e0d0	CSS	:	palegreen
CSS (Wert)	:	#40e0d0	CSS (Wert)	:	#98fb98
CSS (kürzest)	:	#40e0d0	CSS (kürzest)	:	#98fb98
CSS (RGB)	:	rgb(64,224,208)	CSS (RGB)	:	rgb(152,251,152)
CSS (%RGB)	:	rgb(25%,87%,81%)	CSS (%RGB)	:	rgb(59%,98%,59%)

Verlauf Hintergrundfarbwert #40e0d0 nach Schriftfarbe palegreen
#40e0d0	#4ce3c8	#59e7c0	#65ebb8	#72efb0	#7ef3a8	#8bf7a0	#98fb98
#40e0d0	#4ce3c8	#59e7c0	#65ebb8	#72efb0	#7ef3a8	#8bf7a0	#98fb98

Kombination von #40e0d0 und palegreen
Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Die Ähnlichkeit von palegreen und #40e0d0 beträgt 93.82%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 6.18%. palegreen ist nicht als Schriftfarbe auf Hintergrund #40e0d0 geeignet, weil weder der Helligkeitsunterschied noch der Farbunterschied gross genug sind.

Hintergrundfarbwert #40e0d0				Schriftfarbe palegreen
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#40e0d0	#40e0d0	#40e0d0	#40e0d0	#98fb98	#98fb98	#98fb98	#98fb98
#5be4d6	#5be4d6	#36c0b2	#36c0b2	#a6fba6	#a6fba6	#82d782	#82d782
#76e8dd	#76e8dd	#2da094	#2da094	#b5fcb5	#b5fcb5	#6cb36c	#6cb36c
#91ede4	#91ede4	#248076	#248076	#c4fcc4	#c4fcc4	#568f56	#568f56
#adf1ea	#adf1ea	#1b6059	#1b6059	#d2fdd2	#d2fdd2	#416b41	#416b41
#c8f6f1	#c8f6f1	#12403b	#12403b	#e1fde1	#e1fde1	#2b472b	#2b472b
#e3faf8	#e3faf8	#09201d	#09201d	#f0fef0	#f0fef0	#152315	#152315
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #40e0d0 und Farbe palegreen

Wechsel der Hintergrundfarbe bei Hover mit Tag tfoot

Die Hintergrundfarbe soll sich von Farbwert #40e0d0 auf Farbe palegreen ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Formatierung von <tfoot> in Farbwert #40e0d0 vor.

Wir legen z.B. Farbwert #40e0d0 als Hintergrundfarbe von <tfoot> fest. Die Schriftgröße verringern wir auf 97%.

<style type="text/css"><!--
  tfoot { 
    font-size: 97%; 
    background-color: #40e0d0;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Hover die Hintergrundfarbe zu palegreen ändert.

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

Mehr zu tfoot finden Sie in Tabellen in HTML. Einzelheiten des hier genutzten Tag <tfoot>.

Zebra-Effekt von Tag td

Man redet von einem 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 .ung und .ger für <td> mit den Hintergrundfarben Farbwert #40e0d0 und Farbe palegreen.

<style type="text/css"><!--
  td.ung { 
    background-color:#40e0d0;
  }
  td.ger { 
    background-color:palegreen;
  }
//-->
</style>

Diese Klassen werden abwechselnd verwendet.

<table>
<tr><td class="ung">C1-1</td><td class="ger">C2-1</td><td class="ung">C3-1</td></tr>
<tr><td class="ung">C1-2</td><td class="ger">C2-2</td><td class="ung">C3-2</td></tr>
<tr><td class="ung">C1-3</td><td class="ger">C2-3</td><td class="ung">C3-3</td></tr>
</table>

Weiteres zum Thema können Sie in Tabellen in HTML finden. Weiteres zum hier gezeigten Befehl td finden Sie in der HTML Referenz unter <td>.