Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #eee8aa und Farbwert #ff7f50

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 #eee8aa			Schriftfarbwert #ff7f50
Detail	:	Hintergrund #eee8aa	Detail	:	Schrift #ff7f50
Farbwert	:	#eee8aa	Farbwert	:	#ff7f50
Farbe	:	palegoldenrod	Farbe	:	coral
HTML	:	#eee8aa	HTML	:	#ff7f50
HTML (Wert)	:	#eee8aa	HTML (Wert)	:	#ff7f50
CSS	:	#eee8aa	CSS	:	#ff7f50
CSS (Wert)	:	#eee8aa	CSS (Wert)	:	#ff7f50
CSS (kürzest)	:	#eee8aa	CSS (kürzest)	:	#ff7f50
CSS (RGB)	:	rgb(238,232,170)	CSS (RGB)	:	rgb(255,127,80)
CSS (%RGB)	:	rgb(93%,90%,66%)	CSS (%RGB)	:	rgb(100%,49%,31%)

Verlauf Hintergrundfarbwert #eee8aa nach Schriftfarbwert #ff7f50
#eee8aa	#f0d99d	#f2ca90	#f5bb83	#f7ac76	#fa9d69	#fc8e5c	#ff7f50
#eee8aa	#f0d99d	#f2ca90	#f5bb83	#f7ac76	#fa9d69	#fc8e5c	#ff7f50

Kombination von #eee8aa und #ff7f50
Cras vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. 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.				#ff7f50 eignet sich nicht als Schriftfarbe auf Hintergrund #eee8aa. Die Helligkeit und Farben sind zu ähnlich. Die Ähnlichkeit der Farben #ff7f50 und #eee8aa ergibt sich zu 90.50%. Die Lesbarkeit dieser Farbkombination liegt damit bei 9.50%.

Hintergrundfarbwert #eee8aa				Schriftfarbwert #ff7f50
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#eee8aa	#eee8aa	#eee8aa	#eee8aa	#ff7f50	#ff7f50	#ff7f50	#ff7f50
#f0ebb6	#f0ebb6	#ccc691	#ccc691	#ff9169	#ff9169	#da6c44	#da6c44
#f2eec2	#f2eec2	#aaa579	#aaa579	#ffa382	#ffa382	#b65a39	#b65a39
#f5f1ce	#f5f1ce	#888461	#888461	#ffb59b	#ffb59b	#91482d	#91482d
#f7f5da	#f7f5da	#666348	#666348	#ffc8b4	#ffc8b4	#6d3622	#6d3622
#faf8e6	#faf8e6	#444230	#444230	#ffdacd	#ffdacd	#482416	#482416
#fcfbf2	#fcfbf2	#222118	#222118	#ffece6	#ffece6	#24120b	#24120b
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #eee8aa und Farbwert #ff7f50

Wechsel der Textfarbe bei Hover bei HTML-Tag address

Die Textfarbe soll sich von Farbwert #eee8aa auf Farbwert #ff7f50 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Darstellung von <address> in Farbwert #eee8aa vor.

Z.B. legen wir Farbwert #eee8aa als Textfarbe von <address> fest:

<style type="text/css"><!--
  address { 
    color:#eee8aa;
  }
//-->
</style>

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

<style type="text/css"><!--
  address:hover { 
    color:#ff7f50;
  }
//-->
</style>

Mehr zum Thema address können Sie in Blockorientierte Elemente in HTML finden. Die Beschreibung vom hier verwendeten HTML-Befehl address erfahren Sie in der HTML Referenz unter <address>.

Wechsel der Unterstreichung bei Hover von HTML-Befehl h2

Eine Überschrift erzeugt man mit Tag <h2>. Sie kann hervorgehoben und farblich gestaltet werden.

Die Farbe der Unterstreichung soll sich von Farbwert #eee8aa auf Farbwert #ff7f50 ändern, wenn man mit der Maus auf <h2> zeigt. Wir bereiten zunächst eine Darstellung von <h2> in Farbwert #eee8aa vor.

In diesem Beispiel unterstreichen wir <h2> mit Hilfe eines doppelten Rahmens mit 3 Pixel Dicke in Farbwert #eee8aa.

<style type="text/css"><!--
  h2 { 
    border-bottom-style:double; 
    border-bottom-color:#eee8aa; 
    border-bottom-width:3px;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Hover die Farbe der Unterstreichung auf #ff7f50 ändert.

<style type="text/css"><!--
  h2: hover { 
    border-bottom-color: #ff7f50;
  }
//-->
</style>

Die Idee ist dabei, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben. Manchmal sehen Sie das bei Verweisen. Der Text wird in einer Farbe dargestellt. Die Unterstreichung in einer anderen. Es ist aber keine normale Unterstreichung, der Text ist überhaupt nicht unterstrichen. Sie wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Weiteres zum Thema h2 lesen Sie in Grundlegende Gestaltungselemente in HTML. Mehr zum Tag <h2>.