Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #d8bfd8 und Farbwert #8b0000

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 #d8bfd8			Schriftfarbwert #8b0000
Detail	:	Hintergrund #d8bfd8	Detail	:	Schrift #8b0000
Farbwert	:	#d8bfd8	Farbwert	:	#8b0000
Farbe	:	thistle	Farbe	:	darkred
HTML	:	#d8bfd8	HTML	:	#8b0000
HTML (Wert)	:	#d8bfd8	HTML (Wert)	:	#8b0000
CSS	:	#d8bfd8	CSS	:	#8b0000
CSS (Wert)	:	#d8bfd8	CSS (Wert)	:	#8b0000
CSS (kürzest)	:	#d8bfd8	CSS (kürzest)	:	#8b0000
CSS (RGB)	:	rgb(216,191,216)	CSS (RGB)	:	rgb(139,0,0)
CSS (%RGB)	:	rgb(84%,74%,84%)	CSS (%RGB)	:	rgb(54%,0%,0%)

Verlauf Hintergrundfarbwert #d8bfd8 nach Schriftfarbwert #8b0000
#d8bfd8	#cda3b9	#c2889a	#b76d7b	#ac515c	#a1363d	#961b1e	#8b0000
#d8bfd8	#cda3b9	#c2889a	#b76d7b	#ac515c	#a1363d	#961b1e	#8b0000

Kombination von #d8bfd8 und #8b0000
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. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				Die Ähnlichkeit von #8b0000 und #d8bfd8 beträgt 71.93%. Die Lesbarkeit dieser Kombination bewerte ich mit 28.07%. #8b0000 ist nicht als Schriftfarbe auf Hintergrund #d8bfd8 geeignet. Zwar ist der Helligkeitsunterschied gut, die Farben selbst sind jedoch zu ähnlich.

Hintergrundfarbwert #d8bfd8				Schriftfarbwert #8b0000
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#d8bfd8	#d8bfd8	#d8bfd8	#d8bfd8	#8b0000	#8b0000	#8b0000	#8b0000
#ddc8dd	#ddc8dd	#b9a3b9	#b9a3b9	#9b2424	#9b2424	#770000	#770000
#e3d1e3	#e3d1e3	#9a889a	#9a889a	#ac4848	#ac4848	#630000	#630000
#e8dae8	#e8dae8	#7b6d7b	#7b6d7b	#bc6d6d	#bc6d6d	#4f0000	#4f0000
#eee3ee	#eee3ee	#5c515c	#5c515c	#cd9191	#cd9191	#3b0000	#3b0000
#f3ecf3	#f3ecf3	#3d363d	#3d363d	#ddb6b6	#ddb6b6	#270000	#270000
#f9f5f9	#f9f5f9	#1e1b1e	#1e1b1e	#eedada	#eedada	#130000	#130000
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #d8bfd8 und Farbwert #8b0000

Wechsel der Umrandung bei Hover mit HTML-Befehl hr

Die Rahmenfarbe soll sich von Farbwert #d8bfd8 auf Farbwert #8b0000 ändern, wenn man mit der Maus auf <hr> zeigt. Bereiten wir zunächst die Darstellung von <hr> in Farbwert #d8bfd8 vor.

In diesem Beispiel umranden wir <hr> mit einem 3 Pixel dicken, gepunkteten Rahmen in Farbwert #d8bfd8.

<style type="text/css"><!--
  hr { 
    border-style: dotted; 
    border-color: #d8bfd8; 
    border-width: 3px;
  }
//-->
</style>

Jetzt stellen wir ein, dass bei Mausberührung die Rahmenfarbe auf #8b0000 gesetzt wird.

<style type="text/css"><!--
  hr: hover { 
    border-color: #8b0000;
  }
//-->
</style>

Weiteres zum Thema hr finden Sie in Grundlegende Gestaltungselemente in HTML. Einzelheiten vom hier gezeigten Befehl hr sind in der HTML Referenz unter <hr> ausführlich zusammengestellt.

Zebra-Effekt von Tag td

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, spricht man vom Zebra-Effekt. Dieser Effekt unterstützt das Auge, etwa die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ying und .yang für <td> mit unterschiedlichen Hintergrundfarben Farbwert #d8bfd8 und Farbwert #8b0000.

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

Diese werden dann abwechselnd verwendet.

<table>
<tr><td class="ying">X1.1</td><td class="yang">X2.1</td><td class="ying">X3.1</td></tr>
<tr><td class="ying">X1.2</td><td class="yang">X2.2</td><td class="ying">X3.2</td></tr>
<tr><td class="ying">X1.3</td><td class="yang">X2.3</td><td class="ying">X3.3</td></tr>
</table>

Mehr zum Thema td können Sie in Tabellen in HTML finden. Zur Beschreibung des hier verwendeten Befehl <td>.