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

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 royalblue			Schriftfarbe mediumslateblue
Detail	:	Hintergrund royalblue	Detail	:	Schrift mediumslateblue
Farbe	:	royalblue	Farbe	:	mediumslateblue
Farbwert	:	#4169e1	Farbwert	:	#7b68ee
HTML	:	royalblue	HTML	:	mediumslateblue
HTML (Wert)	:	#4169e1	HTML (Wert)	:	#7b68ee
CSS	:	royalblue	CSS	:	mediumslateblue
CSS (Wert)	:	#4169e1	CSS (Wert)	:	#7b68ee
CSS (kürzest)	:	#4169e1	CSS (kürzest)	:	#7b68ee
CSS (RGB)	:	rgb(65,105,225)	CSS (RGB)	:	rgb(123,104,238)
CSS (%RGB)	:	rgb(25%,41%,88%)	CSS (%RGB)	:	rgb(48%,40%,93%)

Verlauf Hintergrundfarbe royalblue nach Schriftfarbe mediumslateblue
#4169e1	#4968e2	#5168e4	#5968e6	#6268e8	#6a68ea	#7268ec	#7b68ee
#4169e1	#4968e2	#5168e4	#5968e6	#6268e8	#6a68ea	#7268ec	#7b68ee

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

Hintergrundfarbe royalblue				Schriftfarbe mediumslateblue
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#4169e1	#4169e1	#4169e1	#4169e1	#7b68ee	#7b68ee	#7b68ee	#7b68ee
#5c7ee5	#5c7ee5	#375ac0	#375ac0	#8d7df0	#8d7df0	#6959cc	#6959cc
#7793e9	#7793e9	#2e4ba0	#2e4ba0	#a093f2	#a093f2	#574aaa	#574aaa
#92a9ed	#92a9ed	#253c80	#253c80	#b3a8f5	#b3a8f5	#463b88	#463b88
#adbef2	#adbef2	#1b2d60	#1b2d60	#c6bef7	#c6bef7	#342c66	#342c66
#c8d4f6	#c8d4f6	#121e40	#121e40	#d9d3fa	#d9d3fa	#231d44	#231d44
#e3e9fa	#e3e9fa	#090f20	#090f20	#ece9fc	#ece9fc	#110e22	#110e22
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe royalblue und Farbe mediumslateblue

Wechsel der Unterstreichung bei Hover bei Tag a

Mit HTML-Tag <a> wird ein Hyperlink erzeugt. Diesen kann man farblich gestalten und hervorheben.

Die Farbe der Unterstreichung soll sich von Farbe royalblue auf Farbe mediumslateblue ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Darstellung von <a> in Farbe royalblue vor.

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

<style type="text/css"><!--
  a { 
    border-bottom-style: double; 
    border-bottom-width: 1px; 
    border-bottom-color: royalblue;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Mausberührung die Farbe der Unterstreichung auf mediumslateblue ändert.

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

Die Idee ist hierbei, voneinander unabhängige Formatierungen für Inhalt und Unterstreichung zu verwenden. Manchmal sehen Sie das bei Hyperlinks. Der Text ist in einer Farbe. Die Unterstreichung in einer anderen. Dies ist aber keine "normale" Unterstreichung, der Text selbst hat gar keine Unterstreichung. Die Unterstreichung wird mit einem Rahmen simuliert und dieser ist unabhängig vom Text.

Mehr zum Thema finden Sie in Verweise und Protokolle in HTML. Zur Beschreibung vom hier verwendeten HTML-Befehl <a>.

Hintergrund/Text-Kombination bei HTML-Tag cite

Wir ändern für dieses Beispiel die Textfarbe von <cite> auf Farbe mediumslateblue und die Hintergrundfarbe von <cite> auf Farbe royalblue. Die Schriftart ändern wir auf monospace. Als Schriftgröße entscheiden wir uns für 116%.

<style type="text/css"><!--
  cite { 
    font-size:116%; 
    color:mediumslateblue; 
    background-color:royalblue; 
    font-family:monospace;
  }
//-->
</style>

Der Befehl cite ist in der HTML Referenz bei <cite> genau beschrieben.