Ressourcen: 120 HTML Farbnamen - Kombination von Farbe coral und Farbe antiquewhite

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 coral			Schriftfarbe antiquewhite
Detail	:	Hintergrund coral	Detail	:	Schrift antiquewhite
Farbe	:	coral	Farbe	:	antiquewhite
Farbwert	:	#ff7f50	Farbwert	:	#faebd7
HTML	:	coral	HTML	:	antiquewhite
HTML (Wert)	:	#ff7f50	HTML (Wert)	:	#faebd7
CSS	:	coral	CSS	:	antiquewhite
CSS (Wert)	:	#ff7f50	CSS (Wert)	:	#faebd7
CSS (kürzest)	:	#ff7f50	CSS (kürzest)	:	#faebd7
CSS (RGB)	:	rgb(255,127,80)	CSS (RGB)	:	rgb(250,235,215)
CSS (%RGB)	:	rgb(100%,49%,31%)	CSS (%RGB)	:	rgb(98%,92%,84%)

Verlauf Hintergrundfarbe coral nach Schriftfarbe antiquewhite
#ff7f50	#fe8e63	#fd9d76	#fcad89	#fcbc9d	#fbccb0	#fadbc3	#faebd7
#ff7f50	#fe8e63	#fd9d76	#fcad89	#fcbc9d	#fbccb0	#fadbc3	#faebd7

Kombination von coral und antiquewhite
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante. 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.				antiquewhite eignet sich nicht als Schriftfarbe auf Hintergrund coral. Sowohl Helligkeit als auch die Farben sind zu ähnlich. Die Ähnlichkeit der Farben antiquewhite und coral beträgt 89.84%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 10.16%.

Hintergrundfarbe coral				Schriftfarbe antiquewhite
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ff7f50	#ff7f50	#ff7f50	#ff7f50	#faebd7	#faebd7	#faebd7	#faebd7
#ff9169	#ff9169	#da6c44	#da6c44	#faeddc	#faeddc	#d6c9b8	#d6c9b8
#ffa382	#ffa382	#b65a39	#b65a39	#fbf0e2	#fbf0e2	#b2a799	#b2a799
#ffb59b	#ffb59b	#91482d	#91482d	#fcf3e8	#fcf3e8	#8e867a	#8e867a
#ffc8b4	#ffc8b4	#6d3622	#6d3622	#fcf6ed	#fcf6ed	#6b645c	#6b645c
#ffdacd	#ffdacd	#482416	#482416	#fdf9f3	#fdf9f3	#47433d	#47433d
#ffece6	#ffece6	#24120b	#24120b	#fefcf9	#fefcf9	#23211e	#23211e
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe coral und Farbe antiquewhite

Zebra-Effekt bei Tag td

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, redet man vom so genannten Zebra-Effekt. Er unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .even und .odd für <td> mit den Hintergrundfarben Farbe coral und Farbe antiquewhite.

<style type="text/css"><!--
  td.even { 
    background-color: coral;
  }
  td.odd { 
    background-color:antiquewhite;
  }
//-->
</style>

Diese werden abwechselnd verwendet.

<table>
<tr><td class="even">F1.1</td><td class="odd">F2.1</td><td class="even">F3.1</td></tr>
<tr><td class="even">F1.2</td><td class="odd">F2.2</td><td class="even">F3.2</td></tr>
<tr><td class="even">F1.3</td><td class="odd">F2.3</td><td class="even">F3.3</td></tr>
</table>

Weiteres zum Thema td lesen Sie in Tabellen in HTML. Die Beschreibung vom hier verwendeten HTML-Befehl td erfahren Sie in der HTML Referenz unter <td>.

Wechsel der Textfarbe bei Hover von Tag legend

Die Textfarbe soll sich von Farbe coral auf Farbe antiquewhite ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Formatierung von <legend> in Farbe coral vor.

Wir ändern zum Beispiel die Textfarbe von <legend> auf Farbe coral. Die Hintergrundfarbe lassen wir unverändert. Die Schriftart ändern wir auf monospace:

<style type="text/css"><!--
  legend { 
    font-family:monospace; 
    color:coral;
  }
//-->
</style>

Nun fordern wir, dass sich bei Mausberührung die Textfarbe auf antiquewhite ändert.

<style type="text/css"><!--
  legend: hover { 
    color: antiquewhite;
  }
//-->
</style>

Weiteres zum Thema finden Sie in Formulare in HTML. Die Beschreibung des hier genutzten HTML-Befehl legend lesen Sie in der HTML Referenz unter <legend>.