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

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.

Hintergrundfarbe cadetblue			Schriftfarbwert #ff8c00
Detail	:	Hintergrund cadetblue	Detail	:	Schrift #ff8c00
Farbe	:	cadetblue	Farbwert	:	#ff8c00
Farbwert	:	#5f9ea0	Farbe	:	darkorange
HTML	:	cadetblue	HTML	:	#ff8c00
HTML (Wert)	:	#5f9ea0	HTML (Wert)	:	#ff8c00
CSS	:	cadetblue	CSS	:	#ff8c00
CSS (Wert)	:	#5f9ea0	CSS (Wert)	:	#ff8c00
CSS (kürzest)	:	#5f9ea0	CSS (kürzest)	:	#ff8c00
CSS (RGB)	:	rgb(95,158,160)	CSS (RGB)	:	rgb(255,140,0)
CSS (%RGB)	:	rgb(37%,61%,62%)	CSS (%RGB)	:	rgb(100%,54%,0%)

Verlauf Hintergrundfarbe cadetblue nach Schriftfarbwert #ff8c00
#5f9ea0	#759b89	#8c9872	#a3965b	#ba9344	#d1912d	#e88e16	#ff8c00
#5f9ea0	#759b89	#8c9872	#a3965b	#ba9344	#d1912d	#e88e16	#ff8c00

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

Hintergrundfarbe cadetblue				Schriftfarbwert #ff8c00
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#5f9ea0	#5f9ea0	#5f9ea0	#5f9ea0	#ff8c00	#ff8c00	#ff8c00	#ff8c00
#75abad	#75abad	#518789	#518789	#ff9c24	#ff9c24	#da7800	#da7800
#8cb9bb	#8cb9bb	#437072	#437072	#ffac48	#ffac48	#b66400	#b66400
#a3c7c8	#a3c7c8	#365a5b	#365a5b	#ffbd6d	#ffbd6d	#915000	#915000
#bad5d6	#bad5d6	#284344	#284344	#ffcd91	#ffcd91	#6d3c00	#6d3c00
#d1e3e3	#d1e3e3	#1b2d2d	#1b2d2d	#ffdeb6	#ffdeb6	#482800	#482800
#e8f1f1	#e8f1f1	#0d1616	#0d1616	#ffeeda	#ffeeda	#241400	#241400
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe cadetblue und Farbwert #ff8c00

Wechsel der Textfarbe bei Hover von Tag blockquote

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

Zum Beispiel legen wir die Textfarbe von <blockquote> auf Farbe cadetblue fest. Zwar behalten wir die Hintergrundfarbe bei, ändern jedoch die Schriftart auf verdana und vergrößern die Schriftgröße auf 129%:

<style type="text/css"><!--
  blockquote { 
    font-size: 129%; 
    color: cadetblue; 
    font-family: verdana;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Hover die Textfarbe auf #ff8c00 ändert.

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

Weiteres zum Thema erfahren Sie in Blockorientierte Elemente in HTML. Möglichkeiten vom HTML-Tag blockquote finden Sie in der HTML Referenz unter <blockquote>.

Zebra-Effekt bei Tag tr

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, redet man von einem so genannten Zebra-Effekt. Er unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .odd und .even für <tr> mit unterschiedlichen Hintergrundfarben Farbe cadetblue und Farbwert #ff8c00.

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

Diese CSS-Klassen werden dann abwechselnd angewendet.

<table>
<tr class="odd"><td><tt>a.a</td><td></tt>b.a</td><td><tt>c.a</td></tr>
<tr class="even"><td></tt>a.b</td><td><tt>b.b</td><td></tt>c.b</td></tr>
<tr class="odd"><td><tt>a.c</td><td></tt>b.c</td><td>@c.c</td></tr>
</table>

Weiteres zum Thema tr finden Sie in Tabellen in HTML. Einzelheiten des Tag tr sind in der HTML Referenz bei <tr> genau zusammengestellt.