Ressourcen: 137 HTML Farbnamen - Kombination von Farbe peachpuff und Farbwert #ba55d3

Netscape führte seinerzeit die websicheren Farben ein. Neben diesen, einem bestimmten Schema folgenden, Farbwerten, definierte man noch 120 Werte und ordnete ihnen Namen zu. Zusammen mit den 17 Standard-HTML-Farben, die ebenfalls Namen haben, ergeben sich so 137 HTML Farbnamen.

Hintergrundfarbe peachpuff			Schriftfarbwert #ba55d3
Detail	:	Hintergrund peachpuff	Detail	:	Schrift #ba55d3
Farbe	:	peachpuff	Farbwert	:	#ba55d3
Farbwert	:	#ffdab9	Farbe	:	mediumorchid
HTML	:	peachpuff	HTML	:	#ba55d3
HTML (Wert)	:	#ffdab9	HTML (Wert)	:	#ba55d3
CSS	:	peachpuff	CSS	:	#ba55d3
CSS (Wert)	:	#ffdab9	CSS (Wert)	:	#ba55d3
CSS (kürzest)	:	#ffdab9	CSS (kürzest)	:	#ba55d3
CSS (RGB)	:	rgb(255,218,185)	CSS (RGB)	:	rgb(186,85,211)
CSS (%RGB)	:	rgb(100%,85%,72%)	CSS (%RGB)	:	rgb(72%,33%,82%)

Verlauf Hintergrundfarbe peachpuff nach Schriftfarbwert #ba55d3
#ffdab9	#f5c7bc	#ebb4c0	#e1a1c4	#d78ec7	#cd7bcb	#c368cf	#ba55d3
#ffdab9	#f5c7bc	#ebb4c0	#e1a1c4	#d78ec7	#cd7bcb	#c368cf	#ba55d3

Kombination von peachpuff und #ba55d3
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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante.				#ba55d3 eignet sich nicht als Schriftfarbe auf Hintergrund peachpuff. Weder der Helligkeitsunterschied noch der Farbunterschied sind geeignet. Die Ähnlichkeit von #ba55d3 und peachpuff beträgt 85.72%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 14.28%.

Hintergrundfarbe peachpuff				Schriftfarbwert #ba55d3
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ffdab9	#ffdab9	#ffdab9	#ffdab9	#ba55d3	#ba55d3	#ba55d3	#ba55d3
#ffdfc3	#ffdfc3	#daba9e	#daba9e	#c36dd9	#c36dd9	#9f48b4	#9f48b4
#ffe4cd	#ffe4cd	#b69b84	#b69b84	#cd85df	#cd85df	#843c96	#843c96
#ffe9d7	#ffe9d7	#917c69	#917c69	#d79de5	#d79de5	#6a3078	#6a3078
#ffefe1	#ffefe1	#6d5d4f	#6d5d4f	#e1b6ec	#e1b6ec	#4f245a	#4f245a
#fff4eb	#fff4eb	#483e34	#483e34	#ebcef2	#ebcef2	#35183c	#35183c
#fff9f5	#fff9f5	#241f1a	#241f1a	#f5e6f8	#f5e6f8	#1a0c1e	#1a0c1e
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe peachpuff und Farbwert #ba55d3

Wechsel der Umrandung bei Hover von Befehl li

Die Rahmenfarbe soll sich von Farbe peachpuff auf Farbwert #ba55d3 ändern, wenn man mit der Maus auf <li> zeigt. Wir bereiten zunächst eine Formatierung von <li> in Farbe peachpuff vor.

In diesem Beispiel umranden wir <li> mit einem 5 Pixel dicken, herausstehenden Rahmen in Farbe peachpuff.

<style type="text/css"><!--
  li { 
    border-style: outset; 
    border-color: peachpuff; 
    border-width: 5px;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Berührung mit der Maus die Rahmenfarbe zu #ba55d3 ändert.

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

Weiteres zum Thema finden Sie in Listen und Glossare in HTML. Weiteres zum hier verwendeten HTML-Befehl li lesen Sie in der HTML Referenz unter <li>.

Zebra-Effekt von Tag tr

Man spricht vom Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Der Effekt unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .odd und .even für <tr> mit den Hintergrundfarben Farbe peachpuff und Farbwert #ba55d3.

<style type="text/css"><!--
  tr.odd { 
    background-color: peachpuff;
  }
  tr.even { 
    background-color:#ba55d3;
  }
//-->
</style>

Diese werden dann abwechselnd genutzt.

<table>
<tr class="odd"><td>Ta~a</td><td>Tb~a</td><td>Tc~a</td></tr>
<tr class="even"><td>Ta~b</td><td>Tb~b</td><td>Tc~b</td></tr>
<tr class="odd"><td>Ta~c</td><td>Tb~c</td><td>Tc~c</td></tr>
</table>

Weiteres zum Thema tr lesen Sie in Tabellen in HTML. Möglichkeiten vom hier genutzten HTML-Tag tr lesen Sie in der HTML Referenz unter <tr>.