Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #f0f8ff und Farbwert #2e8b57

Netscape führte seinerzeit die websicheren Farben ein. Neben diesen, einem bestimmten Schema folgenden, Farbwerten, definierte man noch 120 Werte und ordnete ihnen Namen zu. Zusammen mit den 17 Standard-HTML-Farben, die ebenfalls Namen haben, ergeben sich so 137 HTML Farbnamen.

Hintergrundfarbwert #f0f8ff			Schriftfarbwert #2e8b57
Detail	:	Hintergrund #f0f8ff	Detail	:	Schrift #2e8b57
Farbwert	:	#f0f8ff	Farbwert	:	#2e8b57
Farbe	:	aliceblue	Farbe	:	seagreen
HTML	:	#f0f8ff	HTML	:	#2e8b57
HTML (Wert)	:	#f0f8ff	HTML (Wert)	:	#2e8b57
CSS	:	#f0f8ff	CSS	:	#2e8b57
CSS (Wert)	:	#f0f8ff	CSS (Wert)	:	#2e8b57
CSS (kürzest)	:	#f0f8ff	CSS (kürzest)	:	#2e8b57
CSS (RGB)	:	rgb(240,248,255)	CSS (RGB)	:	rgb(46,139,87)
CSS (%RGB)	:	rgb(94%,97%,100%)	CSS (%RGB)	:	rgb(18%,54%,34%)

Verlauf Hintergrundfarbwert #f0f8ff nach Schriftfarbwert #2e8b57
#f0f8ff	#d4e8e7	#b8d8cf	#9cc9b7	#81b99f	#65aa87	#499a6f	#2e8b57
#f0f8ff	#d4e8e7	#b8d8cf	#9cc9b7	#81b99f	#65aa87	#499a6f	#2e8b57

Kombination von #f0f8ff und #2e8b57
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit der Farben #2e8b57 und #f0f8ff ergibt sich zu 81.16%. Die Lesbarkeit dieser Farbkombination liegt damit bei 18.84%. Auf Hintergrund #f0f8ff ist #2e8b57 ungeeignet, weil die Farben zu ähnlich sind.

Hintergrundfarbwert #f0f8ff				Schriftfarbwert #2e8b57
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#f0f8ff	#f0f8ff	#f0f8ff	#f0f8ff	#2e8b57	#2e8b57	#2e8b57	#2e8b57
#f2f9ff	#f2f9ff	#cdd4da	#cdd4da	#4b9b6f	#4b9b6f	#27774a	#27774a
#f4faff	#f4faff	#abb1b6	#abb1b6	#69ac87	#69ac87	#20633e	#20633e
#f6fbff	#f6fbff	#898d91	#898d91	#87bc9f	#87bc9f	#1a4f31	#1a4f31
#f8fcff	#f8fcff	#666a6d	#666a6d	#a5cdb7	#a5cdb7	#133b25	#133b25
#fafdff	#fafdff	#444648	#444648	#c3ddcf	#c3ddcf	#0d2718	#0d2718
#fcfeff	#fcfeff	#222324	#222324	#e1eee7	#e1eee7	#06130c	#06130c
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #f0f8ff und Farbwert #2e8b57

Zebra-Effekt bei HTML-Befehl tr

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, redet man vom Zebra-Effekt. Der Effekt unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ung und .ger für <tr> mit unterschiedlichen Hintergrundfarben Farbwert #f0f8ff und Farbwert #2e8b57.

<style type="text/css"><!--
  tr.ung { 
    background-color:#f0f8ff;
  }
  tr.ger { 
    background-color:#2e8b57;
  }
//-->
</style>

Diese Klassen werden dann abwechselnd verwendet.

<table>
<tr class="ung"><td>SA~A</td><td>SB~A</td><td>SC~A</td></tr>
<tr class="ger"><td>SA~B</td><td>SB~B</td><td>SC~B</td></tr>
<tr class="ung"><td>SA~C</td><td>SB~C</td><td>SC~C</td></tr>
</table>

Weiteres zum Thema erfahren Sie in Tabellen in HTML. Mehr zum Tag <tr>.

Wechsel der Umrandung bei Hover bei Befehl em

Die Rahmenfarbe soll sich von Farbwert #f0f8ff auf Farbwert #2e8b57 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Darstellung von <em> in Farbwert #f0f8ff vor.

In diesem Beispiel umranden wir <em> mit einem 1 Pixel dicken, gestrichelten Rahmen in Farbwert #f0f8ff.

<style type="text/css"><!--
  em { 
    border-width: 1px; 
    border-style: dashed; 
    border-color: #f0f8ff;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Mausberührung die Rahmenfarbe auf #2e8b57 ändert.

<style type="text/css"><!--
  em: hover { 
    border-color: #2e8b57;
  }
//-->
</style>

Mehr zum Thema em lesen Sie in Text in HTML. Beschreibung des Tag <em>.