Ressourcen: 120 HTML Farbnamen - Kombination von Farbe mediumvioletred und Farbe darkviolet

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 mediumvioletred			Schriftfarbe darkviolet
Detail	:	Hintergrund mediumvioletred	Detail	:	Schrift darkviolet
Farbe	:	mediumvioletred	Farbe	:	darkviolet
Farbwert	:	#c71585	Farbwert	:	#9400d3
HTML	:	mediumvioletred	HTML	:	darkviolet
HTML (Wert)	:	#c71585	HTML (Wert)	:	#9400d3
CSS	:	mediumvioletred	CSS	:	darkviolet
CSS (Wert)	:	#c71585	CSS (Wert)	:	#9400d3
CSS (kürzest)	:	#c71585	CSS (kürzest)	:	#9400d3
CSS (RGB)	:	rgb(199,21,133)	CSS (RGB)	:	rgb(148,0,211)
CSS (%RGB)	:	rgb(78%,8%,52%)	CSS (%RGB)	:	rgb(58%,0%,82%)

Verlauf Hintergrundfarbe mediumvioletred nach Schriftfarbe darkviolet
#c71585	#bf1290	#b80f9b	#b10ca6	#a909b1	#a206bc	#9b03c7	#9400d3
#c71585	#bf1290	#b80f9b	#b10ca6	#a909b1	#a206bc	#9b03c7	#9400d3

Kombination von mediumvioletred und darkviolet
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante.				Die Ähnlichkeit der Farben darkviolet und mediumvioletred beträgt 94.23%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 5.77%. Auf Hintergrund mediumvioletred ist darkviolet ungeeignet, weil die Unterschiede in der Helligkeit und Farbe unzureichend sind.

Hintergrundfarbe mediumvioletred				Schriftfarbe darkviolet
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#c71585	#c71585	#c71585	#c71585	#9400d3	#9400d3	#9400d3	#9400d3
#cf3696	#cf3696	#aa1272	#aa1272	#a324d9	#a324d9	#7e00b4	#7e00b4
#d757a7	#d757a7	#8e0f5f	#8e0f5f	#b248df	#b248df	#690096	#690096
#df79b9	#df79b9	#710c4c	#710c4c	#c16de5	#c16de5	#540078	#540078
#e79aca	#e79aca	#550939	#550939	#d191ec	#d191ec	#3f005a	#3f005a
#efbcdc	#efbcdc	#380626	#380626	#e0b6f2	#e0b6f2	#2a003c	#2a003c
#f7dded	#f7dded	#1c0313	#1c0313	#efdaf8	#efdaf8	#15001e	#15001e
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe mediumvioletred und Farbe darkviolet

Wechsel der Textfarbe bei Hover von Tag blockquote

Die Textfarbe soll sich von Farbe mediumvioletred auf Farbe darkviolet ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Formatierung von <blockquote> in Farbe mediumvioletred vor.

Wir ändern zum Beispiel die Textfarbe von <blockquote> auf Farbe mediumvioletred. Die Hintergrundfarbe verändern wir nicht. Die Schriftart ändern wir auf monospace und verringern die Größe der Schrift auf 92%.

<style type="text/css"><!--
  blockquote { 
    font-size:92%; 
    font-family:monospace; 
    color:mediumvioletred;
  }
//-->
</style>

Nun fordern wir, dass sich bei Hover die Textfarbe zu darkviolet ändert.

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

Weiteres zum Thema blockquote erfahren Sie in Blockorientierte Elemente in HTML. Mehr zum Tag <blockquote>.

Wechsel der Hintergrundfarbe bei Hover bei Tag h6

Mit Tag <h6> erzeugen Sie eine Überschrift. Diese kann farblich gestaltet und hervorgehoben werden.

Die Hintergrundfarbe soll sich von Farbe mediumvioletred auf Farbe darkviolet ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Formatierung von <h6> in Farbe mediumvioletred vor.

Wir legen in diesem Beispiel bei <h6> die Hintergrundfarbe auf Farbe mediumvioletred fest. Die Textfarbe verändern wir nicht, setzen jedoch die Schriftart auf monospace. Die Größe der Schrift ändern wir auf 9px.

<style type="text/css"><!--
  h6 { 
    background-color:mediumvioletred; 
    font-family:monospace; 
    font-size:9px;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Mausberührung die Hintergrundfarbe zu darkviolet ändert.

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

Mehr zu h6 können Sie in Grundlegende Gestaltungselemente in HTML lesen. Der Befehl h6 ist in der HTML Referenz bei <h6> ausführlich gezeigt.