Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #2e8b57 und Farbe aliceblue

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 #2e8b57			Schriftfarbe aliceblue
Detail	:	Hintergrund #2e8b57	Detail	:	Schrift aliceblue
Farbwert	:	#2e8b57	Farbe	:	aliceblue
Farbe	:	seagreen	Farbwert	:	#f0f8ff
HTML	:	#2e8b57	HTML	:	aliceblue
HTML (Wert)	:	#2e8b57	HTML (Wert)	:	#f0f8ff
CSS	:	#2e8b57	CSS	:	aliceblue
CSS (Wert)	:	#2e8b57	CSS (Wert)	:	#f0f8ff
CSS (kürzest)	:	#2e8b57	CSS (kürzest)	:	#f0f8ff
CSS (RGB)	:	rgb(46,139,87)	CSS (RGB)	:	rgb(240,248,255)
CSS (%RGB)	:	rgb(18%,54%,34%)	CSS (%RGB)	:	rgb(94%,97%,100%)

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

Kombination von #2e8b57 und aliceblue
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. 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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				aliceblue ist nicht als Schriftfarbe auf Hintergrund #2e8b57 geeignet, da der Farbunterschied nicht ausreichend ist Die Ähnlichkeit der Farben aliceblue und #2e8b57 beträgt 81.16%. Die Lesbarkeit dieser Kombination liegt damit bei 18.84%.

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

Beispiele zur Kombination von Farbwert #2e8b57 und Farbe aliceblue

Wechsel der Unterstreichung bei Hover mit Befehl blockquote

Die Farbe der Unterstreichung soll sich von Farbwert #2e8b57 auf Farbe aliceblue ändern, wenn man mit der Maus auf <blockquote> zeigt. Bereiten wir zunächst die Darstellung von <blockquote> in Farbwert #2e8b57 vor.

Hier unterstreichen wir <blockquote> mit Hilfe eines doppelten Rahmens mit 2 Pixel Dicke in Farbwert #2e8b57.

<style type="text/css"><!--
  blockquote { 
    border-bottom-style:double; 
    border-bottom-color:#2e8b57; 
    border-bottom-width:2px;
  }
//-->
</style>

Nun fordern wir, dass bei Hover die Farbe der Unterstreichung auf aliceblue geändert wird.

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

Die Idee ist hierbei, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben. Öfter sehen Sie das bei Links. Der Text wird in einer Farbe dargestellt. Und die Unterstreichung in einer anderen. Hierbei handelt es sich aber nicht um eine normale Unterstreichung, der Text ist überhaupt nicht unterstrichen. Sie wird mit einem Rahmen simuliert und dieser Rahmen ist unabhängig vom Text.

Mehr zu blockquote erfahren Sie in Blockorientierte Elemente in HTML. Mehr zum hier verwendeten Tag blockquote erfahren Sie in der HTML Referenz unter <blockquote>.

Hintergrund/Text-Kombination von Tag a

Einen Hyperlink setzt man mit Tag <a>. Dieser kann hervorgehoben und farblich gestaltet werden.

Hier ändern wir die Textfarbe von <a> auf Farbe aliceblue und die Hintergrundfarbe von <a> auf Farbwert #2e8b57. Als Schriftart setzen wir courier new und setzen die Schriftgröße auf 13px.

<style type="text/css"><!--
  a { 
    font-size:13px; 
    font-family:courier new; 
    background-color:#2e8b57; 
    color:aliceblue;
  }
//-->
</style>

Mehr zum Thema erfahren Sie in Verweise und Protokolle in HTML. Einzelheiten vom hier genutzten HTML-Tag a sind in der HTML Referenz unter <a> ausführlich zusammengestellt.