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

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			Schriftfarbe wheat
Detail	:	Hintergrund #daa520	Detail	:	Schrift wheat
Farbwert	:	#daa520	Farbe	:	wheat
Farbe	:	goldenrod	Farbwert	:	#f5deb3
HTML	:	#daa520	HTML	:	wheat
HTML (Wert)	:	#daa520	HTML (Wert)	:	#f5deb3
CSS	:	#daa520	CSS	:	wheat
CSS (Wert)	:	#daa520	CSS (Wert)	:	#f5deb3
CSS (kürzest)	:	#daa520	CSS (kürzest)	:	#f5deb3
CSS (RGB)	:	rgb(218,165,32)	CSS (RGB)	:	rgb(245,222,179)
CSS (%RGB)	:	rgb(85%,64%,12%)	CSS (%RGB)	:	rgb(96%,87%,70%)

Verlauf Hintergrundfarbwert #daa520 nach Schriftfarbe wheat
#daa520	#ddad35	#e1b54a	#e5bd5f	#e9c574	#edcd89	#f1d59e	#f5deb3
#daa520	#ddad35	#e1b54a	#e5bd5f	#e9c574	#edcd89	#f1d59e	#f5deb3

Kombination von #daa520 und wheat
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. 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.				Die Ähnlichkeit von wheat und #daa520 ergibt sich zu 91.89%. Die Lesbarkeit dieser Farbkombination liegt damit bei 8.11%. Auf Hintergrund #daa520 ist wheat ungeeignet, weil die Helligkeit und Farben zu ähnlich sind.

Hintergrundfarbwert #daa520				Schriftfarbe wheat
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#daa520	#daa520	#daa520	#daa520	#f5deb3	#f5deb3	#f5deb3	#f5deb3
#dfb13f	#dfb13f	#ba8d1b	#ba8d1b	#f6e2bd	#f6e2bd	#d2be99	#d2be99
#e4be5f	#e4be5f	#9b7516	#9b7516	#f7e7c8	#f7e7c8	#af9e7f	#af9e7f
#e9cb7f	#e9cb7f	#7c5e12	#7c5e12	#f9ecd3	#f9ecd3	#8c7e66	#8c7e66
#efd89f	#efd89f	#5d460d	#5d460d	#faf0de	#faf0de	#695f4c	#695f4c
#f4e5bf	#f4e5bf	#3e2f09	#3e2f09	#fcf5e9	#fcf5e9	#463f33	#463f33
#f9f2df	#f9f2df	#1f1704	#1f1704	#fdfaf4	#fdfaf4	#231f19	#231f19
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #daa520 und Farbe wheat

Zebra-Effekt von Befehl td

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, spricht man vom Zebra-Effekt. Der Effekt unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .even und .odd für <td> mit den Hintergrundfarben Farbwert #daa520 und Farbe wheat.

<style type="text/css"><!--
  td.even { 
    background-color: #daa520;
  }
  td.odd { 
    background-color:wheat;
  }
//-->
</style>

Diese werden abwechselnd genutzt.

<table>
<tr><td class="even">X1,1</td><td class="odd">X2,1</td><td class="even">X3,1</td></tr>
<tr><td class="even">X1,2</td><td class="odd">X2,2</td><td class="even">X3,2</td></tr>
<tr><td class="even">X1,3</td><td class="odd">X2,3</td><td class="even">X3,3</td></tr>
</table>

Mehr zu td können Sie in Tabellen in HTML nachsehen. Möglichkeiten vom HTML-Befehl td sind in der HTML Referenz unter <td> zusammengestellt.

Wechsel der Textfarbe bei Hover mit HTML-Befehl em

Die Textfarbe soll sich von Farbwert #daa520 auf Farbe wheat ändern, wenn man mit der Maus auf <em> zeigt. Bereiten wir zunächst eine Darstellung von <em> in Farbwert #daa520 vor.

Wir legen zum Beispiel Farbwert #daa520 als Textfarbe von <em> fest. Zwar ändern wir die Hintergrundfarbe nicht, setzen jedoch die Schriftart auf verdana.

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

Jetzt fordern wir, dass bei Hover die Textfarbe auf wheat geändert wird.

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

Mehr zum Thema können Sie in Text in HTML lesen. Weiteres zum hier gezeigten HTML-Befehl <em>.