Ressourcen: 120 HTML Farbnamen - Kombination von Farbe violet und Farbwert #daa520

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 violet			Schriftfarbwert #daa520
Detail	:	Hintergrund violet	Detail	:	Schrift #daa520
Farbe	:	violet	Farbwert	:	#daa520
Farbwert	:	#ee82ee	Farbe	:	goldenrod
HTML	:	violet	HTML	:	#daa520
HTML (Wert)	:	#ee82ee	HTML (Wert)	:	#daa520
CSS	:	violet	CSS	:	#daa520
CSS (Wert)	:	#ee82ee	CSS (Wert)	:	#daa520
CSS (kürzest)	:	#ee82ee	CSS (kürzest)	:	#daa520
CSS (RGB)	:	rgb(238,130,238)	CSS (RGB)	:	rgb(218,165,32)
CSS (%RGB)	:	rgb(93%,50%,93%)	CSS (%RGB)	:	rgb(85%,64%,12%)

Verlauf Hintergrundfarbe violet nach Schriftfarbwert #daa520
#ee82ee	#eb87d0	#e88cb3	#e59195	#e29678	#df9b5a	#dca03d	#daa520
#ee82ee	#eb87d0	#e88cb3	#e59195	#e29678	#df9b5a	#dca03d	#daa520

Kombination von violet und #daa520
Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna.				Die Ähnlichkeit von #daa520 und violet ergibt sich zu 95.07%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 4.93%. Auf Hintergrund violet ist #daa520 ungeeignet, da die Helligkeit und Farben zu ähnlich sind.

Hintergrundfarbe violet				Schriftfarbwert #daa520
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ee82ee	#ee82ee	#ee82ee	#ee82ee	#daa520	#daa520	#daa520	#daa520
#f093f0	#f093f0	#cc6fcc	#cc6fcc	#dfb13f	#dfb13f	#ba8d1b	#ba8d1b
#f2a5f2	#f2a5f2	#aa5caa	#aa5caa	#e4be5f	#e4be5f	#9b7516	#9b7516
#f5b7f5	#f5b7f5	#884a88	#884a88	#e9cb7f	#e9cb7f	#7c5e12	#7c5e12
#f7c9f7	#f7c9f7	#663766	#663766	#efd89f	#efd89f	#5d460d	#5d460d
#fadbfa	#fadbfa	#442544	#442544	#f4e5bf	#f4e5bf	#3e2f09	#3e2f09
#fcedfc	#fcedfc	#221222	#221222	#f9f2df	#f9f2df	#1f1704	#1f1704
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe violet und Farbwert #daa520

Wechsel der Hintergrundfarbe bei Hover von HTML-Tag samp

Die Hintergrundfarbe soll sich von Farbe violet auf Farbwert #daa520 ändern, wenn man mit der Maus auf <samp> zeigt. Bereiten wir zunächst die Formatierung von <samp> in Farbe violet vor.

Z.B. ändern wir die Hintergrundfarbe von <samp> auf Farbe violet. Die Größe der Schrift verringern wir auf 89%.

<style type="text/css"><!--
  samp { 
    font-size:89%; 
    background-color:violet;
  }
//-->
</style>

Nun stellen wir ein, dass bei Mausberührung die Hintergrundfarbe auf #daa520 gesetzt wird.

<style type="text/css"><!--
  samp: hover { 
    background-color: #daa520;
  }
//-->
</style>

Mehr zum Thema erfahren Sie in Text in HTML. Möglichkeiten des hier verwendeten Befehl <samp>.

Wechsel der Unterstreichung bei Hover mit HTML-Tag caption

Die Unterstreichungsfarbe soll sich von Farbe violet auf Farbwert #daa520 ändern, wenn man mit der Maus auf <caption> zeigt. Bereiten wir zunächst die Darstellung von <caption> in Farbe violet vor.

In diesem Beispiel unterstreichen wir <caption> mit Hilfe eines gezahnten Rahmens mit 4 Pixel Dicke in Farbe violet.

<style type="text/css"><!--
  caption { 
    border-bottom-style:ridge; 
    border-bottom-color:violet; 
    border-bottom-width:4px;
  }
//-->
</style>

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

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

Die Idee ist dabei, unabhängige Formatierungen für Inhalt und Unterstreichung zu haben. Öfter sieht man diesen Effekt bei Links. Der Text wird in einer Farbe dargestellt. Und die Unterstreichung in einer anderen. Es ist aber keine normale Unterstreichung, der Text ist gar nicht unterstrichen. Die Unterstreichung wird mit einem Rahmen simuliert und dieser Rahmen ist unabhängig vom Text.

Weiteres zum Thema caption können Sie in Tabellen in HTML finden. Weiteres zum HTML-Befehl caption finden Sie in der HTML Referenz unter <caption>.