Ressourcen: 120 HTML Farbnamen - Kombination von Farbe mediumseagreen und Farbwert #5f9ea0

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 mediumseagreen			Schriftfarbwert #5f9ea0
Detail	:	Hintergrund mediumseagreen	Detail	:	Schrift #5f9ea0
Farbe	:	mediumseagreen	Farbwert	:	#5f9ea0
Farbwert	:	#3cb371	Farbe	:	cadetblue
HTML	:	mediumseagreen	HTML	:	#5f9ea0
HTML (Wert)	:	#3cb371	HTML (Wert)	:	#5f9ea0
CSS	:	mediumseagreen	CSS	:	#5f9ea0
CSS (Wert)	:	#3cb371	CSS (Wert)	:	#5f9ea0
CSS (kürzest)	:	#3cb371	CSS (kürzest)	:	#5f9ea0
CSS (RGB)	:	rgb(60,179,113)	CSS (RGB)	:	rgb(95,158,160)
CSS (%RGB)	:	rgb(23%,70%,44%)	CSS (%RGB)	:	rgb(37%,61%,62%)

Verlauf Hintergrundfarbe mediumseagreen nach Schriftfarbwert #5f9ea0
#3cb371	#41b077	#46ad7e	#4baa85	#50a78b	#55a492	#5aa199	#5f9ea0
#3cb371	#41b077	#46ad7e	#4baa85	#50a78b	#55a492	#5aa199	#5f9ea0

Kombination von mediumseagreen und #5f9ea0
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. Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Die Ähnlichkeit von #5f9ea0 und mediumseagreen ergibt sich zu 94.55%. Die Lesbarkeit dieser Kombination ergibt sich zu 5.45%. #5f9ea0 eignet sich nicht als Schriftfarbe auf Hintergrund mediumseagreen, weil weder der Helligkeitsunterschied noch der Farbunterschied geeignet sind.

Hintergrundfarbe mediumseagreen				Schriftfarbwert #5f9ea0
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#3cb371	#3cb371	#3cb371	#3cb371	#5f9ea0	#5f9ea0	#5f9ea0	#5f9ea0
#57bd85	#57bd85	#339960	#339960	#75abad	#75abad	#518789	#518789
#73c899	#73c899	#2a7f50	#2a7f50	#8cb9bb	#8cb9bb	#437072	#437072
#8fd3ad	#8fd3ad	#226640	#226640	#a3c7c8	#a3c7c8	#365a5b	#365a5b
#abdec2	#abdec2	#194c30	#194c30	#bad5d6	#bad5d6	#284344	#284344
#c7e9d6	#c7e9d6	#113320	#113320	#d1e3e3	#d1e3e3	#1b2d2d	#1b2d2d
#e3f4ea	#e3f4ea	#081910	#081910	#e8f1f1	#e8f1f1	#0d1616	#0d1616
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe mediumseagreen und Farbwert #5f9ea0

Wechsel der Textfarbe bei Hover bei HTML-Tag li

Die Textfarbe soll sich von Farbe mediumseagreen auf Farbwert #5f9ea0 ändern, wenn man mit der Maus auf <li> zeigt. Wir bereiten zunächst eine Darstellung von <li> in Farbe mediumseagreen vor.

Für dieses Beispiel legen wir Farbe mediumseagreen als Textfarbe von <li> fest. Zwar ändern wir die Hintergrundfarbe nicht, ändern jedoch die Schriftart auf sans-serif:

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

Nun stellen wir ein, dass bei Mausberührung die Textfarbe auf #5f9ea0 gesetzt wird.

<style type="text/css"><!--
  li:hover { 
    color:#5f9ea0;
  }
//-->
</style>

Mehr zum Thema können Sie in Listen und Glossare in HTML finden. Die Beschreibung des hier genutzten Tag li erfahren Sie in der HTML Referenz unter <li>.

Zebra-Effekt bei Befehl th

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, spricht man von einem Zebra-Effekt. Er unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .yang und .ying für <th> mit den Hintergrundfarben Farbe mediumseagreen und Farbwert #5f9ea0.

<style type="text/css"><!--
  th.yang { 
    background-color:mediumseagreen;
  }
  th.ying { 
    background-color:#5f9ea0;
  }
//-->
</style>

Diese werden abwechselnd verwendet.

<table>
<tr><td class="yang">BA~A</td><td class="ying">BB~A</td><td class="yang">BC~A</td></tr>
<tr><td class="yang">BA~B</td><td class="ying">BB~B</td><td class="yang">BC~B</td></tr>
<tr><td class="yang">BA~C</td><td class="ying">BB~C</td><td class="yang">BC~C</td></tr>
</table>

Mehr zum Thema können Sie in Tabellen in HTML nachlesen. Einzelheiten vom hier genutzten Befehl th sind in der HTML Referenz bei <th> ausführlich beschrieben.