Ressourcen: 120 HTML Farbnamen - Kombination von Farbe darkslateblue und Farbwert #afeeee

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.

Hintergrundfarbe darkslateblue			Schriftfarbwert #afeeee
Detail	:	Hintergrund darkslateblue	Detail	:	Schrift #afeeee
Farbe	:	darkslateblue	Farbwert	:	#afeeee
Farbwert	:	#483d8b	Farbe	:	paleturquoise
HTML	:	darkslateblue	HTML	:	#afeeee
HTML (Wert)	:	#483d8b	HTML (Wert)	:	#afeeee
CSS	:	darkslateblue	CSS	:	#afeeee
CSS (Wert)	:	#483d8b	CSS (Wert)	:	#afeeee
CSS (kürzest)	:	#483d8b	CSS (kürzest)	:	#afeeee
CSS (RGB)	:	rgb(72,61,139)	CSS (RGB)	:	rgb(175,238,238)
CSS (%RGB)	:	rgb(28%,23%,54%)	CSS (%RGB)	:	rgb(68%,93%,93%)

Verlauf Hintergrundfarbe darkslateblue nach Schriftfarbwert #afeeee
#483d8b	#565699	#656fa7	#7488b5	#82a2c3	#91bbd1	#a0d4df	#afeeee
#483d8b	#565699	#656fa7	#7488b5	#82a2c3	#91bbd1	#a0d4df	#afeeee

Kombination von darkslateblue und #afeeee
Cras vestibulum tristique erat, ac interdum justo cursus in. 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. Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				Die Ähnlichkeit der Farben #afeeee und darkslateblue beträgt 66.51%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 33.49%. Auf Hintergrund darkslateblue ist #afeeee ungeeignet. Zwar ist der Helligkeitsunterschied ausreichend, doch die Farben selbst sind zu ähnlich.

Hintergrundfarbe darkslateblue				Schriftfarbwert #afeeee
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#483d8b	#483d8b	#483d8b	#483d8b	#afeeee	#afeeee	#afeeee	#afeeee
#62589b	#62589b	#3d3477	#3d3477	#baf0f0	#baf0f0	#96cccc	#96cccc
#7c74ac	#7c74ac	#332b63	#332b63	#c5f2f2	#c5f2f2	#7daaaa	#7daaaa
#9690bc	#9690bc	#29224f	#29224f	#d1f5f5	#d1f5f5	#648888	#648888
#b0abcd	#b0abcd	#1e1a3b	#1e1a3b	#dcf7f7	#dcf7f7	#4b6666	#4b6666
#cac7dd	#cac7dd	#141127	#141127	#e8fafa	#e8fafa	#324444	#324444
#e4e3ee	#e4e3ee	#0a0813	#0a0813	#f3fcfc	#f3fcfc	#192222	#192222
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe darkslateblue und Farbwert #afeeee

Wechsel der Unterstreichung bei Hover mit HTML-Tag legend

Die Unterstreichungsfarbe soll sich von Farbe darkslateblue auf Farbwert #afeeee ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <legend> in Farbe darkslateblue vor.

Hier unterstreichen wir <legend> mit Hilfe eines doppelten Rahmens mit 1 Pixel Dicke in Farbe darkslateblue.

<style type="text/css"><!--
  legend { border-bottom:1px double darkslateblue; }
//-->
</style>

Nun stellen wir ein, dass sich bei Berührung mit der Maus die Unterstreichungsfarbe auf #afeeee ändert.

<style type="text/css"><!--
  legend: hover { 
    border-bottom-color: #afeeee;
  }
//-->
</style>

Die Idee ist hierbei, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu verwenden. Manchmal sieht man dies bei Hyperlinks. Der Text ist in einer Farbe. Und die Unterstreichung in einer anderen. Hierbei handelt es sich jedoch nicht um eine "wirkliche" Unterstreichung, der Text selbst hat überhaupt keine Unterstreichung. Sie wird mit einem Rahmen simuliert und dieser ist unabhängig vom Text.

Mehr zu legend können Sie in Formulare in HTML nachlesen. Weiteres zum hier genutzten Tag legend lesen Sie in der HTML Referenz unter <legend>.

Füllen und Umranden bei Tag p

Hier umranden wir <p> mit einem . Die Hintergrundfarbe für <p> setzen wir entsprechend auf Farbe darkslateblue. Mit HTML ist das nicht möglich. Daher verwenden wir hier CSS zur Formatierung.

<style type="text/css"><!--
  p { 
    border-color: #afeeee; 
    background-color: darkslateblue; 
    border-style: inset; 
    border-width: 2px;
  }
//-->
</style>

Mehr zum Thema können Sie in Grundlegende Gestaltungselemente in HTML nachlesen. Mehr zum hier genutzten HTML-Befehl p finden Sie in der HTML Referenz unter <p>.