Ressourcen: 120 HTML Farbnamen - Kombination von Farbe orangered und Farbe mediumspringgreen

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 orangered			Schriftfarbe mediumspringgreen
Detail	:	Hintergrund orangered	Detail	:	Schrift mediumspringgreen
Farbe	:	orangered	Farbe	:	mediumspringgreen
Farbwert	:	#ff4500	Farbwert	:	#00fa9a
HTML	:	orangered	HTML	:	mediumspringgreen
HTML (Wert)	:	#ff4500	HTML (Wert)	:	#00fa9a
CSS	:	orangered	CSS	:	mediumspringgreen
CSS (Wert)	:	#ff4500	CSS (Wert)	:	#00fa9a
CSS (kürzest)	:	#ff4500	CSS (kürzest)	:	#00fa9a
CSS (RGB)	:	rgb(255,69,0)	CSS (RGB)	:	rgb(0,250,154)
CSS (%RGB)	:	rgb(100%,27%,0%)	CSS (%RGB)	:	rgb(0%,98%,60%)

Verlauf Hintergrundfarbe orangered nach Schriftfarbe mediumspringgreen
#ff4500	#da5e16	#b6782c	#919242	#6dac58	#48c66e	#24e084	#00fa9a
#ff4500	#da5e16	#b6782c	#919242	#6dac58	#48c66e	#24e084	#00fa9a

Kombination von orangered und mediumspringgreen
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. 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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				mediumspringgreen eignet sich nicht als Schriftfarbe auf Hintergrund orangered. Zwar ist der Farbunterschied in Ordnung, der Helligkeitsunterschied ist jedoch zu gering. Die Ähnlichkeit von mediumspringgreen und orangered beträgt 88.19%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 11.81%.

Hintergrundfarbe orangered				Schriftfarbe mediumspringgreen
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ff4500	#ff4500	#ff4500	#ff4500	#00fa9a	#00fa9a	#00fa9a	#00fa9a
#ff5f24	#ff5f24	#da3b00	#da3b00	#24faa8	#24faa8	#00d684	#00d684
#ff7a48	#ff7a48	#b63100	#b63100	#48fbb6	#48fbb6	#00b26e	#00b26e
#ff946d	#ff946d	#912700	#912700	#6dfcc5	#6dfcc5	#008e58	#008e58
#ffaf91	#ffaf91	#6d1d00	#6d1d00	#91fcd3	#91fcd3	#006b42	#006b42
#ffc9b6	#ffc9b6	#481300	#481300	#b6fde2	#b6fde2	#00472c	#00472c
#ffe4da	#ffe4da	#240900	#240900	#dafef0	#dafef0	#002316	#002316
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe orangered und Farbe mediumspringgreen

Wechsel der Hintergrundfarbe bei Hover von Tag blockquote

Die Hintergrundfarbe soll sich von Farbe orangered auf Farbe mediumspringgreen ändern, wenn man mit der Maus auf <blockquote> zeigt. Bereiten wir zunächst eine Formatierung von <blockquote> in Farbe orangered vor.

Zum Beispiel legen wir die Hintergrundfarbe von <blockquote> auf Farbe orangered fest und verringern die Größe der Schrift auf 97%:

<style type="text/css"><!--
  blockquote { 
    font-size:97%; 
    background-color:orangered;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Hover die Hintergrundfarbe zu mediumspringgreen ändert.

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

Mehr zu blockquote lesen Sie in Blockorientierte Elemente in HTML. Möglichkeiten des hier verwendeten HTML-Befehl blockquote finden Sie in der HTML Referenz unter <blockquote>.

Wechsel der Unterstreichung bei Hover von HTML-Tag label

Die Farbe der Unterstreichung soll sich von Farbe orangered auf Farbe mediumspringgreen ändern, wenn man mit der Maus auf <label> zeigt. Bereiten wir zunächst die Formatierung von <label> in Farbe orangered vor.

Hier unterstreichen wir <label> mit Hilfe eines herausstehenden Rahmens mit 4 Pixel Dicke in Farbe orangered.

<style type="text/css"><!--
  label { 
    border-bottom-color:orangered; 
    border-bottom-style:outset; 
    border-bottom-width:4px;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Mausberührung die Unterstreichungsfarbe zu mediumspringgreen ändert.

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

Die Idee ist hierbei, unabhängige Formatierungen für Inhalt und Unterstreichung zu nutzen. Öfter sehen Sie diesen Effekt bei Links. Der Text ist in einer Farbe. Und die Unterstreichung in einer anderen. Dies ist jedoch keine normale Unterstreichung, der Text selbst hat keine Unterstreichung. Die Unterstreichung wird mit einem Rahmen simuliert und dieser ist unabhängig vom Text.

Weiteres zum Thema label erfahren Sie in Formulare in HTML. Der HTML-Tag label ist in der HTML Referenz unter <label> beschrieben.