Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #e9967a und Farbe gold

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 #e9967a			Schriftfarbe gold
Detail	:	Hintergrund #e9967a	Detail	:	Schrift gold
Farbwert	:	#e9967a	Farbe	:	gold
Farbe	:	darksalmon	Farbwert	:	#ffd700
HTML	:	#e9967a	HTML	:	gold
HTML (Wert)	:	#e9967a	HTML (Wert)	:	#ffd700
CSS	:	#e9967a	CSS	:	gold
CSS (Wert)	:	#e9967a	CSS (Wert)	:	#ffd700
CSS (kürzest)	:	#e9967a	CSS (kürzest)	:	#ffd700
CSS (RGB)	:	rgb(233,150,122)	CSS (RGB)	:	rgb(255,215,0)
CSS (%RGB)	:	rgb(91%,58%,47%)	CSS (%RGB)	:	rgb(100%,84%,0%)

Verlauf Hintergrundfarbwert #e9967a nach Schriftfarbe gold
#e9967a	#ec9f68	#efa857	#f2b145	#f5bb34	#f8c422	#fbcd11	#ffd700
#e9967a	#ec9f68	#efa857	#f2b145	#f5bb34	#f8c422	#fbcd11	#ffd700

Kombination von #e9967a und gold
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 von gold und #e9967a beträgt 92.17%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 7.83%. gold eignet sich nicht als Schriftfarbe auf Hintergrund #e9967a, da die Unterschiede in der Helligkeit und Farbe nicht ausreichend sind.

Hintergrundfarbwert #e9967a				Schriftfarbe gold
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#e9967a	#e9967a	#e9967a	#e9967a	#ffd700	#ffd700	#ffd700	#ffd700
#eca58d	#eca58d	#c78068	#c78068	#ffdc24	#ffdc24	#dab800	#dab800
#efb4a0	#efb4a0	#a66b57	#a66b57	#ffe248	#ffe248	#b69900	#b69900
#f2c3b3	#f2c3b3	#855545	#855545	#ffe86d	#ffe86d	#917a00	#917a00
#f5d2c6	#f5d2c6	#634034	#634034	#ffed91	#ffed91	#6d5c00	#6d5c00
#f8e1d9	#f8e1d9	#422a22	#422a22	#fff3b6	#fff3b6	#483d00	#483d00
#fbf0ec	#fbf0ec	#211511	#211511	#fff9da	#fff9da	#241e00	#241e00
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #e9967a und Farbe gold

Wechsel der Textfarbe bei Hover mit Tag h5

Eine Überschrift setzen Sie mit Tag <h5>. Diese können Sie hervorheben und farblich gestalten.

Die Textfarbe soll sich von Farbwert #e9967a auf Farbe gold ändern, wenn man mit der Maus auf <h5> zeigt. Bereiten wir zunächst die Darstellung von <h5> in Farbwert #e9967a vor.

Wir legen als Beispiel die Textfarbe von <h5> auf Farbwert #e9967a fest. Zwar behalten wir die Hintergrundfarbe bei, setzen jedoch die Schriftart auf courier new und setzen die Größe der Schrift auf 9px:

<style type="text/css"><!--
  h5 { 
    font-family:courier new; 
    color:#e9967a; 
    font-size:9px;
  }
//-->
</style>

Nun fordern wir, dass bei Mausberührung die Textfarbe auf gold gesetzt wird.

<style type="text/css"><!--
  h5: hover { 
    color: gold;
  }
//-->
</style>

Mehr zum Thema h5 können Sie in Grundlegende Gestaltungselemente in HTML erfahren. Weiteres zum hier verwendeten HTML-Tag h5 ist in der HTML Referenz bei <h5> zusammengestellt.

Zebra-Effekt mit HTML-Tag td

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, spricht man vom Zebra-Effekt. Er unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ung und .ger für <td> mit unterschiedlichen Hintergrundfarben Farbwert #e9967a und Farbe gold.

<style type="text/css"><!--
  td.ung { 
    background-color: #e9967a;
  }
  td.ger { 
    background-color: gold;
  }
//-->
</style>

Diese CSS-Klassen werden abwechselnd angewendet.

<table>
<tr><td class="ung">A1/1</td><td class="ger">A2/1</td><td class="ung">A3/1</td></tr>
<tr><td class="ung">A1/2</td><td class="ger">A2/2</td><td class="ung">A3/2</td></tr>
<tr><td class="ung">A1/3</td><td class="ger">A2/3</td><td class="ung">A3/3</td></tr>
</table>

Weiteres zum Thema td können Sie in Tabellen in HTML lesen. Weiteres zum hier genutzten Tag <td>.