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

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 chocolate			Schriftfarbe mediumorchid
Detail	:	Hintergrund chocolate	Detail	:	Schrift mediumorchid
Farbe	:	chocolate	Farbe	:	mediumorchid
Farbwert	:	#d2691e	Farbwert	:	#ba55d3
HTML	:	chocolate	HTML	:	mediumorchid
HTML (Wert)	:	#d2691e	HTML (Wert)	:	#ba55d3
CSS	:	chocolate	CSS	:	mediumorchid
CSS (Wert)	:	#d2691e	CSS (Wert)	:	#ba55d3
CSS (kürzest)	:	#d2691e	CSS (kürzest)	:	#ba55d3
CSS (RGB)	:	rgb(210,105,30)	CSS (RGB)	:	rgb(186,85,211)
CSS (%RGB)	:	rgb(82%,41%,11%)	CSS (%RGB)	:	rgb(72%,33%,82%)

Verlauf Hintergrundfarbe chocolate nach Schriftfarbe mediumorchid
#d2691e	#ce6637	#cb6351	#c7606b	#c45d85	#c05a9f	#bd57b9	#ba55d3
#d2691e	#ce6637	#cb6351	#c7606b	#c45d85	#c05a9f	#bd57b9	#ba55d3

Kombination von chocolate und mediumorchid
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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.				mediumorchid ist nicht als Schriftfarbe auf Hintergrund chocolate geeignet. Weder der Helligkeitsunterschied noch der Farbunterschied sind ausreichend. Die Ähnlichkeit der Farben mediumorchid und chocolate ergibt sich zu 94.83%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 5.17%.

Hintergrundfarbe chocolate				Schriftfarbe mediumorchid
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#d2691e	#d2691e	#d2691e	#d2691e	#ba55d3	#ba55d3	#ba55d3	#ba55d3
#d87e3e	#d87e3e	#b45a19	#b45a19	#c36dd9	#c36dd9	#9f48b4	#9f48b4
#de935e	#de935e	#964b15	#964b15	#cd85df	#cd85df	#843c96	#843c96
#e5a97e	#e5a97e	#783c11	#783c11	#d79de5	#d79de5	#6a3078	#6a3078
#ebbe9e	#ebbe9e	#5a2d0c	#5a2d0c	#e1b6ec	#e1b6ec	#4f245a	#4f245a
#f2d4be	#f2d4be	#3c1e08	#3c1e08	#ebcef2	#ebcef2	#35183c	#35183c
#f8e9de	#f8e9de	#1e0f04	#1e0f04	#f5e6f8	#f5e6f8	#1a0c1e	#1a0c1e
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe chocolate und Farbe mediumorchid

Wechsel der Hintergrundfarbe bei Hover bei Tag pre

Die Hintergrundfarbe soll sich von Farbe chocolate auf Farbe mediumorchid ändern, wenn man mit der Maus auf <pre> zeigt. Bereiten wir zunächst eine Darstellung von <pre> in Farbe chocolate vor.

Wir ändern zum Beispiel die Hintergrundfarbe von <pre> auf Farbe chocolate. Zwar ändern wir die Textfarbe nicht, ändern jedoch die Schriftart auf sans-serif:

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

Nun stellen wir ein, dass sich bei Berührung mit der Maus die Hintergrundfarbe auf mediumorchid ändert.

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

Mehr zum Thema pre lesen Sie in Blockorientierte Elemente in HTML. Möglichkeiten des hier verwendeten HTML-Befehl pre lesen Sie in der HTML Referenz unter <pre>.

Wechsel der Textfarbe bei Hover mit Befehl li

Die Textfarbe soll sich von Farbe chocolate auf Farbe mediumorchid ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Formatierung von <li> in Farbe chocolate vor.

Wir legen z.B. die Textfarbe von <li> auf Farbe chocolate fest. Die Hintergrundfarbe behalten wir bei, setzen jedoch die Schriftart auf monospace.

<style type="text/css"><!--
  li { 
    font-family: monospace; 
    color: chocolate;
  }
//-->
</style>

Nun stellen wir ein, dass bei Mausberührung die Textfarbe auf mediumorchid gesetzt wird.

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

Weiteres zum Thema li lesen Sie in Listen und Glossare in HTML. Möglichkeiten des Befehl li finden Sie in der HTML Referenz unter <li>.