Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #d8bfd8 und Farbwert #00ced1

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 #00ced1
Detail	:	Hintergrund #d8bfd8	Detail	:	Schrift #00ced1
Farbwert	:	#d8bfd8	Farbwert	:	#00ced1
Farbe	:	thistle	Farbe	:	darkturquoise
HTML	:	#d8bfd8	HTML	:	#00ced1
HTML (Wert)	:	#d8bfd8	HTML (Wert)	:	#00ced1
CSS	:	#d8bfd8	CSS	:	#00ced1
CSS (Wert)	:	#d8bfd8	CSS (Wert)	:	#00ced1
CSS (kürzest)	:	#d8bfd8	CSS (kürzest)	:	#00ced1
CSS (RGB)	:	rgb(216,191,216)	CSS (RGB)	:	rgb(0,206,209)
CSS (%RGB)	:	rgb(84%,74%,84%)	CSS (%RGB)	:	rgb(0%,80%,81%)

Verlauf Hintergrundfarbwert #d8bfd8 nach Schriftfarbwert #00ced1
#d8bfd8	#b9c1d7	#9ac3d6	#7bc5d5	#5cc7d4	#3dc9d3	#1ecbd2	#00ced1
#d8bfd8	#b9c1d7	#9ac3d6	#7bc5d5	#5cc7d4	#3dc9d3	#1ecbd2	#00ced1

Kombination von #d8bfd8 und #00ced1
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. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				Auf Hintergrund #d8bfd8 ist #00ced1 ungeeignet. Weder der Helligkeitsunterschied noch der Farbunterschied sind gross genug. Die Ähnlichkeit der Farben #00ced1 und #d8bfd8 ergibt sich zu 94.52%. Die Lesbarkeit dieser Farbkombination liegt damit bei 5.48%.

Hintergrundfarbwert #d8bfd8				Schriftfarbwert #00ced1
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#d8bfd8	#d8bfd8	#d8bfd8	#d8bfd8	#00ced1	#00ced1	#00ced1	#00ced1
#ddc8dd	#ddc8dd	#b9a3b9	#b9a3b9	#24d5d7	#24d5d7	#00b0b3	#00b0b3
#e3d1e3	#e3d1e3	#9a889a	#9a889a	#48dcde	#48dcde	#009395	#009395
#e8dae8	#e8dae8	#7b6d7b	#7b6d7b	#6de3e4	#6de3e4	#007577	#007577
#eee3ee	#eee3ee	#5c515c	#5c515c	#91eaeb	#91eaeb	#005859	#005859
#f3ecf3	#f3ecf3	#3d363d	#3d363d	#b6f1f1	#b6f1f1	#003a3b	#003a3b
#f9f5f9	#f9f5f9	#1e1b1e	#1e1b1e	#daf8f8	#daf8f8	#001d1d	#001d1d
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #d8bfd8 und Farbwert #00ced1

Zebra-Effekt mit HTML-Befehl th

Man spricht von einem so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Er unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ger und .ung für <th> mit unterschiedlichen Hintergrundfarben Farbwert #d8bfd8 und Farbwert #00ced1.

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

Diese Klassen werden dann abwechselnd genutzt.

<table>
<tr><td class="ger">Ea/a</td><td class="ung">Eb/a</td><td class="ger">Ec/a</td></tr>
<tr><td class="ger">Ea/b</td><td class="ung">Eb/b</td><td class="ger">Ec/b</td></tr>
<tr><td class="ger">Ea/c</td><td class="ung">Eb/c</td><td class="ger">Ec/c</td></tr>
</table>

Mehr zu th lesen Sie in Tabellen in HTML. Möglichkeiten vom HTML-Tag th finden Sie in der HTML Referenz unter <th>.

Wechsel der Hintergrundfarbe bei Hover von Befehl tfoot

Die Hintergrundfarbe soll sich von Farbwert #d8bfd8 auf Farbwert #00ced1 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Formatierung von <tfoot> in Farbwert #d8bfd8 vor.

Zum Beispiel legen wir Farbwert #d8bfd8 als Hintergrundfarbe von <tfoot> fest:

<style type="text/css"><!--
  tfoot { 
    background-color: #d8bfd8;
  }
//-->
</style>

Jetzt stellen wir ein, dass bei Hover die Hintergrundfarbe auf #00ced1 geändert wird.

<style type="text/css"><!--
  tfoot:hover { 
    background-color:#00ced1;
  }
//-->
</style>

Mehr zu tfoot können Sie in Tabellen in HTML finden. Der Tag tfoot ist in der HTML Referenz unter <tfoot> ausführlich zusammengestellt.