Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #20b2aa und Farbwert #f0fff0

Netscape führte seinerzeit die websicheren Farben ein. Neben diesen, einem bestimmten Schema folgenden, Farbwerten, definierte man noch 120 Werte und ordnete ihnen Namen zu. Zusammen mit den 17 Standard-HTML-Farben, die ebenfalls Namen haben, ergeben sich so 137 HTML Farbnamen.

Hintergrundfarbwert #20b2aa			Schriftfarbwert #f0fff0
Detail	:	Hintergrund #20b2aa	Detail	:	Schrift #f0fff0
Farbwert	:	#20b2aa	Farbwert	:	#f0fff0
Farbe	:	lightseagreen	Farbe	:	honeydew
HTML	:	#20b2aa	HTML	:	#f0fff0
HTML (Wert)	:	#20b2aa	HTML (Wert)	:	#f0fff0
CSS	:	#20b2aa	CSS	:	#f0fff0
CSS (Wert)	:	#20b2aa	CSS (Wert)	:	#f0fff0
CSS (kürzest)	:	#20b2aa	CSS (kürzest)	:	#f0fff0
CSS (RGB)	:	rgb(32,178,170)	CSS (RGB)	:	rgb(240,255,240)
CSS (%RGB)	:	rgb(12%,69%,66%)	CSS (%RGB)	:	rgb(94%,100%,94%)

Verlauf Hintergrundfarbwert #20b2aa nach Schriftfarbwert #f0fff0
#20b2aa	#3dbdb4	#5bc8be	#79d3c8	#96ded2	#b4e9dc	#d2f4e6	#f0fff0
#20b2aa	#3dbdb4	#5bc8be	#79d3c8	#96ded2	#b4e9dc	#d2f4e6	#f0fff0

Kombination von #20b2aa und #f0fff0
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				Die Ähnlichkeit der Farben #f0fff0 und #20b2aa beträgt 87.95%. Die Lesbarkeit dieser Kombination liegt damit bei 12.05%. #f0fff0 ist nicht als Schriftfarbe auf Hintergrund #20b2aa geeignet, weil die Unterschiede in der Helligkeit und Farbe unzureichend sind.

Hintergrundfarbwert #20b2aa				Schriftfarbwert #f0fff0
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#20b2aa	#20b2aa	#20b2aa	#20b2aa	#f0fff0	#f0fff0	#f0fff0	#f0fff0
#3fbdb6	#3fbdb6	#1b9891	#1b9891	#f2fff2	#f2fff2	#cddacd	#cddacd
#5fc8c2	#5fc8c2	#167f79	#167f79	#f4fff4	#f4fff4	#abb6ab	#abb6ab
#7fd3ce	#7fd3ce	#126561	#126561	#f6fff6	#f6fff6	#899189	#899189
#9fdeda	#9fdeda	#0d4c48	#0d4c48	#f8fff8	#f8fff8	#666d66	#666d66
#bfe9e6	#bfe9e6	#093230	#093230	#fafffa	#fafffa	#444844	#444844
#dff4f2	#dff4f2	#041918	#041918	#fcfffc	#fcfffc	#222422	#222422
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #20b2aa und Farbwert #f0fff0

Wechsel der Hintergrundfarbe bei Hover mit Tag dd

Die Hintergrundfarbe soll sich von Farbwert #20b2aa auf Farbwert #f0fff0 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Formatierung von <dd> in Farbwert #20b2aa vor.

Wir legen hier bei <dd> die Hintergrundfarbe auf Farbwert #20b2aa fest. Die Textfarbe ändern wir nicht, ändern jedoch die Schriftart auf arial. Die Größe der Schrift vergrößern wir auf 113%:

<style type="text/css"><!--
  dd { 
    background-color: #20b2aa; 
    font-size: 113%; 
    font-family: arial;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Mausberührung die Hintergrundfarbe auf #f0fff0 ändert.

<style type="text/css"><!--
  dd: hover { 
    background-color: #f0fff0;
  }
//-->
</style>

Weiteres zum Thema können Sie in Listen und Glossare in HTML lesen. Die Beschreibung des hier gezeigten HTML-Tag dd erfahren Sie in der HTML Referenz unter <dd>.

Wechsel der Textfarbe bei Hover bei Befehl li

Die Textfarbe soll sich von Farbwert #20b2aa auf Farbwert #f0fff0 ändern, wenn man mit der Maus auf <li> zeigt. Bereiten wir zunächst eine Darstellung von <li> in Farbwert #20b2aa vor.

Wir legen z.B. bei <li> die Textfarbe auf Farbwert #20b2aa fest. Die Hintergrundfarbe verändern wir nicht. Die Schriftart ändern wir auf arial und ändern die Größe der Schrift auf 13px.

<style type="text/css"><!--
  li { 
    font-family: arial; 
    font-size: 13px; 
    color: #20b2aa;
  }
//-->
</style>

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

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

Weiteres zum Thema können Sie in Listen und Glossare in HTML nachsehen. Möglichkeiten des HTML-Tag <li>.