Ressourcen: 137 HTML Farbnamen - Kombination von Farbe mediumslateblue und Farbe deeppink

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.

Hintergrundfarbe mediumslateblue			Schriftfarbe deeppink
Detail	:	Hintergrund mediumslateblue	Detail	:	Schrift deeppink
Farbe	:	mediumslateblue	Farbe	:	deeppink
Farbwert	:	#7b68ee	Farbwert	:	#ff1493
HTML	:	mediumslateblue	HTML	:	deeppink
HTML (Wert)	:	#7b68ee	HTML (Wert)	:	#ff1493
CSS	:	mediumslateblue	CSS	:	deeppink
CSS (Wert)	:	#7b68ee	CSS (Wert)	:	#ff1493
CSS (kürzest)	:	#7b68ee	CSS (kürzest)	:	#ff1493
CSS (RGB)	:	rgb(123,104,238)	CSS (RGB)	:	rgb(255,20,147)
CSS (%RGB)	:	rgb(48%,40%,93%)	CSS (%RGB)	:	rgb(100%,7%,57%)

Verlauf Hintergrundfarbe mediumslateblue nach Schriftfarbe deeppink
#7b68ee	#8d5ce1	#a050d4	#b344c7	#c638ba	#d92cad	#ec20a0	#ff1493
#7b68ee	#8d5ce1	#a050d4	#b344c7	#c638ba	#d92cad	#ec20a0	#ff1493

Kombination von mediumslateblue und deeppink
Cras vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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.				Die Ähnlichkeit der Farben deeppink und mediumslateblue beträgt 94.56%. Die Lesbarkeit dieser Farbkombination liegt damit bei 5.44%. deeppink ist nicht als Schriftfarbe auf Hintergrund mediumslateblue geeignet. Die Helligkeit und Farben sind zu ähnlich.

Hintergrundfarbe mediumslateblue				Schriftfarbe deeppink
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#7b68ee	#7b68ee	#7b68ee	#7b68ee	#ff1493	#ff1493	#ff1493	#ff1493
#8d7df0	#8d7df0	#6959cc	#6959cc	#ff35a2	#ff35a2	#da117e	#da117e
#a093f2	#a093f2	#574aaa	#574aaa	#ff57b1	#ff57b1	#b60e69	#b60e69
#b3a8f5	#b3a8f5	#463b88	#463b88	#ff78c1	#ff78c1	#910b54	#910b54
#c6bef7	#c6bef7	#342c66	#342c66	#ff9ad0	#ff9ad0	#6d083f	#6d083f
#d9d3fa	#d9d3fa	#231d44	#231d44	#ffbbe0	#ffbbe0	#48052a	#48052a
#ece9fc	#ece9fc	#110e22	#110e22	#ffddef	#ffddef	#240215	#240215
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe mediumslateblue und Farbe deeppink

Wechsel der Hintergrundfarbe bei Hover mit Tag span

Die Hintergrundfarbe soll sich von Farbe mediumslateblue auf Farbe deeppink ändern, wenn man mit der Maus auf <span> zeigt. Wir bereiten zunächst die Darstellung von <span> in Farbe mediumslateblue vor.

Zum Beispiel legen wir bei <span> die Hintergrundfarbe auf Farbe mediumslateblue fest. Zwar behalten wir die Textfarbe bei, ändern jedoch die Schriftart auf courier new. Die Größe der Schrift ändern wir auf 13px:

<style type="text/css"><!--
  span { 
    background-color:mediumslateblue; 
    font-size:13px; 
    font-family:courier new;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Hover die Hintergrundfarbe zu deeppink ändert.

<style type="text/css"><!--
  span:hover { 
    background-color:deeppink;
  }
//-->
</style>

Die Beschreibung vom hier genutzten HTML-Befehl span finden Sie in der HTML Referenz unter <span>.

Wechsel der Unterstreichung bei Hover von HTML-Befehl a

Ein Verweis wird mit Tag <a> erzeugt. Diesen können Sie hervorheben und farblich gestalten.

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

Beispielsweise unterstreichen wir <a> mit einem herausstehenden Rahmen mit 3 Pixel Dicke in Farbe mediumslateblue.

<style type="text/css"><!--
  a { 
    border-bottom-style:outset; 
    border-bottom-color:mediumslateblue; 
    border-bottom-width:3px;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Berührung mit der Maus die Farbe der Unterstreichung auf deeppink ändert.

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

Die Idee ist hierbei, voneinander unabhängige Formatierungen für Inhalt und Unterstreichung zu verwenden. Manchmal sieht man dies bei Links. Der Text ist in einer Farbe. Und die Unterstreichung in einer anderen. Dies ist jedoch keine wirkliche Unterstreichung, der Text selbst hat überhaupt keine Unterstreichung. Die Unterstreichung wird mit einem Rahmen simuliert und dieser Rahmen ist unabhängig vom Text.

Mehr zum Thema a finden Sie in Verweise und Protokolle in HTML. Beschreibung des Tag <a>.