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

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 #f0f8ff			Schriftfarbe slategray
Detail	:	Hintergrund #f0f8ff	Detail	:	Schrift slategray
Farbwert	:	#f0f8ff	Farbe	:	slategray
Farbe	:	aliceblue	Farbwert	:	#708090
HTML	:	#f0f8ff	HTML	:	slategray
HTML (Wert)	:	#f0f8ff	HTML (Wert)	:	#708090
CSS	:	#f0f8ff	CSS	:	slategray
CSS (Wert)	:	#f0f8ff	CSS (Wert)	:	#708090
CSS (kürzest)	:	#f0f8ff	CSS (kürzest)	:	#708090
CSS (RGB)	:	rgb(240,248,255)	CSS (RGB)	:	rgb(112,128,144)
CSS (%RGB)	:	rgb(94%,97%,100%)	CSS (%RGB)	:	rgb(43%,50%,56%)

Verlauf Hintergrundfarbwert #f0f8ff nach Schriftfarbe slategray
#f0f8ff	#dde6ef	#cbd5df	#b9c4cf	#a6b3bf	#94a2af	#82919f	#708090
#f0f8ff	#dde6ef	#cbd5df	#b9c4cf	#a6b3bf	#94a2af	#82919f	#708090

Kombination von #f0f8ff und slategray
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. Cras id velit ante.				slategray eignet sich nicht als Schriftfarbe auf Hintergrund #f0f8ff, weil weder der Helligkeitsunterschied noch der Farbunterschied ausreichend sind. Die Ähnlichkeit der Farben slategray und #f0f8ff beträgt 82.00%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 18.00%.

Hintergrundfarbwert #f0f8ff				Schriftfarbe slategray
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#f0f8ff	#f0f8ff	#f0f8ff	#f0f8ff	#708090	#708090	#708090	#708090
#f2f9ff	#f2f9ff	#cdd4da	#cdd4da	#84929f	#84929f	#606d7b	#606d7b
#f4faff	#f4faff	#abb1b6	#abb1b6	#98a4af	#98a4af	#505b66	#505b66
#f6fbff	#f6fbff	#898d91	#898d91	#adb6bf	#adb6bf	#404952	#404952
#f8fcff	#f8fcff	#666a6d	#666a6d	#c1c8cf	#c1c8cf	#30363d	#30363d
#fafdff	#fafdff	#444648	#444648	#d6dadf	#d6dadf	#202429	#202429
#fcfeff	#fcfeff	#222324	#222324	#eaecef	#eaecef	#101214	#101214
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #f0f8ff und Farbe slategray

Wechsel der Textfarbe bei Hover mit Tag caption

Die Textfarbe soll sich von Farbwert #f0f8ff auf Farbe slategray ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Formatierung von <caption> in Farbwert #f0f8ff vor.

Zum Beispiel setzen wir bei <caption> die Textfarbe auf Farbwert #f0f8ff:

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

Jetzt stellen wir ein, dass bei Berührung mit der Maus die Textfarbe auf slategray gesetzt wird.

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

Weiteres zu caption können Sie in Tabellen in HTML nachsehen. Zur Beschreibung des HTML-Tag <caption>.

Wechsel der Unterstreichung bei Hover mit HTML-Tag a

Einen Hyperlink setzt man mit HTML-Tag <a>. Er kann hervorgehoben und farblich gestaltet werden.

Die Unterstreichungsfarbe soll sich von Farbwert #f0f8ff auf Farbe slategray ändern, wenn man mit der Maus auf <a> zeigt. Bereiten wir zunächst die Formatierung von <a> in Farbwert #f0f8ff vor.

Hier unterstreichen wir <a> mit einem doppelten Rahmen mit 5 Pixel Dicke in Farbwert #f0f8ff.

<style type="text/css"><!--
  a { border-bottom:5px double #f0f8ff; }
//-->
</style>

Nun fordern wir, dass sich bei Mausberührung die Farbe der Unterstreichung zu slategray ändert.

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

Die Idee ist, unabhängige Formatierungen für Inhalt und Unterstreichung zu nutzen. Manchmal sehen Sie diesen Effekt bei Links. Der Text ist in einer Farbe. Die Unterstreichung in einer anderen. Es ist jedoch keine "wirkliche" Unterstreichung, der Text hat gar keine Unterstreichung. Sie wird mit einem Rahmen simuliert und dieser ist unabhängig vom Text.

Mehr zum Thema können Sie in Verweise und Protokolle in HTML nachlesen. Die Beschreibung des HTML-Tag a erfahren Sie in der HTML Referenz unter <a>.