Ressourcen: 120 HTML Farbnamen - Kombination von Farbe mediumspringgreen und Farbwert #4b0082

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 mediumspringgreen			Schriftfarbwert #4b0082
Detail	:	Hintergrund mediumspringgreen	Detail	:	Schrift #4b0082
Farbe	:	mediumspringgreen	Farbwert	:	#4b0082
Farbwert	:	#00fa9a	Farbe	:	indigo
HTML	:	mediumspringgreen	HTML	:	#4b0082
HTML (Wert)	:	#00fa9a	HTML (Wert)	:	#4b0082
CSS	:	mediumspringgreen	CSS	:	#4b0082
CSS (Wert)	:	#00fa9a	CSS (Wert)	:	#4b0082
CSS (kürzest)	:	#00fa9a	CSS (kürzest)	:	#4b0082
CSS (RGB)	:	rgb(0,250,154)	CSS (RGB)	:	rgb(75,0,130)
CSS (%RGB)	:	rgb(0%,98%,60%)	CSS (%RGB)	:	rgb(29%,0%,50%)

Verlauf Hintergrundfarbe mediumspringgreen nach Schriftfarbwert #4b0082
#00fa9a	#0ad696	#15b293	#208e8f	#2a6b8c	#354788	#402385	#4b0082
#00fa9a	#0ad696	#15b293	#208e8f	#2a6b8c	#354788	#402385	#4b0082

Kombination von mediumspringgreen und #4b0082
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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante.				#4b0082 eignet sich nicht als Schriftfarbe auf Hintergrund mediumspringgreen. Zwar ist der Helligkeitsunterschied gut, doch die Farben selbst sind zu ähnlich. Die Ähnlichkeit der Farben #4b0082 und mediumspringgreen beträgt 55.54%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 44.46%.

Hintergrundfarbe mediumspringgreen				Schriftfarbwert #4b0082
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#00fa9a	#00fa9a	#00fa9a	#00fa9a	#4b0082	#4b0082	#4b0082	#4b0082
#24faa8	#24faa8	#00d684	#00d684	#642493	#642493	#40006f	#40006f
#48fbb6	#48fbb6	#00b26e	#00b26e	#7e48a5	#7e48a5	#35005c	#35005c
#6dfcc5	#6dfcc5	#008e58	#008e58	#986db7	#986db7	#2a004a	#2a004a
#91fcd3	#91fcd3	#006b42	#006b42	#b191c9	#b191c9	#200037	#200037
#b6fde2	#b6fde2	#00472c	#00472c	#cbb6db	#cbb6db	#150025	#150025
#dafef0	#dafef0	#002316	#002316	#e5daed	#e5daed	#0a0012	#0a0012
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe mediumspringgreen und Farbwert #4b0082

Wechsel der Textfarbe bei Hover von HTML-Befehl h1

Eine Überschrift erzeugt man mit HTML-Tag <h1>. Diese kann man farblich gestalten.

Die Textfarbe soll sich von Farbe mediumspringgreen auf Farbwert #4b0082 ändern, wenn man mit der Maus auf <h1> zeigt. Wir bereiten zunächst eine Formatierung von <h1> in Farbe mediumspringgreen vor.

Wir legen hier bei <h1> die Textfarbe auf Farbe mediumspringgreen fest. Die Hintergrundfarbe behalten wir bei, ändern jedoch die Schriftart auf courier new und verringern die Schriftgröße auf 87%.

<style type="text/css"><!--
  h1 { 
    color:mediumspringgreen; 
    font-size:87%; 
    font-family:courier new;
  }
//-->
</style>

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

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

Mehr zu h1 finden Sie in Grundlegende Gestaltungselemente in HTML. Der HTML-Tag h1 ist in der HTML Referenz bei <h1> ausführlich zusammengestellt.

Zebra-Effekt von Tag tr

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, spricht man vom so genannten Zebra-Effekt. Er unterstützt das Auge, etwa die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .gerade und .ungerade für <tr> mit den Hintergrundfarben Farbe mediumspringgreen und Farbwert #4b0082.

<style type="text/css"><!--
  tr.gerade { 
    background-color: mediumspringgreen;
  }
  tr.ungerade { 
    background-color: #4b0082;
  }
//-->
</style>

Diese CSS-Klassen werden dann abwechselnd genutzt.

<table>
<tr class="gerade"><td>FA-A</td><td>FB-A</td><td>FC-A</td></tr>
<tr class="ungerade"><td>FA-B</td><td>FB-B</td><td>FC-B</td></tr>
<tr class="gerade"><td>FA-C</td><td>FB-C</td><td>FC-C</td></tr>
</table>

Mehr zu tr können Sie in Tabellen in HTML nachlesen. Mehr zum hier verwendeten HTML-Befehl tr ist in der HTML Referenz bei <tr> zusammengestellt.