Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #add8e6 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.

Hintergrundfarbwert #add8e6			Schriftfarbe aquamarine
Detail	:	Hintergrund #add8e6	Detail	:	Schrift aquamarine
Farbwert	:	#add8e6	Farbe	:	aquamarine
Farbe	:	lightblue	Farbwert	:	#7fffd4
HTML	:	#add8e6	HTML	:	aquamarine
HTML (Wert)	:	#add8e6	HTML (Wert)	:	#7fffd4
CSS	:	#add8e6	CSS	:	aquamarine
CSS (Wert)	:	#add8e6	CSS (Wert)	:	#7fffd4
CSS (kürzest)	:	#add8e6	CSS (kürzest)	:	#7fffd4
CSS (RGB)	:	rgb(173,216,230)	CSS (RGB)	:	rgb(127,255,212)
CSS (%RGB)	:	rgb(67%,84%,90%)	CSS (%RGB)	:	rgb(49%,100%,83%)

Verlauf Hintergrundfarbwert #add8e6 nach Schriftfarbe aquamarine
#add8e6	#a6dde3	#9fe3e0	#99e8de	#92eedb	#8cf3d9	#85f9d6	#7fffd4
#add8e6	#a6dde3	#9fe3e0	#99e8de	#92eedb	#8cf3d9	#85f9d6	#7fffd4

Kombination von #add8e6 und aquamarine
Cras id velit ante. 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 vestibulum tristique erat, ac interdum justo cursus in.				aquamarine ist nicht als Schriftfarbe auf Hintergrund #add8e6 geeignet. Weder der Helligkeitsunterschied noch der Farbunterschied sind ausreichend. Die Ähnlichkeit von aquamarine und #add8e6 ergibt sich zu 94.05%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 5.95%.

Hintergrundfarbwert #add8e6				Schriftfarbe aquamarine
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#add8e6	#add8e6	#add8e6	#add8e6	#7fffd4	#7fffd4	#7fffd4	#7fffd4
#b8dde9	#b8dde9	#94b9c5	#94b9c5	#91ffda	#91ffda	#6cdab5	#6cdab5
#c4e3ed	#c4e3ed	#7b9aa4	#7b9aa4	#a3ffe0	#a3ffe0	#5ab697	#5ab697
#d0e8f0	#d0e8f0	#627b83	#627b83	#b5ffe6	#b5ffe6	#489179	#489179
#dbeef4	#dbeef4	#4a5c62	#4a5c62	#c8ffec	#c8ffec	#366d5a	#366d5a
#e7f3f7	#e7f3f7	#313d41	#313d41	#dafff2	#dafff2	#24483c	#24483c
#f3f9fb	#f3f9fb	#181e20	#181e20	#ecfff8	#ecfff8	#12241e	#12241e
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #add8e6 und Farbe aquamarine

Wechsel der Umrandung bei Hover bei HTML-Tag img

Die Rahmenfarbe soll sich von Farbwert #add8e6 auf Farbe aquamarine ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Darstellung von <img> in Farbwert #add8e6 vor.

In diesem Beispiel umranden wir <img> mit einem 2 Pixel dicken, gezahnten Rahmen in Farbwert #add8e6.

<style type="text/css"><!--
  img { border:2px ridge #add8e6; }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Hover die Rahmenfarbe auf aquamarine ändert.

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

Mehr zu img finden Sie in Grafik in HTML. Weiteres zum HTML-Tag img ist in der HTML Referenz bei <img> beschrieben.

Zebra-Effekt von Tag td

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, redet man von einem so genannten Zebra-Effekt. Dieser Effekt unterstützt das Auge zum Beispiel die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .odd und .even für <td> mit den Hintergrundfarben Farbwert #add8e6 und Farbe aquamarine.

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

Diese CSS-Klassen werden dann abwechselnd verwendet.

<table>
<tr><td class="odd">X1.1</td><td class="even">X2.1</td><td class="odd">X3.1</td></tr>
<tr><td class="odd">X1.2</td><td class="even">X2.2</td><td class="odd">X3.2</td></tr>
<tr><td class="odd">X1.3</td><td class="even">X2.3</td><td class="odd">X3.3</td></tr>
</table>

Mehr zu td lesen Sie in Tabellen in HTML. Mehr zum Tag <td>.