Ressourcen: 120 HTML Farbnamen - Kombination von Farbe mediumseagreen und Farbe aquamarine

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			Schriftfarbe aquamarine
Detail	:	Hintergrund mediumseagreen	Detail	:	Schrift aquamarine
Farbe	:	mediumseagreen	Farbe	:	aquamarine
Farbwert	:	#3cb371	Farbwert	:	#7fffd4
HTML	:	mediumseagreen	HTML	:	aquamarine
HTML (Wert)	:	#3cb371	HTML (Wert)	:	#7fffd4
CSS	:	mediumseagreen	CSS	:	aquamarine
CSS (Wert)	:	#3cb371	CSS (Wert)	:	#7fffd4
CSS (kürzest)	:	#3cb371	CSS (kürzest)	:	#7fffd4
CSS (RGB)	:	rgb(60,179,113)	CSS (RGB)	:	rgb(127,255,212)
CSS (%RGB)	:	rgb(23%,70%,44%)	CSS (%RGB)	:	rgb(49%,100%,83%)

Verlauf Hintergrundfarbe mediumseagreen nach Schriftfarbe aquamarine
#3cb371	#45bd7f	#4fc88d	#58d39b	#62dea9	#6be9b7	#75f4c5	#7fffd4
#3cb371	#45bd7f	#4fc88d	#58d39b	#62dea9	#6be9b7	#75f4c5	#7fffd4

Kombination von mediumseagreen und aquamarine
Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna.				Die Ähnlichkeit von aquamarine und mediumseagreen beträgt 89.63%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 10.37%. Auf Hintergrund mediumseagreen ist aquamarine ungeeignet, weil sich die Helligkeit und Farben zu ähnlich sind.

Hintergrundfarbe mediumseagreen				Schriftfarbe aquamarine
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#3cb371	#3cb371	#3cb371	#3cb371	#7fffd4	#7fffd4	#7fffd4	#7fffd4
#57bd85	#57bd85	#339960	#339960	#91ffda	#91ffda	#6cdab5	#6cdab5
#73c899	#73c899	#2a7f50	#2a7f50	#a3ffe0	#a3ffe0	#5ab697	#5ab697
#8fd3ad	#8fd3ad	#226640	#226640	#b5ffe6	#b5ffe6	#489179	#489179
#abdec2	#abdec2	#194c30	#194c30	#c8ffec	#c8ffec	#366d5a	#366d5a
#c7e9d6	#c7e9d6	#113320	#113320	#dafff2	#dafff2	#24483c	#24483c
#e3f4ea	#e3f4ea	#081910	#081910	#ecfff8	#ecfff8	#12241e	#12241e
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe mediumseagreen und Farbe aquamarine

Wechsel der Unterstreichung bei Hover bei HTML-Tag a

Mit HTML-Tag <a> wird ein Link gesetzt. Dieser kann farblich gestaltet werden.

Die Farbe der Unterstreichung soll sich von Farbe mediumseagreen auf Farbe aquamarine ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Darstellung von <a> in Farbe mediumseagreen vor.

In diesem Beispiel unterstreichen wir <a> mit Hilfe eines einfallenden Rahmens mit 5 Pixel Dicke in Farbe mediumseagreen.

<style type="text/css"><!--
  a { border-bottom:5px inset mediumseagreen; }
//-->
</style>

Jetzt fordern wir, dass bei Mausberührung die Farbe der Unterstreichung auf aquamarine gesetzt wird.

<style type="text/css"><!--
  a:hover { 
    border-bottom-color:aquamarine;
  }
//-->
</style>

Die Idee ist hierbei, voneinander unabhängige Formatierungen für Inhalt und Unterstreichung zu nutzen. Öfter sieht man das bei Verweisen. Der Text wird in einer Farbe dargestellt. Die Unterstreichung in einer anderen. Hierbei handelt es sich jedoch nicht um eine normale Unterstreichung, der Text hat keine Unterstreichung. Die Unterstreichung wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Mehr zum Thema a erfahren Sie in Verweise und Protokolle in HTML. Einzelheiten des hier genutzten Tag a lesen Sie in der HTML Referenz unter <a>.

Zebra-Effekt mit Tag tr

Man redet von einem so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Dieser Effekt unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ger und .ung für <tr> mit den Hintergrundfarben Farbe mediumseagreen und Farbe aquamarine.

<style type="text/css"><!--
  tr.ger { 
    background-color:mediumseagreen;
  }
  tr.ung { 
    background-color:aquamarine;
  }
//-->
</style>

Diese werden dann abwechselnd angewendet.

<table>
<tr class="ger"><td>X1~1</td><td>X2~1</td><td>X3~1</td></tr>
<tr class="ung"><td>X1~2</td><td>X2~2</td><td>X3~2</td></tr>
<tr class="ger"><td>X1~3</td><td>X2~3</td><td>X3~3</td></tr>
</table>

Mehr zum Thema tr lesen Sie in Tabellen in HTML. Möglichkeiten vom hier gezeigten HTML-Tag tr sind in der HTML Referenz unter <tr> zusammengestellt.