Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #cd853f und Farbwert #ffd700

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 #cd853f			Schriftfarbwert #ffd700
Detail	:	Hintergrund #cd853f	Detail	:	Schrift #ffd700
Farbwert	:	#cd853f	Farbwert	:	#ffd700
Farbe	:	peru	Farbe	:	gold
HTML	:	#cd853f	HTML	:	#ffd700
HTML (Wert)	:	#cd853f	HTML (Wert)	:	#ffd700
CSS	:	#cd853f	CSS	:	#ffd700
CSS (Wert)	:	#cd853f	CSS (Wert)	:	#ffd700
CSS (kürzest)	:	#cd853f	CSS (kürzest)	:	#ffd700
CSS (RGB)	:	rgb(205,133,63)	CSS (RGB)	:	rgb(255,215,0)
CSS (%RGB)	:	rgb(80%,52%,24%)	CSS (%RGB)	:	rgb(100%,84%,0%)

Verlauf Hintergrundfarbwert #cd853f nach Schriftfarbwert #ffd700
#cd853f	#d49036	#db9c2d	#e2a824	#e9b31b	#f0bf12	#f7cb09	#ffd700
#cd853f	#d49036	#db9c2d	#e2a824	#e9b31b	#f0bf12	#f7cb09	#ffd700

Kombination von #cd853f und #ffd700
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. Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				#ffd700 ist nicht als Schriftfarbe auf Hintergrund #cd853f geeignet, weil sich die Helligkeit und Farben zu ähnlich sind. Die Ähnlichkeit der Farben #ffd700 und #cd853f beträgt 89.85%. Die Lesbarkeit dieser Kombination liegt damit bei 10.15%.

Hintergrundfarbwert #cd853f				Schriftfarbwert #ffd700
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#cd853f	#cd853f	#cd853f	#cd853f	#ffd700	#ffd700	#ffd700	#ffd700
#d4965a	#d4965a	#af7236	#af7236	#ffdc24	#ffdc24	#dab800	#dab800
#dba775	#dba775	#925f2d	#925f2d	#ffe248	#ffe248	#b69900	#b69900
#e2b991	#e2b991	#754c24	#754c24	#ffe86d	#ffe86d	#917a00	#917a00
#e9caac	#e9caac	#57391b	#57391b	#ffed91	#ffed91	#6d5c00	#6d5c00
#f0dcc8	#f0dcc8	#3a2612	#3a2612	#fff3b6	#fff3b6	#483d00	#483d00
#f7ede3	#f7ede3	#1d1309	#1d1309	#fff9da	#fff9da	#241e00	#241e00
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #cd853f und Farbwert #ffd700

Wechsel der Umrandung bei Hover bei Befehl dt

Die Rahmenfarbe soll sich von Farbwert #cd853f auf Farbwert #ffd700 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Darstellung von <dt> in Farbwert #cd853f vor.

In diesem Beispiel umranden wir <dt> mit einem 4 Pixel dicken, gefurchten Rahmen in Farbwert #cd853f.

<style type="text/css"><!--
  dt { border:4px groove #cd853f; }
//-->
</style>

Nun fordern wir, dass sich bei Hover die Rahmenfarbe zu #ffd700 ändert.

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

Weiteres zum Thema finden Sie in Listen und Glossare in HTML. Möglichkeiten vom hier gezeigten Tag dt sind in der HTML Referenz unter <dt> genau gezeigt.

Zebra-Effekt bei Tag td

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

<style type="text/css"><!--
  td.ungerade { 
    background-color:#cd853f;
  }
  td.gerade { 
    background-color: #ffd700;
  }
//-->
</style>

Diese CSS-Klassen werden dann abwechselnd genutzt.

<table>
<tr><td class="ungerade">Da~a</td><td class="gerade">Db~a</td><td class="ungerade">Dc~a</td></tr>
<tr><td class="ungerade">Da~b</td><td class="gerade">Db~b</td><td class="ungerade">Dc~b</td></tr>
<tr><td class="ungerade">Da~c</td><td class="gerade">Db~c</td><td class="ungerade">Dc~c</td></tr>
</table>

Weiteres zum Thema finden Sie in Tabellen in HTML. Einzelheiten des HTML-Tag td finden Sie in der HTML Referenz unter <td>.