Ressourcen: 137 HTML Farbnamen - Kombination von Farbe mediumblue und Farbe maroon

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 mediumblue			Schriftfarbe maroon
Detail	:	Hintergrund mediumblue	Detail	:	Schrift maroon
Farbe	:	mediumblue	Farbe	:	maroon
Farbwert	:	#0000cd	Farbwert	:	#800000
HTML	:	mediumblue	HTML	:	maroon
HTML (Wert)	:	#0000cd	HTML (Wert)	:	#800000
CSS	:	mediumblue	CSS	:	maroon
CSS (Wert)	:	#0000cd	CSS (Wert)	:	#800000
CSS (kürzest)	:	#0000cd	CSS (kürzest)	:	#800000
CSS (RGB)	:	rgb(0,0,205)	CSS (RGB)	:	rgb(128,0,0)
CSS (%RGB)	:	rgb(0%,0%,80%)	CSS (%RGB)	:	rgb(50%,0%,0%)

Verlauf Hintergrundfarbe mediumblue nach Schriftfarbe maroon
#0000cd	#1200af	#240092	#360075	#490057	#5b003a	#6d001d	#800000
#0000cd	#1200af	#240092	#360075	#490057	#5b003a	#6d001d	#800000

Kombination von mediumblue und maroon
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. Cras vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				maroon ist nicht als Schriftfarbe auf Hintergrund mediumblue geeignet. Die Unterschiede in der Helligkeit und Farbe sind nicht ausreichend. Die Ähnlichkeit von maroon und mediumblue ergibt sich zu 95.15%. Die Lesbarkeit dieser Farbkombination liegt damit bei 4.85%.

Hintergrundfarbe mediumblue				Schriftfarbe maroon
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#0000cd	#0000cd	#0000cd	#0000cd	#800000	#800000	#800000	#800000
#2424d4	#2424d4	#0000af	#0000af	#922424	#922424	#6d0000	#6d0000
#4848db	#4848db	#000092	#000092	#a44848	#a44848	#5b0000	#5b0000
#6d6de2	#6d6de2	#000075	#000075	#b66d6d	#b66d6d	#490000	#490000
#9191e9	#9191e9	#000057	#000057	#c89191	#c89191	#360000	#360000
#b6b6f0	#b6b6f0	#00003a	#00003a	#dab6b6	#dab6b6	#240000	#240000
#dadaf7	#dadaf7	#00001d	#00001d	#ecdada	#ecdada	#120000	#120000
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe mediumblue und Farbe maroon

Hintergrund/Text-Kombination bei HTML-Befehl blockquote

In diesem Beispiel ändern wir die Textfarbe von <blockquote> auf Farbe maroon und die Hintergrundfarbe von <blockquote> auf Farbe mediumblue. Die Schriftart setzen wir auf sans-serif. Als Schriftgröße wählen wir 9pt.

<style type="text/css"><!--
  blockquote { 
    font-family: sans-serif; 
    background-color: mediumblue; 
    color: maroon; 
    font-size: 9pt;
  }
//-->
</style>

Weiteres zu blockquote lesen Sie in Blockorientierte Elemente in HTML. Einzelheiten vom HTML-Tag blockquote erfahren Sie in der HTML Referenz unter <blockquote>.

Wechsel der Unterstreichung bei Hover von Befehl caption

Die Unterstreichungsfarbe soll sich von Farbe mediumblue auf Farbe maroon ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Darstellung von <caption> in Farbe mediumblue vor.

Beispielsweise unterstreichen wir <caption> mit einem doppelten Rahmen mit 5 Pixel Dicke in Farbe mediumblue.

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

Nun fordern wir, dass sich bei Hover die Farbe der Unterstreichung auf maroon ändert.

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

Die Idee ist, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu verwenden. Öfter sieht man dies bei Verweisen. Der Text wird in einer Farbe dargestellt. Und die Unterstreichung in einer anderen. Dies ist jedoch keine "wirkliche" Unterstreichung, der Text selbst ist nicht unterstrichen. Die Unterstreichung wird mit einem Rahmen simuliert und dieser ist unabhängig vom Text.

Mehr zum Thema caption lesen Sie in Tabellen in HTML. Möglichkeiten des hier gezeigten Tag <caption>.