Ressourcen: 120 HTML Farbnamen - Kombination von Farbe indigo und Farbwert #c71585

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 indigo			Schriftfarbwert #c71585
Detail	:	Hintergrund indigo	Detail	:	Schrift #c71585
Farbe	:	indigo	Farbwert	:	#c71585
Farbwert	:	#4b0082	Farbe	:	mediumvioletred
HTML	:	indigo	HTML	:	#c71585
HTML (Wert)	:	#4b0082	HTML (Wert)	:	#c71585
CSS	:	indigo	CSS	:	#c71585
CSS (Wert)	:	#4b0082	CSS (Wert)	:	#c71585
CSS (kürzest)	:	#4b0082	CSS (kürzest)	:	#c71585
CSS (RGB)	:	rgb(75,0,130)	CSS (RGB)	:	rgb(199,21,133)
CSS (%RGB)	:	rgb(29%,0%,50%)	CSS (%RGB)	:	rgb(78%,8%,52%)

Verlauf Hintergrundfarbe indigo nach Schriftfarbwert #c71585
#4b0082	#5c0382	#6e0682	#800983	#910c83	#a30f84	#b51284	#c71585
#4b0082	#5c0382	#6e0682	#800983	#910c83	#a30f84	#b51284	#c71585

Kombination von indigo und #c71585
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. 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. Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				#c71585 eignet sich nicht als Schriftfarbe auf Hintergrund indigo, da sowohl Helligkeit als auch die Farben zu ähnlich sind. Die Ähnlichkeit von #c71585 und indigo ergibt sich zu 88.62%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 11.38%.

Hintergrundfarbe indigo				Schriftfarbwert #c71585
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#4b0082	#4b0082	#4b0082	#4b0082	#c71585	#c71585	#c71585	#c71585
#642493	#642493	#40006f	#40006f	#cf3696	#cf3696	#aa1272	#aa1272
#7e48a5	#7e48a5	#35005c	#35005c	#d757a7	#d757a7	#8e0f5f	#8e0f5f
#986db7	#986db7	#2a004a	#2a004a	#df79b9	#df79b9	#710c4c	#710c4c
#b191c9	#b191c9	#200037	#200037	#e79aca	#e79aca	#550939	#550939
#cbb6db	#cbb6db	#150025	#150025	#efbcdc	#efbcdc	#380626	#380626
#e5daed	#e5daed	#0a0012	#0a0012	#f7dded	#f7dded	#1c0313	#1c0313
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe indigo und Farbwert #c71585

Wechsel der Unterstreichung bei Hover mit Tag h1

Eine Überschrift der 1. Stufe setzt man mit HTML-Tag <h1>. Sie kann farblich gestaltet werden.

Die Farbe der Unterstreichung soll sich von Farbe indigo auf Farbwert #c71585 ändern, wenn man mit der Maus auf <h1> zeigt. Wir bereiten zunächst die Darstellung von <h1> in Farbe indigo vor.

In diesem Beispiel unterstreichen wir <h1> mit einem gefurchten Rahmen mit 5 Pixel Dicke in Farbe indigo.

<style type="text/css"><!--
  h1 { border-bottom:5px groove indigo; }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Mausberührung die Unterstreichungsfarbe auf #c71585 ändert.

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

Die Idee ist hierbei, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu nutzen. Öfter sehen Sie diesen Effekt bei Links. Der Text ist in einer Farbe. Die Unterstreichung in einer anderen. Das ist jedoch keine "wirkliche" Unterstreichung, der Text ist nicht unterstrichen. Die Unterstreichung wird mit einem Rahmen simuliert und dieser ist unabhängig vom Text.

Mehr zum Thema können Sie in Grundlegende Gestaltungselemente in HTML lesen. Weiteres zum Tag h1 erfahren Sie in der HTML Referenz unter <h1>.

Wechsel der Textfarbe bei Hover mit HTML-Befehl dd

Die Textfarbe soll sich von Farbe indigo auf Farbwert #c71585 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Darstellung von <dd> in Farbe indigo vor.

Als Beispiel legen wir die Textfarbe von <dd> auf Farbe indigo fest. Zwar ändern wir die Hintergrundfarbe nicht, ändern jedoch die Schriftart auf arial. Die Größe der Schrift ändern wir auf 13px:

<style type="text/css"><!--
  dd { 
    color: indigo; 
    font-family: arial; 
    font-size: 13px;
  }
//-->
</style>

Jetzt fordern wir, dass bei Mausberührung die Textfarbe auf #c71585 gesetzt wird.

<style type="text/css"><!--
  dd:hover { 
    color:#c71585;
  }
//-->
</style>

Mehr zum Thema lesen Sie in Listen und Glossare in HTML. Einzelheiten vom Tag <dd>.