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

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			Schriftfarbwert #708090
Detail	:	Hintergrund #40e0d0	Detail	:	Schrift #708090
Farbwert	:	#40e0d0	Farbwert	:	#708090
Farbe	:	turquoise	Farbe	:	slategray
HTML	:	#40e0d0	HTML	:	#708090
HTML (Wert)	:	#40e0d0	HTML (Wert)	:	#708090
CSS	:	#40e0d0	CSS	:	#708090
CSS (Wert)	:	#40e0d0	CSS (Wert)	:	#708090
CSS (kürzest)	:	#40e0d0	CSS (kürzest)	:	#708090
CSS (RGB)	:	rgb(64,224,208)	CSS (RGB)	:	rgb(112,128,144)
CSS (%RGB)	:	rgb(25%,87%,81%)	CSS (%RGB)	:	rgb(43%,50%,56%)

Verlauf Hintergrundfarbwert #40e0d0 nach Schriftfarbwert #708090
#40e0d0	#46d2c6	#4dc4bd	#54b6b4	#5ba9ab	#629ba2	#698d99	#708090
#40e0d0	#46d2c6	#4dc4bd	#54b6b4	#5ba9ab	#629ba2	#698d99	#708090

Kombination von #40e0d0 und #708090
Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				#708090 eignet sich nicht als Schriftfarbe auf Hintergrund #40e0d0. Weder der Helligkeitsunterschied noch der Farbunterschied sind geeignet. Die Ähnlichkeit der Farben #708090 und #40e0d0 ergibt sich zu 88.24%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 11.76%.

Hintergrundfarbwert #40e0d0				Schriftfarbwert #708090
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#40e0d0	#40e0d0	#40e0d0	#40e0d0	#708090	#708090	#708090	#708090
#5be4d6	#5be4d6	#36c0b2	#36c0b2	#84929f	#84929f	#606d7b	#606d7b
#76e8dd	#76e8dd	#2da094	#2da094	#98a4af	#98a4af	#505b66	#505b66
#91ede4	#91ede4	#248076	#248076	#adb6bf	#adb6bf	#404952	#404952
#adf1ea	#adf1ea	#1b6059	#1b6059	#c1c8cf	#c1c8cf	#30363d	#30363d
#c8f6f1	#c8f6f1	#12403b	#12403b	#d6dadf	#d6dadf	#202429	#202429
#e3faf8	#e3faf8	#09201d	#09201d	#eaecef	#eaecef	#101214	#101214
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #40e0d0 und Farbwert #708090

Zebra-Effekt mit Tag th

Man redet vom so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Dieser Effekt unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ung und .ger für <th> mit unterschiedlichen Hintergrundfarben Farbwert #40e0d0 und Farbwert #708090.

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

Diese Klassen werden dann abwechselnd verwendet.

<table>
<tr><td class="ung">S1:1</td><td class="ger">S2:1</td><td class="ung">S3:1</td></tr>
<tr><td class="ung">S1:2</td><td class="ger">S2:2</td><td class="ung">S3:2</td></tr>
<tr><td class="ung">S1:3</td><td class="ger">S2:3</td><td class="ung">S3:3</td></tr>
</table>

Mehr zum Thema lesen Sie in Tabellen in HTML. Mehr zum Tag <th>.

Wechsel der Hintergrundfarbe bei Hover von HTML-Tag h1

Eine Überschrift wird mit HTML-Befehl <h1> gesetzt. Diese kann hervorgehoben und farblich gestaltet werden.

Die Hintergrundfarbe soll sich von Farbwert #40e0d0 auf Farbwert #708090 ändern, wenn man mit der Maus auf <h1> zeigt. Wir bereiten zunächst die Darstellung von <h1> in Farbwert #40e0d0 vor.

Wir legen z.B. Farbwert #40e0d0 als Hintergrundfarbe von <h1> fest. Die Textfarbe verändern wir nicht, ändern jedoch die Schriftart auf monospace:

<style type="text/css"><!--
  h1 { 
    background-color: #40e0d0; 
    font-family: monospace;
  }
//-->
</style>

Jetzt stellen wir ein, dass bei Hover die Hintergrundfarbe auf #708090 gesetzt wird.

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

Weiteres zu h1 lesen Sie in Grundlegende Gestaltungselemente in HTML. Beschreibung vom HTML-Tag <h1>.