Ressourcen: 120 HTML Farbnamen - Kombination von Farbe pink 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 pink			Schriftfarbwert #daa520
Detail	:	Hintergrund pink	Detail	:	Schrift #daa520
Farbe	:	pink	Farbwert	:	#daa520
Farbwert	:	#ffc0cb	Farbe	:	goldenrod
HTML	:	pink	HTML	:	#daa520
HTML (Wert)	:	#ffc0cb	HTML (Wert)	:	#daa520
CSS	:	pink	CSS	:	#daa520
CSS (Wert)	:	#ffc0cb	CSS (Wert)	:	#daa520
CSS (kürzest)	:	#ffc0cb	CSS (kürzest)	:	#daa520
CSS (RGB)	:	rgb(255,192,203)	CSS (RGB)	:	rgb(218,165,32)
CSS (%RGB)	:	rgb(100%,75%,79%)	CSS (%RGB)	:	rgb(85%,64%,12%)

Verlauf Hintergrundfarbe pink nach Schriftfarbwert #daa520
#ffc0cb	#f9bcb2	#f4b89a	#efb481	#e9b069	#e4ac50	#dfa838	#daa520
#ffc0cb	#f9bcb2	#f4b89a	#efb481	#e9b069	#e4ac50	#dfa838	#daa520

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

Hintergrundfarbe pink				Schriftfarbwert #daa520
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ffc0cb	#ffc0cb	#ffc0cb	#ffc0cb	#daa520	#daa520	#daa520	#daa520
#ffc9d2	#ffc9d2	#daa4ae	#daa4ae	#dfb13f	#dfb13f	#ba8d1b	#ba8d1b
#ffd2d9	#ffd2d9	#b68991	#b68991	#e4be5f	#e4be5f	#9b7516	#9b7516
#ffdbe1	#ffdbe1	#916d74	#916d74	#e9cb7f	#e9cb7f	#7c5e12	#7c5e12
#ffe4e8	#ffe4e8	#6d5257	#6d5257	#efd89f	#efd89f	#5d460d	#5d460d
#ffedf0	#ffedf0	#48363a	#48363a	#f4e5bf	#f4e5bf	#3e2f09	#3e2f09
#fff6f7	#fff6f7	#241b1d	#241b1d	#f9f2df	#f9f2df	#1f1704	#1f1704
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe pink und Farbwert #daa520

Wechsel der Umrandung bei Hover von Tag p

Die Rahmenfarbe soll sich von Farbe pink auf Farbwert #daa520 ändern, wenn man mit der Maus auf <p> zeigt. Bereiten wir zunächst eine Formatierung von <p> in Farbe pink vor.

In diesem Beispiel umranden wir <p> mit einem 5 Pixel dicken, einfallenden Rahmen in Farbe pink.

<style type="text/css"><!--
  p { 
    border-color:pink; 
    border-style:inset; 
    border-width:5px;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Mausberührung die Rahmenfarbe auf #daa520 ändert.

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

Weiteres zum Thema p lesen Sie in Grundlegende Gestaltungselemente in HTML. Beschreibung vom Tag <p>.

Wechsel der Textfarbe bei Hover mit HTML-Tag a

Einen Link erzeugen Sie mit HTML-Befehl <a>. Diesen kann man hervorheben und farblich gestalten.

Die Textfarbe soll sich von Farbe pink auf Farbwert #daa520 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Formatierung von <a> in Farbe pink vor.

Wir legen für dieses Beispiel Farbe pink als Textfarbe von <a> fest. Die Hintergrundfarbe behalten wir bei. Die Schriftart setzen wir auf sans-serif:

<style type="text/css"><!--
  a { 
    font-family:sans-serif; 
    color:pink;
  }
//-->
</style>

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

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

Weiteres zum Thema a erfahren Sie in Verweise und Protokolle in HTML. Mehr zum hier gezeigten HTML-Befehl a erfahren Sie in der HTML Referenz unter <a>.