Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #ffdab9 und Farbwert #a0522d

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 #ffdab9			Schriftfarbwert #a0522d
Detail	:	Hintergrund #ffdab9	Detail	:	Schrift #a0522d
Farbwert	:	#ffdab9	Farbwert	:	#a0522d
Farbe	:	peachpuff	Farbe	:	sienna
HTML	:	#ffdab9	HTML	:	#a0522d
HTML (Wert)	:	#ffdab9	HTML (Wert)	:	#a0522d
CSS	:	#ffdab9	CSS	:	#a0522d
CSS (Wert)	:	#ffdab9	CSS (Wert)	:	#a0522d
CSS (kürzest)	:	#ffdab9	CSS (kürzest)	:	#a0522d
CSS (RGB)	:	rgb(255,218,185)	CSS (RGB)	:	rgb(160,82,45)
CSS (%RGB)	:	rgb(100%,85%,72%)	CSS (%RGB)	:	rgb(62%,32%,17%)

Verlauf Hintergrundfarbwert #ffdab9 nach Schriftfarbwert #a0522d
#ffdab9	#f1c6a5	#e3b391	#d69f7d	#c88c69	#bb7855	#ad6541	#a0522d
#ffdab9	#f1c6a5	#e3b391	#d69f7d	#c88c69	#bb7855	#ad6541	#a0522d

Kombination von #ffdab9 und #a0522d
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 der Farben #a0522d und #ffdab9 ergibt sich zu 79.65%. Die Lesbarkeit dieser Kombination ergibt sich zu 20.35%. Auf Hintergrund #ffdab9 ist #a0522d ungeeignet. Die Unterschiede in der Helligkeit und Farbe sind nicht ausreichend.

Hintergrundfarbwert #ffdab9				Schriftfarbwert #a0522d
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ffdab9	#ffdab9	#ffdab9	#ffdab9	#a0522d	#a0522d	#a0522d	#a0522d
#ffdfc3	#ffdfc3	#daba9e	#daba9e	#ad6a4b	#ad6a4b	#894626	#894626
#ffe4cd	#ffe4cd	#b69b84	#b69b84	#bb8369	#bb8369	#723a20	#723a20
#ffe9d7	#ffe9d7	#917c69	#917c69	#c89c87	#c89c87	#5b2e19	#5b2e19
#ffefe1	#ffefe1	#6d5d4f	#6d5d4f	#d6b4a5	#d6b4a5	#442313	#442313
#fff4eb	#fff4eb	#483e34	#483e34	#e3cdc3	#e3cdc3	#2d170c	#2d170c
#fff9f5	#fff9f5	#241f1a	#241f1a	#f1e6e1	#f1e6e1	#160b06	#160b06
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #ffdab9 und Farbwert #a0522d

Wechsel der Umrandung bei Hover von HTML-Tag a

Einen Link erzeugt man mit Tag <a>. Diesen kann man hervorheben und farblich gestalten.

Die Rahmenfarbe soll sich von Farbwert #ffdab9 auf Farbwert #a0522d ändern, wenn man mit der Maus auf <a> zeigt. Wir bereiten zunächst eine Darstellung von <a> in Farbwert #ffdab9 vor.

In diesem Beispiel umranden wir <a> mit einem 5 Pixel dicken, gepunkteten Rahmen in Farbwert #ffdab9.

<style type="text/css"><!--
  a { border:5px dotted #ffdab9; }
//-->
</style>

Nun stellen wir ein, dass sich bei Berührung mit der Maus die Rahmenfarbe auf #a0522d ändert.

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

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

Zebra-Effekt mit HTML-Tag th

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, redet man vom so genannten Zebra-Effekt. Der Effekt unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .gerade und .ungerade für <th> mit den Hintergrundfarben Farbwert #ffdab9 und Farbwert #a0522d.

<style type="text/css"><!--
  th.gerade { 
    background-color:#ffdab9;
  }
  th.ungerade { 
    background-color: #a0522d;
  }
//-->
</style>

Diese werden abwechselnd angewendet.

<table>
<tr><td class="gerade">Ha:a</td><td class="ungerade">Hb:a</td><td class="gerade">Hc:a</td></tr>
<tr><td class="gerade">Ha:b</td><td class="ungerade">Hb:b</td><td class="gerade">Hc:b</td></tr>
<tr><td class="gerade">Ha:c</td><td class="ungerade">Hb:c</td><td class="gerade">Hc:c</td></tr>
</table>

Mehr zu th können Sie in Tabellen in HTML erfahren. Weiteres zum HTML-Tag th ist in der HTML Referenz bei <th> genau gezeigt.