Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #ff8c00 und Farbwert #4169e1

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			Schriftfarbwert #4169e1
Detail	:	Hintergrund #ff8c00	Detail	:	Schrift #4169e1
Farbwert	:	#ff8c00	Farbwert	:	#4169e1
Farbe	:	darkorange	Farbe	:	royalblue
HTML	:	#ff8c00	HTML	:	#4169e1
HTML (Wert)	:	#ff8c00	HTML (Wert)	:	#4169e1
CSS	:	#ff8c00	CSS	:	#4169e1
CSS (Wert)	:	#ff8c00	CSS (Wert)	:	#4169e1
CSS (kürzest)	:	#ff8c00	CSS (kürzest)	:	#4169e1
CSS (RGB)	:	rgb(255,140,0)	CSS (RGB)	:	rgb(65,105,225)
CSS (%RGB)	:	rgb(100%,54%,0%)	CSS (%RGB)	:	rgb(25%,41%,88%)

Verlauf Hintergrundfarbwert #ff8c00 nach Schriftfarbwert #4169e1
#ff8c00	#e38720	#c88240	#ad7d60	#927880	#7773a0	#5c6ec0	#4169e1
#ff8c00	#e38720	#c88240	#ad7d60	#927880	#7773a0	#5c6ec0	#4169e1

Kombination von #ff8c00 und #4169e1
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit der Farben #4169e1 und #ff8c00 ergibt sich zu 90.10%. Die Lesbarkeit dieser Farbkombination liegt damit bei 9.90%. Auf Hintergrund #ff8c00 ist #4169e1 ungeeignet, weil die Helligkeit und Farben zu ähnlich sind.

Hintergrundfarbwert #ff8c00				Schriftfarbwert #4169e1
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ff8c00	#ff8c00	#ff8c00	#ff8c00	#4169e1	#4169e1	#4169e1	#4169e1
#ff9c24	#ff9c24	#da7800	#da7800	#5c7ee5	#5c7ee5	#375ac0	#375ac0
#ffac48	#ffac48	#b66400	#b66400	#7793e9	#7793e9	#2e4ba0	#2e4ba0
#ffbd6d	#ffbd6d	#915000	#915000	#92a9ed	#92a9ed	#253c80	#253c80
#ffcd91	#ffcd91	#6d3c00	#6d3c00	#adbef2	#adbef2	#1b2d60	#1b2d60
#ffdeb6	#ffdeb6	#482800	#482800	#c8d4f6	#c8d4f6	#121e40	#121e40
#ffeeda	#ffeeda	#241400	#241400	#e3e9fa	#e3e9fa	#090f20	#090f20
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #ff8c00 und Farbwert #4169e1

Zebra-Effekt von Befehl td

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, spricht man vom so genannten Zebra-Effekt. Der Effekt unterstützt das Auge zum Beispiel die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .odd und .even für <td> mit den Hintergrundfarben Farbwert #ff8c00 und Farbwert #4169e1.

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

Diese CSS-Klassen werden dann abwechselnd verwendet.

<table>
<tr><td class="odd">IA,A</td><td class="even">IB,A</td><td class="odd">IC,A</td></tr>
<tr><td class="odd">IA,B</td><td class="even">IB,B</td><td class="odd">IC,B</td></tr>
<tr><td class="odd">IA,C</td><td class="even">IB,C</td><td class="odd">IC,C</td></tr>
</table>

Mehr zum Thema können Sie in Tabellen in HTML erfahren. Der hier genutzte Tag td ist in der HTML Referenz unter <td> ausführlich gezeigt.

Wechsel der Textfarbe bei Hover von HTML-Befehl blockquote

Die Textfarbe soll sich von Farbwert #ff8c00 auf Farbwert #4169e1 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <blockquote> in Farbwert #ff8c00 vor.

Zum Beispiel legen wir bei <blockquote> die Textfarbe auf Farbwert #ff8c00 fest und setzen die Größe der Schrift auf 13pt:

<style type="text/css"><!--
  blockquote { 
    color: #ff8c00; 
    font-size: 13pt;
  }
//-->
</style>

Jetzt stellen wir ein, dass bei Berührung mit der Maus die Textfarbe auf #4169e1 geändert wird.

<style type="text/css"><!--
  blockquote:hover { 
    color:#4169e1;
  }
//-->
</style>

Weiteres zu blockquote lesen Sie in Blockorientierte Elemente in HTML. Möglichkeiten des HTML-Tag blockquote finden Sie in der HTML Referenz unter <blockquote>.