Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #ff8c00 und Farbe chocolate

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 #ff8c00			Schriftfarbe chocolate
Detail	:	Hintergrund #ff8c00	Detail	:	Schrift chocolate
Farbwert	:	#ff8c00	Farbe	:	chocolate
Farbe	:	darkorange	Farbwert	:	#d2691e
HTML	:	#ff8c00	HTML	:	chocolate
HTML (Wert)	:	#ff8c00	HTML (Wert)	:	#d2691e
CSS	:	#ff8c00	CSS	:	chocolate
CSS (Wert)	:	#ff8c00	CSS (Wert)	:	#d2691e
CSS (kürzest)	:	#ff8c00	CSS (kürzest)	:	#d2691e
CSS (RGB)	:	rgb(255,140,0)	CSS (RGB)	:	rgb(210,105,30)
CSS (%RGB)	:	rgb(100%,54%,0%)	CSS (%RGB)	:	rgb(82%,41%,11%)

Verlauf Hintergrundfarbwert #ff8c00 nach Schriftfarbe chocolate
#ff8c00	#f88704	#f28208	#eb7d0c	#e57811	#de7315	#d86e19	#d2691e
#ff8c00	#f88704	#f28208	#eb7d0c	#e57811	#de7315	#d86e19	#d2691e

Kombination von #ff8c00 und chocolate
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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante.				Auf Hintergrund #ff8c00 ist chocolate ungeeignet. Die Helligkeit und Farben sind sich zu ähnlich. Die Ähnlichkeit von chocolate und #ff8c00 ergibt sich zu 92.58%. Die Lesbarkeit dieser Farbkombination liegt damit bei 7.42%.

Hintergrundfarbwert #ff8c00				Schriftfarbe chocolate
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ff8c00	#ff8c00	#ff8c00	#ff8c00	#d2691e	#d2691e	#d2691e	#d2691e
#ff9c24	#ff9c24	#da7800	#da7800	#d87e3e	#d87e3e	#b45a19	#b45a19
#ffac48	#ffac48	#b66400	#b66400	#de935e	#de935e	#964b15	#964b15
#ffbd6d	#ffbd6d	#915000	#915000	#e5a97e	#e5a97e	#783c11	#783c11
#ffcd91	#ffcd91	#6d3c00	#6d3c00	#ebbe9e	#ebbe9e	#5a2d0c	#5a2d0c
#ffdeb6	#ffdeb6	#482800	#482800	#f2d4be	#f2d4be	#3c1e08	#3c1e08
#ffeeda	#ffeeda	#241400	#241400	#f8e9de	#f8e9de	#1e0f04	#1e0f04
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #ff8c00 und Farbe chocolate

Zebra-Effekt mit HTML-Tag tr

Man spricht von einem so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Dieser Effekt unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .even und .odd für <tr> mit unterschiedlichen Hintergrundfarben Farbwert #ff8c00 und Farbe chocolate.

<style type="text/css"><!--
  tr.even { 
    background-color:#ff8c00;
  }
  tr.odd { 
    background-color:chocolate;
  }
//-->
</style>

Diese Klassen werden dann abwechselnd genutzt.

<table>
<tr class="even"><td>K1-1</td><td>K2-1</td><td>K3-1</td></tr>
<tr class="odd"><td>K1-2</td><td>K2-2</td><td>K3-2</td></tr>
<tr class="even"><td>K1-3</td><td>K2-3</td><td>K3-3</td></tr>
</table>

Mehr zum Thema können Sie in Tabellen in HTML lesen. Einzelheiten vom HTML-Tag tr lesen Sie in der HTML Referenz unter <tr>.

Wechsel der Hintergrundfarbe bei Hover von Befehl code

Die Hintergrundfarbe soll sich von Farbwert #ff8c00 auf Farbe chocolate ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Darstellung von <code> in Farbwert #ff8c00 vor.

Wir legen z.B. Farbwert #ff8c00 als Hintergrundfarbe von <code> fest. Zwar ändern wir die Textfarbe nicht, ändern jedoch die Schriftart auf verdana:

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

Nun stellen wir ein, dass sich bei Mausberührung die Hintergrundfarbe auf chocolate ändert.

<style type="text/css"><!--
  code:hover { 
    background-color:chocolate;
  }
//-->
</style>

Mehr zum Thema können Sie in Text in HTML finden. Einzelheiten vom hier genutzten Tag code erfahren Sie in der HTML Referenz unter <code>.