Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #add8e6 und Farbwert #f0f8ff

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 #add8e6			Schriftfarbwert #f0f8ff
Detail	:	Hintergrund #add8e6	Detail	:	Schrift #f0f8ff
Farbwert	:	#add8e6	Farbwert	:	#f0f8ff
Farbe	:	lightblue	Farbe	:	aliceblue
HTML	:	#add8e6	HTML	:	#f0f8ff
HTML (Wert)	:	#add8e6	HTML (Wert)	:	#f0f8ff
CSS	:	#add8e6	CSS	:	#f0f8ff
CSS (Wert)	:	#add8e6	CSS (Wert)	:	#f0f8ff
CSS (kürzest)	:	#add8e6	CSS (kürzest)	:	#f0f8ff
CSS (RGB)	:	rgb(173,216,230)	CSS (RGB)	:	rgb(240,248,255)
CSS (%RGB)	:	rgb(67%,84%,90%)	CSS (%RGB)	:	rgb(94%,97%,100%)

Verlauf Hintergrundfarbwert #add8e6 nach Schriftfarbwert #f0f8ff
#add8e6	#b6dce9	#c0e1ed	#c9e5f0	#d3eaf4	#dceef7	#e6f3fb	#f0f8ff
#add8e6	#b6dce9	#c0e1ed	#c9e5f0	#d3eaf4	#dceef7	#e6f3fb	#f0f8ff

Kombination von #add8e6 und #f0f8ff
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. 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.				#f0f8ff ist nicht als Schriftfarbe auf Hintergrund #add8e6 geeignet, da sich sowohl Helligkeit als auch die Farben zu ähnlich sind. Die Ähnlichkeit der Farben #f0f8ff und #add8e6 ergibt sich zu 93.22%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 6.78%.

Hintergrundfarbwert #add8e6				Schriftfarbwert #f0f8ff
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#add8e6	#add8e6	#add8e6	#add8e6	#f0f8ff	#f0f8ff	#f0f8ff	#f0f8ff
#b8dde9	#b8dde9	#94b9c5	#94b9c5	#f2f9ff	#f2f9ff	#cdd4da	#cdd4da
#c4e3ed	#c4e3ed	#7b9aa4	#7b9aa4	#f4faff	#f4faff	#abb1b6	#abb1b6
#d0e8f0	#d0e8f0	#627b83	#627b83	#f6fbff	#f6fbff	#898d91	#898d91
#dbeef4	#dbeef4	#4a5c62	#4a5c62	#f8fcff	#f8fcff	#666a6d	#666a6d
#e7f3f7	#e7f3f7	#313d41	#313d41	#fafdff	#fafdff	#444648	#444648
#f3f9fb	#f3f9fb	#181e20	#181e20	#fcfeff	#fcfeff	#222324	#222324
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #add8e6 und Farbwert #f0f8ff

Wechsel der Textfarbe bei Hover bei Tag q

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

Wir legen in diesem Beispiel bei <q> die Textfarbe auf Farbwert #add8e6 fest. Zwar lassen wir die Hintergrundfarbe unverändert, setzen jedoch die Schriftart auf monospace und verkleinern die Größe der Schrift auf 86%:

<style type="text/css"><!--
  q { 
    color:#add8e6; 
    font-size:86%; 
    font-family:monospace;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Mausberührung die Textfarbe zu #f0f8ff ändert.

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

Möglichkeiten des Tag q erfahren Sie in der HTML Referenz unter <q>.

Wechsel der Hintergrundfarbe bei Hover von HTML-Tag pre

Die Hintergrundfarbe soll sich von Farbwert #add8e6 auf Farbwert #f0f8ff ändern, wenn man mit der Maus auf <pre> zeigt. Bereiten wir zunächst eine Formatierung von <pre> in Farbwert #add8e6 vor.

Wir legen hier bei <pre> die Hintergrundfarbe auf Farbwert #add8e6 fest.

<style type="text/css"><!--
  pre { 
    background-color: #add8e6;
  }
//-->
</style>

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

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

Mehr zum Thema finden Sie in Blockorientierte Elemente in HTML. Weiteres zum HTML-Tag pre ist in der HTML Referenz unter <pre> ausführlich gezeigt.