Ressourcen: 120 HTML Farbnamen - Kombination von Farbe goldenrod und Farbwert #fff0f5

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 goldenrod			Schriftfarbwert #fff0f5
Detail	:	Hintergrund goldenrod	Detail	:	Schrift #fff0f5
Farbe	:	goldenrod	Farbwert	:	#fff0f5
Farbwert	:	#daa520	Farbe	:	lavenderblush
HTML	:	goldenrod	HTML	:	#fff0f5
HTML (Wert)	:	#daa520	HTML (Wert)	:	#fff0f5
CSS	:	goldenrod	CSS	:	#fff0f5
CSS (Wert)	:	#daa520	CSS (Wert)	:	#fff0f5
CSS (kürzest)	:	#daa520	CSS (kürzest)	:	#fff0f5
CSS (RGB)	:	rgb(218,165,32)	CSS (RGB)	:	rgb(255,240,245)
CSS (%RGB)	:	rgb(85%,64%,12%)	CSS (%RGB)	:	rgb(100%,94%,96%)

Verlauf Hintergrundfarbe goldenrod nach Schriftfarbwert #fff0f5
#daa520	#dfaf3e	#e4ba5c	#e9c57b	#efcf99	#f4dab8	#f9e5d6	#fff0f5
#daa520	#dfaf3e	#e4ba5c	#e9c57b	#efcf99	#f4dab8	#f9e5d6	#fff0f5

Kombination von goldenrod und #fff0f5
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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante.				#fff0f5 eignet sich nicht als Schriftfarbe auf Hintergrund goldenrod. Die Helligkeit und Farben sind zu ähnlich. Die Ähnlichkeit der Farben #fff0f5 und goldenrod beträgt 90.34%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 9.66%.

Hintergrundfarbe goldenrod				Schriftfarbwert #fff0f5
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#daa520	#daa520	#daa520	#daa520	#fff0f5	#fff0f5	#fff0f5	#fff0f5
#dfb13f	#dfb13f	#ba8d1b	#ba8d1b	#fff2f6	#fff2f6	#dacdd2	#dacdd2
#e4be5f	#e4be5f	#9b7516	#9b7516	#fff4f7	#fff4f7	#b6abaf	#b6abaf
#e9cb7f	#e9cb7f	#7c5e12	#7c5e12	#fff6f9	#fff6f9	#91898c	#91898c
#efd89f	#efd89f	#5d460d	#5d460d	#fff8fa	#fff8fa	#6d6669	#6d6669
#f4e5bf	#f4e5bf	#3e2f09	#3e2f09	#fffafc	#fffafc	#484446	#484446
#f9f2df	#f9f2df	#1f1704	#1f1704	#fffcfd	#fffcfd	#242223	#242223
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe goldenrod und Farbwert #fff0f5

Wechsel der Unterstreichung bei Hover mit Befehl address

Die Farbe der Unterstreichung soll sich von Farbe goldenrod auf Farbwert #fff0f5 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Formatierung von <address> in Farbe goldenrod vor.

Beispielsweise unterstreichen wir <address> mit einem herausstehenden Rahmen mit 1 Pixel Dicke in Farbe goldenrod.

<style type="text/css"><!--
  address { 
    border-bottom-style: outset; 
    border-bottom-color: goldenrod; 
    border-bottom-width: 1px;
  }
//-->
</style>

Nun fordern wir, dass bei Mausberührung die Farbe der Unterstreichung auf #fff0f5 geändert wird.

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

Die Idee ist dabei, verschiedene Formatierungen für Inhalt und Unterstreichung zu haben. Öfter sehen Sie dies bei Verweisen. Der Text ist in einer Farbe. Die Unterstreichung in einer anderen. Dies ist aber keine normale Unterstreichung, der Text hat gar keine Unterstreichung. Die Unterstreichung wird mit einem Rahmen simuliert und dieser ist unabhängig vom Text.

Mehr zum Thema können Sie in Blockorientierte Elemente in HTML nachlesen. Möglichkeiten vom hier gezeigten HTML-Befehl address lesen Sie in der HTML Referenz unter <address>.

Wechsel der Textfarbe bei Hover bei Tag em

Die Textfarbe soll sich von Farbe goldenrod auf Farbwert #fff0f5 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <em> in Farbe goldenrod vor.

Wir legen in diesem Beispiel bei <em> die Textfarbe auf Farbe goldenrod fest und vergrößern die Schriftgröße auf 126%:

<style type="text/css"><!--
  em { 
    color: goldenrod; 
    font-size: 126%;
  }
//-->
</style>

Jetzt stellen wir ein, dass bei Hover die Textfarbe auf #fff0f5 geändert wird.

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

Mehr zum Thema finden Sie in Text in HTML. Mehr zum HTML-Befehl em ist in der HTML Referenz bei <em> beschrieben.