Ressourcen: 120 HTML Farbnamen - Kombination von Farbe powderblue und Farbe chocolate

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 powderblue			Schriftfarbe chocolate
Detail	:	Hintergrund powderblue	Detail	:	Schrift chocolate
Farbe	:	powderblue	Farbe	:	chocolate
Farbwert	:	#b0e0e6	Farbwert	:	#d2691e
HTML	:	powderblue	HTML	:	chocolate
HTML (Wert)	:	#b0e0e6	HTML (Wert)	:	#d2691e
CSS	:	powderblue	CSS	:	chocolate
CSS (Wert)	:	#b0e0e6	CSS (Wert)	:	#d2691e
CSS (kürzest)	:	#b0e0e6	CSS (kürzest)	:	#d2691e
CSS (RGB)	:	rgb(176,224,230)	CSS (RGB)	:	rgb(210,105,30)
CSS (%RGB)	:	rgb(69%,87%,90%)	CSS (%RGB)	:	rgb(82%,41%,11%)

Verlauf Hintergrundfarbe powderblue nach Schriftfarbe chocolate
#b0e0e6	#b4cfc9	#b9beac	#bead90	#c39c73	#c88b57	#cd7a3a	#d2691e
#b0e0e6	#b4cfc9	#b9beac	#bead90	#c39c73	#c88b57	#cd7a3a	#d2691e

Kombination von powderblue und chocolate
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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Die Ähnlichkeit von chocolate und powderblue beträgt 87.93%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 12.07%. chocolate eignet sich nicht als Schriftfarbe auf Hintergrund powderblue. Die Unterschiede in der Helligkeit und Farbe sind unzureichend.

Hintergrundfarbe powderblue				Schriftfarbe chocolate
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#b0e0e6	#b0e0e6	#b0e0e6	#b0e0e6	#d2691e	#d2691e	#d2691e	#d2691e
#bbe4e9	#bbe4e9	#96c0c5	#96c0c5	#d87e3e	#d87e3e	#b45a19	#b45a19
#c6e8ed	#c6e8ed	#7da0a4	#7da0a4	#de935e	#de935e	#964b15	#964b15
#d1edf0	#d1edf0	#648083	#648083	#e5a97e	#e5a97e	#783c11	#783c11
#ddf1f4	#ddf1f4	#4b6062	#4b6062	#ebbe9e	#ebbe9e	#5a2d0c	#5a2d0c
#e8f6f7	#e8f6f7	#324041	#324041	#f2d4be	#f2d4be	#3c1e08	#3c1e08
#f3fafb	#f3fafb	#192020	#192020	#f8e9de	#f8e9de	#1e0f04	#1e0f04
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe powderblue und Farbe chocolate

Wechsel der Unterstreichung bei Hover bei HTML-Befehl samp

Die Unterstreichungsfarbe soll sich von Farbe powderblue auf Farbe chocolate ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <samp> in Farbe powderblue vor.

Beispielsweise unterstreichen wir <samp> mit einem gepunkteten Rahmen mit 1 Pixel Dicke in Farbe powderblue.

<style type="text/css"><!--
  samp { border-bottom:1px dotted powderblue; }
//-->
</style>

Nun fordern wir, dass sich bei Berührung mit der Maus die Unterstreichungsfarbe zu chocolate ändert.

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

Die Idee ist, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu nutzen. Manchmal sieht man diesen Effekt bei Links. Der Text wird in einer Farbe dargestellt. Die Unterstreichung in einer anderen. Hierbei handelt es sich jedoch nicht um eine "normale" Unterstreichung, der Text selbst hat gar keine Unterstreichung. Die Unterstreichung wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Weiteres zum Thema samp finden Sie in Text in HTML. Weiteres zum HTML-Tag samp erfahren Sie in der HTML Referenz unter <samp>.

Wechsel der Textfarbe bei Hover bei HTML-Befehl dt

Die Textfarbe soll sich von Farbe powderblue auf Farbe chocolate ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <dt> in Farbe powderblue vor.

Wir legen hier bei <dt> die Textfarbe auf Farbe powderblue fest:

<style type="text/css"><!--
  dt { 
    color: powderblue;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Hover die Textfarbe auf chocolate ändert.

<style type="text/css"><!--
  dt:hover { 
    color:chocolate;
  }
//-->
</style>

Mehr zum Thema können Sie in Listen und Glossare in HTML nachlesen. Beschreibung vom HTML-Befehl <dt>.