Ressourcen: 120 HTML Farbnamen - Kombination von Farbe peachpuff und Farbe darkmagenta

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 peachpuff			Schriftfarbe darkmagenta
Detail	:	Hintergrund peachpuff	Detail	:	Schrift darkmagenta
Farbe	:	peachpuff	Farbe	:	darkmagenta
Farbwert	:	#ffdab9	Farbwert	:	#8b008b
HTML	:	peachpuff	HTML	:	darkmagenta
HTML (Wert)	:	#ffdab9	HTML (Wert)	:	#8b008b
CSS	:	peachpuff	CSS	:	darkmagenta
CSS (Wert)	:	#ffdab9	CSS (Wert)	:	#8b008b
CSS (kürzest)	:	#ffdab9	CSS (kürzest)	:	#8b008b
CSS (RGB)	:	rgb(255,218,185)	CSS (RGB)	:	rgb(139,0,139)
CSS (%RGB)	:	rgb(100%,85%,72%)	CSS (%RGB)	:	rgb(54%,0%,54%)

Verlauf Hintergrundfarbe peachpuff nach Schriftfarbe darkmagenta
#ffdab9	#eebab2	#dd9bab	#cd7ca5	#bc5d9e	#ac3e98	#9b1f91	#8b008b
#ffdab9	#eebab2	#dd9bab	#cd7ca5	#bc5d9e	#ac3e98	#9b1f91	#8b008b

Kombination von peachpuff und darkmagenta
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. 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.				Auf Hintergrund peachpuff ist darkmagenta ungeeignet. Zwar ist der Helligkeitsunterschied ok, doch die Farben selbst sind zu ähnlich. Die Ähnlichkeit der Farben darkmagenta und peachpuff beträgt 69.20%. Die Lesbarkeit dieser Kombination bewerte ich mit 30.80%.

Hintergrundfarbe peachpuff				Schriftfarbe darkmagenta
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ffdab9	#ffdab9	#ffdab9	#ffdab9	#8b008b	#8b008b	#8b008b	#8b008b
#ffdfc3	#ffdfc3	#daba9e	#daba9e	#9b249b	#9b249b	#770077	#770077
#ffe4cd	#ffe4cd	#b69b84	#b69b84	#ac48ac	#ac48ac	#630063	#630063
#ffe9d7	#ffe9d7	#917c69	#917c69	#bc6dbc	#bc6dbc	#4f004f	#4f004f
#ffefe1	#ffefe1	#6d5d4f	#6d5d4f	#cd91cd	#cd91cd	#3b003b	#3b003b
#fff4eb	#fff4eb	#483e34	#483e34	#ddb6dd	#ddb6dd	#270027	#270027
#fff9f5	#fff9f5	#241f1a	#241f1a	#eedaee	#eedaee	#130013	#130013
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe peachpuff und Farbe darkmagenta

Zebra-Effekt bei HTML-Tag td

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, spricht man vom Zebra-Effekt. Er unterstützt das Auge, etwa die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ung und .ger für <td> mit unterschiedlichen Hintergrundfarben Farbe peachpuff und Farbe darkmagenta.

<style type="text/css"><!--
  td.ung { 
    background-color: peachpuff;
  }
  td.ger { 
    background-color: darkmagenta;
  }
//-->
</style>

Diese Klassen werden dann abwechselnd genutzt.

<table>
<tr><td class="ung">RA:A</td><td class="ger">RB:A</td><td class="ung">RC:A</td></tr>
<tr><td class="ung">RA:B</td><td class="ger">RB:B</td><td class="ung">RC:B</td></tr>
<tr><td class="ung">RA:C</td><td class="ger">RB:C</td><td class="ung">RC:C</td></tr>
</table>

Mehr zum Thema erfahren Sie in Tabellen in HTML. Möglichkeiten des HTML-Tag td sind in der HTML Referenz bei <td> genau zusammengestellt.

Wechsel der Textfarbe bei Hover mit Tag li

Die Textfarbe soll sich von Farbe peachpuff auf Farbe darkmagenta ändern, wenn man mit der Maus auf <li> zeigt. Wir bereiten zunächst die Formatierung von <li> in Farbe peachpuff vor.

Wir legen als Beispiel die Textfarbe von <li> auf Farbe peachpuff fest. Zwar lassen wir die Hintergrundfarbe unverändert, setzen jedoch die Schriftart auf arial.

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

Nun fordern wir, dass sich bei Mausberührung die Textfarbe zu darkmagenta ändert.

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

Weiteres zum Thema können Sie in Listen und Glossare in HTML nachsehen. Weiteres zum hier genutzten HTML-Tag li erfahren Sie in der HTML Referenz unter <li>.