Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #696969 und Farbe plum

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.

Hintergrundfarbwert #696969			Schriftfarbe plum
Detail	:	Hintergrund #696969	Detail	:	Schrift plum
Farbwert	:	#696969	Farbe	:	plum
Farbe	:	dimgray	Farbwert	:	#dda0dd
HTML	:	#696969	HTML	:	plum
HTML (Wert)	:	#696969	HTML (Wert)	:	#dda0dd
CSS	:	#696969	CSS	:	plum
CSS (Wert)	:	#696969	CSS (Wert)	:	#dda0dd
CSS (kürzest)	:	#696969	CSS (kürzest)	:	#dda0dd
CSS (RGB)	:	rgb(105,105,105)	CSS (RGB)	:	rgb(221,160,221)
CSS (%RGB)	:	rgb(41%,41%,41%)	CSS (%RGB)	:	rgb(86%,62%,86%)

Verlauf Hintergrundfarbwert #696969 nach Schriftfarbe plum
#696969	#797079	#8a788a	#9a809a	#ab88ab	#bb90bb	#cc98cc	#dda0dd
#696969	#797079	#8a788a	#9a809a	#ab88ab	#bb90bb	#cc98cc	#dda0dd

Kombination von #696969 und plum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in.				Auf Hintergrund #696969 ist plum ungeeignet. Die Unterschiede in der Helligkeit und Farbe sind zu gering. Die Ähnlichkeit der Farben plum und #696969 beträgt 87.37%. Die Lesbarkeit dieser Farbkombination liegt damit bei 12.63%.

Hintergrundfarbwert #696969				Schriftfarbe plum
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#696969	#696969	#696969	#696969	#dda0dd	#dda0dd	#dda0dd	#dda0dd
#7e7e7e	#7e7e7e	#5a5a5a	#5a5a5a	#e1ade1	#e1ade1	#bd89bd	#bd89bd
#939393	#939393	#4b4b4b	#4b4b4b	#e6bbe6	#e6bbe6	#9d729d	#9d729d
#a9a9a9	#a9a9a9	#3c3c3c	#3c3c3c	#ebc8eb	#ebc8eb	#7e5b7e	#7e5b7e
#bebebe	#bebebe	#2d2d2d	#2d2d2d	#f0d6f0	#f0d6f0	#5e445e	#5e445e
#d4d4d4	#d4d4d4	#1e1e1e	#1e1e1e	#f5e3f5	#f5e3f5	#3f2d3f	#3f2d3f
#e9e9e9	#e9e9e9	#0f0f0f	#0f0f0f	#faf1fa	#faf1fa	#1f161f	#1f161f
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #696969 und Farbe plum

Wechsel der Umrandung bei Hover bei HTML-Tag colgroup

Die Rahmenfarbe soll sich von Farbwert #696969 auf Farbe plum ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Formatierung von <colgroup> in Farbwert #696969 vor.

In diesem Beispiel umranden wir <colgroup> mit einem 5 Pixel dicken, gezahnten Rahmen in Farbwert #696969.

<style type="text/css"><!--
  colgroup { border:5px ridge #696969; }
//-->
</style>

Jetzt stellen wir ein, dass bei Hover die Rahmenfarbe auf plum gesetzt wird.

<style type="text/css"><!--
  colgroup:hover { 
    border-color:plum;
  }
//-->
</style>

Weiteres zu colgroup erfahren Sie in Tabellen in HTML. Möglichkeiten des hier verwendeten HTML-Tag colgroup lesen Sie in der HTML Referenz unter <colgroup>.

Zebra-Effekt bei Tag th

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, redet man vom Zebra-Effekt. Dieser Effekt unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ung und .ger für <th> mit den Hintergrundfarben Farbwert #696969 und Farbe plum.

<style type="text/css"><!--
  th.ung { 
    background-color: #696969;
  }
  th.ger { 
    background-color: plum;
  }
//-->
</style>

Diese werden dann abwechselnd genutzt.

<table>
<tr><td class="ung">Va.a</td><td class="ger">Vb.a</td><td class="ung">Vc.a</td></tr>
<tr><td class="ung">Va.b</td><td class="ger">Vb.b</td><td class="ung">Vc.b</td></tr>
<tr><td class="ung">Va.c</td><td class="ger">Vb.c</td><td class="ung">Vc.c</td></tr>
</table>

Mehr zum Thema th lesen Sie in Tabellen in HTML. Weiteres zum hier verwendeten Befehl <th>.