Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #add8e6 und Farbe lightcyan

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 lightcyan
Detail	:	Hintergrund #add8e6	Detail	:	Schrift lightcyan
Farbwert	:	#add8e6	Farbe	:	lightcyan
Farbe	:	lightblue	Farbwert	:	#e0ffff
HTML	:	#add8e6	HTML	:	lightcyan
HTML (Wert)	:	#add8e6	HTML (Wert)	:	#e0ffff
CSS	:	#add8e6	CSS	:	lightcyan
CSS (Wert)	:	#add8e6	CSS (Wert)	:	#e0ffff
CSS (kürzest)	:	#add8e6	CSS (kürzest)	:	#e0ffff
CSS (RGB)	:	rgb(173,216,230)	CSS (RGB)	:	rgb(224,255,255)
CSS (%RGB)	:	rgb(67%,84%,90%)	CSS (%RGB)	:	rgb(87%,100%,100%)

Verlauf Hintergrundfarbwert #add8e6 nach Schriftfarbe lightcyan
#add8e6	#b4dde9	#bbe3ed	#c2e8f0	#caeef4	#d1f3f7	#d8f9fb	#e0ffff
#add8e6	#b4dde9	#bbe3ed	#c2e8f0	#caeef4	#d1f3f7	#d8f9fb	#e0ffff

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

Hintergrundfarbwert #add8e6				Schriftfarbe lightcyan
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#add8e6	#add8e6	#add8e6	#add8e6	#e0ffff	#e0ffff	#e0ffff	#e0ffff
#b8dde9	#b8dde9	#94b9c5	#94b9c5	#e4ffff	#e4ffff	#c0dada	#c0dada
#c4e3ed	#c4e3ed	#7b9aa4	#7b9aa4	#e8ffff	#e8ffff	#a0b6b6	#a0b6b6
#d0e8f0	#d0e8f0	#627b83	#627b83	#edffff	#edffff	#809191	#809191
#dbeef4	#dbeef4	#4a5c62	#4a5c62	#f1ffff	#f1ffff	#606d6d	#606d6d
#e7f3f7	#e7f3f7	#313d41	#313d41	#f6ffff	#f6ffff	#404848	#404848
#f3f9fb	#f3f9fb	#181e20	#181e20	#faffff	#faffff	#202424	#202424
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #add8e6 und Farbe lightcyan

Wechsel der Unterstreichung bei Hover bei Tag abbr

Die Unterstreichungsfarbe soll sich von Farbwert #add8e6 auf Farbe lightcyan ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Darstellung von <abbr> in Farbwert #add8e6 vor.

In diesem Beispiel unterstreichen wir <abbr> mit einem gefurchten Rahmen mit 4 Pixel Dicke in Farbwert #add8e6.

<style type="text/css"><!--
  abbr { 
    border-bottom-color: #add8e6; 
    border-bottom-width: 4px; 
    border-bottom-style: groove;
  }
//-->
</style>

Nun fordern wir, dass bei Mausberührung die Farbe der Unterstreichung auf lightcyan geändert wird.

<style type="text/css"><!--
  abbr: hover { 
    border-bottom-color: lightcyan;
  }
//-->
</style>

Die Idee ist dabei, verschiedene Formatierungen für Inhalt und Unterstreichung zu haben. Öfter sieht man dies bei Links. Der Text wird in einer Farbe dargestellt. Die Unterstreichung in einer anderen. Hierbei handelt es sich aber nicht um eine "wirkliche" Unterstreichung, der Text selbst hat keine Unterstreichung. Sie wird mit einem Rahmen simuliert und dieser ist unabhängig vom Text.

Einzelheiten vom Befehl abbr sind in der HTML Referenz unter <abbr> genau beschrieben.

Wechsel der Textfarbe bei Hover von Tag li

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

Z.B. legen wir Farbwert #add8e6 als Textfarbe von <li> fest. Zwar lassen wir die Hintergrundfarbe unverändert, setzen jedoch die Schriftart auf arial und setzen die Schriftgröße auf 13px.

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

Jetzt fordern wir, dass sich bei Mausberührung die Textfarbe auf lightcyan ändert.

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

Mehr zum Thema erfahren Sie in Listen und Glossare in HTML. Weiteres zum hier genutzten HTML-Befehl <li>.