Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #8a2be2 und Farbwert #ffdab9

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.

Hintergrundfarbwert #8a2be2			Schriftfarbwert #ffdab9
Detail	:	Hintergrund #8a2be2	Detail	:	Schrift #ffdab9
Farbwert	:	#8a2be2	Farbwert	:	#ffdab9
Farbe	:	blueviolet	Farbe	:	peachpuff
HTML	:	#8a2be2	HTML	:	#ffdab9
HTML (Wert)	:	#8a2be2	HTML (Wert)	:	#ffdab9
CSS	:	#8a2be2	CSS	:	#ffdab9
CSS (Wert)	:	#8a2be2	CSS (Wert)	:	#ffdab9
CSS (kürzest)	:	#8a2be2	CSS (kürzest)	:	#ffdab9
CSS (RGB)	:	rgb(138,43,226)	CSS (RGB)	:	rgb(255,218,185)
CSS (%RGB)	:	rgb(54%,16%,88%)	CSS (%RGB)	:	rgb(100%,85%,72%)

Verlauf Hintergrundfarbwert #8a2be2 nach Schriftfarbwert #ffdab9
#8a2be2	#9a44dc	#ab5dd6	#bc76d0	#cc8fca	#dda8c4	#eec1be	#ffdab9
#8a2be2	#9a44dc	#ab5dd6	#bc76d0	#cc8fca	#dda8c4	#eec1be	#ffdab9

Kombination von #8a2be2 und #ffdab9
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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				#ffdab9 ist nicht als Schriftfarbe auf Hintergrund #8a2be2 geeignet. Zwar ist der Helligkeitsunterschied gross genug, doch die Farben selbst sind zu ähnlich. Die Ähnlichkeit von #ffdab9 und #8a2be2 beträgt 78.41%. Die Lesbarkeit dieser Kombination liegt damit bei 21.59%.

Hintergrundfarbwert #8a2be2				Schriftfarbwert #ffdab9
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#8a2be2	#8a2be2	#8a2be2	#8a2be2	#ffdab9	#ffdab9	#ffdab9	#ffdab9
#9a49e6	#9a49e6	#7624c1	#7624c1	#ffdfc3	#ffdfc3	#daba9e	#daba9e
#ab67ea	#ab67ea	#621ea1	#621ea1	#ffe4cd	#ffe4cd	#b69b84	#b69b84
#bc85ee	#bc85ee	#4e1881	#4e1881	#ffe9d7	#ffe9d7	#917c69	#917c69
#cca4f2	#cca4f2	#3b1260	#3b1260	#ffefe1	#ffefe1	#6d5d4f	#6d5d4f
#ddc2f6	#ddc2f6	#270c40	#270c40	#fff4eb	#fff4eb	#483e34	#483e34
#eee0fa	#eee0fa	#130620	#130620	#fff9f5	#fff9f5	#241f1a	#241f1a
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #8a2be2 und Farbwert #ffdab9

Wechsel der Umrandung bei Hover bei Tag blockquote

Die Rahmenfarbe soll sich von Farbwert #8a2be2 auf Farbwert #ffdab9 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Darstellung von <blockquote> in Farbwert #8a2be2 vor.

In diesem Beispiel umranden wir <blockquote> mit einem 2 Pixel dicken, gepunkteten Rahmen in Farbwert #8a2be2.

<style type="text/css"><!--
  blockquote { 
    border-style: dotted; 
    border-width: 2px; 
    border-color: #8a2be2;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Hover die Rahmenfarbe zu #ffdab9 ändert.

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

Mehr zu blockquote finden Sie in Blockorientierte Elemente in HTML. Möglichkeiten vom hier gezeigten HTML-Befehl <blockquote>.

Zebra-Effekt bei HTML-Befehl td

Man spricht vom Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Der Effekt unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ying und .yang für <td> mit den Hintergrundfarben Farbwert #8a2be2 und Farbwert #ffdab9.

<style type="text/css"><!--
  td.ying { 
    background-color: #8a2be2;
  }
  td.yang { 
    background-color:#ffdab9;
  }
//-->
</style>

Diese werden abwechselnd verwendet.

<table>
<tr><td class="ying">Ga/a</td><td class="yang">Gb/a</td><td class="ying">Gc/a</td></tr>
<tr><td class="ying">Ga/b</td><td class="yang">Gb/b</td><td class="ying">Gc/b</td></tr>
<tr><td class="ying">Ga/c</td><td class="yang">Gb/c</td><td class="ying">Gc/c</td></tr>
</table>

Weiteres zu td können Sie in Tabellen in HTML nachlesen. Möglichkeiten vom Befehl <td>.