Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #daa520 und Farbwert #db7093

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 #daa520			Schriftfarbwert #db7093
Detail	:	Hintergrund #daa520	Detail	:	Schrift #db7093
Farbwert	:	#daa520	Farbwert	:	#db7093
Farbe	:	goldenrod	Farbe	:	palevioletred
HTML	:	#daa520	HTML	:	#db7093
HTML (Wert)	:	#daa520	HTML (Wert)	:	#db7093
CSS	:	#daa520	CSS	:	#db7093
CSS (Wert)	:	#daa520	CSS (Wert)	:	#db7093
CSS (kürzest)	:	#daa520	CSS (kürzest)	:	#db7093
CSS (RGB)	:	rgb(218,165,32)	CSS (RGB)	:	rgb(219,112,147)
CSS (%RGB)	:	rgb(85%,64%,12%)	CSS (%RGB)	:	rgb(85%,43%,57%)

Verlauf Hintergrundfarbwert #daa520 nach Schriftfarbwert #db7093
#daa520	#da9d30	#da9540	#da8e51	#da8661	#da7f72	#da7782	#db7093
#daa520	#da9d30	#da9540	#da8e51	#da8661	#da7f72	#da7782	#db7093

Kombination von #daa520 und #db7093
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 id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit von #db7093 und #daa520 beträgt 93.38%. Die Lesbarkeit dieser Kombination ergibt sich zu 6.62%. #db7093 eignet sich nicht als Schriftfarbe auf Hintergrund #daa520. Die Unterschiede in der Helligkeit und Farbe sind zu gering.

Hintergrundfarbwert #daa520				Schriftfarbwert #db7093
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#daa520	#daa520	#daa520	#daa520	#db7093	#db7093	#db7093	#db7093
#dfb13f	#dfb13f	#ba8d1b	#ba8d1b	#e084a2	#e084a2	#bb607e	#bb607e
#e4be5f	#e4be5f	#9b7516	#9b7516	#e598b1	#e598b1	#9c5069	#9c5069
#e9cb7f	#e9cb7f	#7c5e12	#7c5e12	#eaadc1	#eaadc1	#7d4054	#7d4054
#efd89f	#efd89f	#5d460d	#5d460d	#efc1d0	#efc1d0	#5d303f	#5d303f
#f4e5bf	#f4e5bf	#3e2f09	#3e2f09	#f4d6e0	#f4d6e0	#3e202a	#3e202a
#f9f2df	#f9f2df	#1f1704	#1f1704	#f9eaef	#f9eaef	#1f1015	#1f1015
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #daa520 und Farbwert #db7093

Wechsel der Unterstreichung bei Hover mit Tag caption

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

Beispielsweise unterstreichen wir <caption> mit Hilfe eines gepunkteten Rahmens mit 1 Pixel Dicke in Farbwert #daa520.

<style type="text/css"><!--
  caption { 
    border-bottom-style: dotted; 
    border-bottom-width: 1px; 
    border-bottom-color: #daa520;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Mausberührung die Farbe der Unterstreichung auf #db7093 ändert.

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

Die Idee ist, verschiedene Formatierungen für Inhalt und Unterstreichung zu nutzen. Öfter sieht man das bei Verweisen. Der Text ist in einer Farbe. Die Unterstreichung in einer anderen. Hierbei handelt es sich jedoch nicht um eine "wirkliche" Unterstreichung, der Text selbst ist gar nicht unterstrichen. Sie wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Weiteres zum Thema caption können Sie in Tabellen in HTML nachsehen. Weiteres zum hier genutzten Tag caption ist in der HTML Referenz unter <caption> ausführlich beschrieben.

Zebra-Effekt von HTML-Tag td

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, redet man von einem Zebra-Effekt. Der Effekt unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ungerade und .gerade für <td> mit unterschiedlichen Hintergrundfarben Farbwert #daa520 und Farbwert #db7093.

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

Diese werden abwechselnd verwendet.

<table>
<tr><td class="ungerade">VA,A</td><td class="gerade">VB,A</td><td class="ungerade">VC,A</td></tr>
<tr><td class="ungerade">VA,B</td><td class="gerade">VB,B</td><td class="ungerade">VC,B</td></tr>
<tr><td class="ungerade">VA,C</td><td class="gerade">VB,C</td><td class="ungerade">VC,C</td></tr>
</table>

Weiteres zu td können Sie in Tabellen in HTML erfahren. Der HTML-Befehl td ist in der HTML Referenz unter <td> gezeigt.