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

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			Schriftfarbwert #696969
Detail	:	Hintergrund #e9967a	Detail	:	Schrift #696969
Farbwert	:	#e9967a	Farbwert	:	#696969
Farbe	:	darksalmon	Farbe	:	dimgray
HTML	:	#e9967a	HTML	:	#696969
HTML (Wert)	:	#e9967a	HTML (Wert)	:	#696969
CSS	:	#e9967a	CSS	:	#696969
CSS (Wert)	:	#e9967a	CSS (Wert)	:	#696969
CSS (kürzest)	:	#e9967a	CSS (kürzest)	:	#696969
CSS (RGB)	:	rgb(233,150,122)	CSS (RGB)	:	rgb(105,105,105)
CSS (%RGB)	:	rgb(91%,58%,47%)	CSS (%RGB)	:	rgb(41%,41%,41%)

Verlauf Hintergrundfarbwert #e9967a nach Schriftfarbwert #696969
#e9967a	#d68f77	#c48975	#b28272	#9f7c70	#8d756d	#7b6f6b	#696969
#e9967a	#d68f77	#c48975	#b28272	#9f7c70	#8d756d	#7b6f6b	#696969

Kombination von #e9967a und #696969
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante.				Die Ähnlichkeit von #696969 und #e9967a ergibt sich zu 88.66%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 11.34%. #696969 ist nicht als Schriftfarbe auf Hintergrund #e9967a geeignet, da die Helligkeit und Farben zu ähnlich sind.

Hintergrundfarbwert #e9967a				Schriftfarbwert #696969
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#e9967a	#e9967a	#e9967a	#e9967a	#696969	#696969	#696969	#696969
#eca58d	#eca58d	#c78068	#c78068	#7e7e7e	#7e7e7e	#5a5a5a	#5a5a5a
#efb4a0	#efb4a0	#a66b57	#a66b57	#939393	#939393	#4b4b4b	#4b4b4b
#f2c3b3	#f2c3b3	#855545	#855545	#a9a9a9	#a9a9a9	#3c3c3c	#3c3c3c
#f5d2c6	#f5d2c6	#634034	#634034	#bebebe	#bebebe	#2d2d2d	#2d2d2d
#f8e1d9	#f8e1d9	#422a22	#422a22	#d4d4d4	#d4d4d4	#1e1e1e	#1e1e1e
#fbf0ec	#fbf0ec	#211511	#211511	#e9e9e9	#e9e9e9	#0f0f0f	#0f0f0f
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #e9967a und Farbwert #696969

Wechsel der Textfarbe bei Hover mit Tag a

Mit Tag <a> wird ein Hyperlink erzeugt. Diesen können Sie hervorheben und farblich gestalten.

Die Textfarbe soll sich von Farbwert #e9967a auf Farbwert #696969 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <a> in Farbwert #e9967a vor.

Wir legen z.B. bei <a> die Textfarbe auf Farbwert #e9967a fest. Die Hintergrundfarbe ändern wir nicht, ändern jedoch die Schriftart auf verdana:

<style type="text/css"><!--
  a { 
    font-family: verdana; 
    color: #e9967a;
  }
//-->
</style>

Nun fordern wir, dass bei Hover die Textfarbe auf #696969 gesetzt wird.

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

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

Zebra-Effekt bei HTML-Tag tr

Man redet von einem so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Dieser Effekt unterstützt das Auge zum Beispiel die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ung und .ger für <tr> mit den Hintergrundfarben Farbwert #e9967a und Farbwert #696969.

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

Diese CSS-Klassen werden abwechselnd genutzt.

<table>
<tr class="ung"><td>Ha/a</td><td>Hb/a</td><td>Hc/a</td></tr>
<tr class="ger"><td>Ha/b</td><td>Hb/b</td><td>Hc/b</td></tr>
<tr class="ung"><td>Ha/c</td><td>Hb/c</td><td>Hc/c</td></tr>
</table>

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