Ressourcen: 120 HTML Farbnamen - Kombination von Farbe floralwhite und Farbwert #ffa500

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 floralwhite			Schriftfarbwert #ffa500
Detail	:	Hintergrund floralwhite	Detail	:	Schrift #ffa500
Farbe	:	floralwhite	Farbwert	:	#ffa500
Farbwert	:	#fffaf0	Farbe	:	orange
HTML	:	floralwhite	HTML	:	#ffa500
HTML (Wert)	:	#fffaf0	HTML (Wert)	:	#ffa500
CSS	:	floralwhite	CSS	:	#ffa500
CSS (Wert)	:	#fffaf0	CSS (Wert)	:	#ffa500
CSS (kürzest)	:	#fffaf0	CSS (kürzest)	:	#ffa500
CSS (RGB)	:	rgb(255,250,240)	CSS (RGB)	:	rgb(255,165,0)
CSS (%RGB)	:	rgb(100%,98%,94%)	CSS (%RGB)	:	rgb(100%,64%,0%)

Verlauf Hintergrundfarbe floralwhite nach Schriftfarbwert #ffa500
#fffaf0	#ffedcd	#ffe1ab	#ffd589	#ffc966	#ffbd44	#ffb122	#ffa500
#fffaf0	#ffedcd	#ffe1ab	#ffd589	#ffc966	#ffbd44	#ffb122	#ffa500

Kombination von floralwhite und #ffa500
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.				#ffa500 eignet sich nicht als Schriftfarbe auf Hintergrund floralwhite. Die Helligkeit und Farben sind sich zu ähnlich. Die Ähnlichkeit der Farben #ffa500 und floralwhite beträgt 90.96%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 9.04%.

Hintergrundfarbe floralwhite				Schriftfarbwert #ffa500
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#fffaf0	#fffaf0	#fffaf0	#fffaf0	#ffa500	#ffa500	#ffa500	#ffa500
#fffaf2	#fffaf2	#dad6cd	#dad6cd	#ffb124	#ffb124	#da8d00	#da8d00
#fffbf4	#fffbf4	#b6b2ab	#b6b2ab	#ffbe48	#ffbe48	#b67500	#b67500
#fffcf6	#fffcf6	#918e89	#918e89	#ffcb6d	#ffcb6d	#915e00	#915e00
#fffcf8	#fffcf8	#6d6b66	#6d6b66	#ffd891	#ffd891	#6d4600	#6d4600
#fffdfa	#fffdfa	#484744	#484744	#ffe5b6	#ffe5b6	#482f00	#482f00
#fffefc	#fffefc	#242322	#242322	#fff2da	#fff2da	#241700	#241700
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe floralwhite und Farbwert #ffa500

Zebra-Effekt von HTML-Befehl td

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, redet man von einem so genannten Zebra-Effekt. Der Effekt unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .gerade und .ungerade für <td> mit den Hintergrundfarben Farbe floralwhite und Farbwert #ffa500.

<style type="text/css"><!--
  td.gerade { 
    background-color: floralwhite;
  }
  td.ungerade { 
    background-color: #ffa500;
  }
//-->
</style>

Diese Klassen werden abwechselnd angewendet.

<table>
<tr><td class="gerade">A1,1</td><td class="ungerade">A2,1</td><td class="gerade">A3,1</td></tr>
<tr><td class="gerade">A1,2</td><td class="ungerade">A2,2</td><td class="gerade">A3,2</td></tr>
<tr><td class="gerade">A1,3</td><td class="ungerade">A2,3</td><td class="gerade">A3,3</td></tr>
</table>

Weiteres zum Thema finden Sie in Tabellen in HTML. Weiteres zum hier genutzten HTML-Befehl td ist in der HTML Referenz bei <td> gezeigt.

Wechsel der Textfarbe bei Hover von Befehl tr

Die Textfarbe soll sich von Farbe floralwhite auf Farbwert #ffa500 ändern, wenn man mit der Maus auf <tr> zeigt. Bereiten wir zunächst die Darstellung von <tr> in Farbe floralwhite vor.

Wir legen für dieses Beispiel die Textfarbe von <tr> auf Farbe floralwhite fest. Die Hintergrundfarbe behalten wir bei, ändern jedoch die Schriftart auf sans-serif und setzen die Größe der Schrift auf 11px:

<style type="text/css"><!--
  tr { 
    color: floralwhite; 
    font-size: 11px; 
    font-family: sans-serif;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Mausberührung die Textfarbe zu #ffa500 ändert.

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

Weiteres zum Thema können Sie in Tabellen in HTML erfahren. Mehr zum hier verwendeten HTML-Befehl tr erfahren Sie in der HTML Referenz unter <tr>.