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

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

Verlauf Hintergrundfarbe antiquewhite nach Schriftfarbe aquamarine
#faebd7	#e8edd6	#d6f0d6	#c5f3d5	#b3f6d5	#a2f9d4	#90fcd4	#7fffd4
#faebd7	#e8edd6	#d6f0d6	#c5f3d5	#b3f6d5	#a2f9d4	#90fcd4	#7fffd4

Kombination von antiquewhite und aquamarine
Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in.				aquamarine ist nicht als Schriftfarbe auf Hintergrund antiquewhite geeignet. Die Helligkeit und Farben sind zu ähnlich. Die Ähnlichkeit der Farben aquamarine und antiquewhite ergibt sich zu 95.02%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 4.98%.

Hintergrundfarbe antiquewhite				Schriftfarbe aquamarine
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#faebd7	#faebd7	#faebd7	#faebd7	#7fffd4	#7fffd4	#7fffd4	#7fffd4
#faeddc	#faeddc	#d6c9b8	#d6c9b8	#91ffda	#91ffda	#6cdab5	#6cdab5
#fbf0e2	#fbf0e2	#b2a799	#b2a799	#a3ffe0	#a3ffe0	#5ab697	#5ab697
#fcf3e8	#fcf3e8	#8e867a	#8e867a	#b5ffe6	#b5ffe6	#489179	#489179
#fcf6ed	#fcf6ed	#6b645c	#6b645c	#c8ffec	#c8ffec	#366d5a	#366d5a
#fdf9f3	#fdf9f3	#47433d	#47433d	#dafff2	#dafff2	#24483c	#24483c
#fefcf9	#fefcf9	#23211e	#23211e	#ecfff8	#ecfff8	#12241e	#12241e
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe antiquewhite und Farbe aquamarine

Zebra-Effekt von Befehl td

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, redet man von einem so genannten Zebra-Effekt. Der Effekt unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ung und .ger für <td> mit den Hintergrundfarben Farbe antiquewhite und Farbe aquamarine.

<style type="text/css"><!--
  td.ung { 
    background-color:antiquewhite;
  }
  td.ger { 
    background-color: aquamarine;
  }
//-->
</style>

Diese werden abwechselnd genutzt.

<table>
<tr><td class="ung">JA-A</td><td class="ger">JB-A</td><td class="ung">JC-A</td></tr>
<tr><td class="ung">JA-B</td><td class="ger">JB-B</td><td class="ung">JC-B</td></tr>
<tr><td class="ung">JA-C</td><td class="ger">JB-C</td><td class="ung">JC-C</td></tr>
</table>

Mehr zu td können Sie in Tabellen in HTML nachsehen. Einzelheiten vom HTML-Befehl td sind in der HTML Referenz unter <td> genau zusammengestellt.

Wechsel der Textfarbe bei Hover von HTML-Tag div

Ein Kontainer wird mit HTML-Tag <div> erzeugt. Diesen können Sie farblich gestalten und hervorheben.

Die Textfarbe soll sich von Farbe antiquewhite auf Farbe aquamarine ändern, wenn man mit der Maus auf <div> zeigt. Bereiten wir zunächst eine Formatierung von <div> in Farbe antiquewhite vor.

Wir legen als Beispiel Farbe antiquewhite als Textfarbe von <div> fest. Die Hintergrundfarbe ändern wir nicht. Die Schriftart setzen wir auf sans-serif und setzen die Größe der Schrift auf 13px.

<style type="text/css"><!--
  div { 
    font-size:13px; 
    font-family:sans-serif; 
    color:antiquewhite;
  }
//-->
</style>

Nun fordern wir, dass sich bei Hover die Textfarbe zu aquamarine ändert.

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

Die Beschreibung vom HTML-Tag div lesen Sie in der HTML Referenz unter <div>.