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

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 #faf0e6
Detail	:	Hintergrund #ff8c00	Detail	:	Schrift #faf0e6
Farbwert	:	#ff8c00	Farbwert	:	#faf0e6
Farbe	:	darkorange	Farbe	:	linen
HTML	:	#ff8c00	HTML	:	#faf0e6
HTML (Wert)	:	#ff8c00	HTML (Wert)	:	#faf0e6
CSS	:	#ff8c00	CSS	:	#faf0e6
CSS (Wert)	:	#ff8c00	CSS (Wert)	:	#faf0e6
CSS (kürzest)	:	#ff8c00	CSS (kürzest)	:	#faf0e6
CSS (RGB)	:	rgb(255,140,0)	CSS (RGB)	:	rgb(250,240,230)
CSS (%RGB)	:	rgb(100%,54%,0%)	CSS (%RGB)	:	rgb(98%,94%,90%)

Verlauf Hintergrundfarbwert #ff8c00 nach Schriftfarbwert #faf0e6
#ff8c00	#fe9a20	#fda841	#fcb662	#fcc583	#fbd3a4	#fae1c5	#faf0e6
#ff8c00	#fe9a20	#fda841	#fcb662	#fcc583	#fbd3a4	#fae1c5	#faf0e6

Kombination von #ff8c00 und #faf0e6
Cras vestibulum tristique erat, ac interdum justo cursus in. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				#faf0e6 ist nicht als Schriftfarbe auf Hintergrund #ff8c00 geeignet. Weder der Helligkeitsunterschied noch der Farbunterschied sind geeignet. Die Ähnlichkeit der Farben #faf0e6 und #ff8c00 ergibt sich zu 90.12%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 9.88%.

Hintergrundfarbwert #ff8c00				Schriftfarbwert #faf0e6
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ff8c00	#ff8c00	#ff8c00	#ff8c00	#faf0e6	#faf0e6	#faf0e6	#faf0e6
#ff9c24	#ff9c24	#da7800	#da7800	#faf2e9	#faf2e9	#d6cdc5	#d6cdc5
#ffac48	#ffac48	#b66400	#b66400	#fbf4ed	#fbf4ed	#b2aba4	#b2aba4
#ffbd6d	#ffbd6d	#915000	#915000	#fcf6f0	#fcf6f0	#8e8983	#8e8983
#ffcd91	#ffcd91	#6d3c00	#6d3c00	#fcf8f4	#fcf8f4	#6b6662	#6b6662
#ffdeb6	#ffdeb6	#482800	#482800	#fdfaf7	#fdfaf7	#474441	#474441
#ffeeda	#ffeeda	#241400	#241400	#fefcfb	#fefcfb	#232220	#232220
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #ff8c00 und Farbwert #faf0e6

Wechsel der Umrandung bei Hover bei Tag ins

Die Rahmenfarbe soll sich von Farbwert #ff8c00 auf Farbwert #faf0e6 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Formatierung von <ins> in Farbwert #ff8c00 vor.

In diesem Beispiel umranden wir <ins> mit einem 2 Pixel dicken, gepunkteten Rahmen in Farbwert #ff8c00.

<style type="text/css"><!--
  ins { 
    border-style: dotted; 
    border-color: #ff8c00; 
    border-width: 2px;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Berührung mit der Maus die Rahmenfarbe auf #faf0e6 ändert.

<style type="text/css"><!--
  ins:hover { 
    border-color:#faf0e6;
  }
//-->
</style>

Möglichkeiten vom hier verwendeten Tag <ins>.

Zebra-Effekt mit Tag tr

Man spricht vom so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Dieser Effekt unterstützt das Auge, etwa die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ger und .ung für <tr> mit den Hintergrundfarben Farbwert #ff8c00 und Farbwert #faf0e6.

<style type="text/css"><!--
  tr.ger { 
    background-color: #ff8c00;
  }
  tr.ung { 
    background-color:#faf0e6;
  }
//-->
</style>

Diese Klassen werden dann abwechselnd genutzt.

<table>
<tr class="ger"><td>Ya~a</td><td>Yb~a</td><td>Yc~a</td></tr>
<tr class="ung"><td>Ya~b</td><td>Yb~b</td><td>Yc~b</td></tr>
<tr class="ger"><td>Ya~c</td><td>Yb~c</td><td>Yc~c</td></tr>
</table>

Weiteres zum Thema können Sie in Tabellen in HTML nachlesen. Der hier gezeigte Befehl tr ist in der HTML Referenz bei <tr> zusammengestellt.