Ressourcen: 120 HTML Farbnamen - Kombination von Farbe darkolivegreen und Farbwert #db7093

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.

Hintergrundfarbe darkolivegreen			Schriftfarbwert #db7093
Detail	:	Hintergrund darkolivegreen	Detail	:	Schrift #db7093
Farbe	:	darkolivegreen	Farbwert	:	#db7093
Farbwert	:	#556b2f	Farbe	:	palevioletred
HTML	:	darkolivegreen	HTML	:	#db7093
HTML (Wert)	:	#556b2f	HTML (Wert)	:	#db7093
CSS	:	darkolivegreen	CSS	:	#db7093
CSS (Wert)	:	#556b2f	CSS (Wert)	:	#db7093
CSS (kürzest)	:	#556b2f	CSS (kürzest)	:	#db7093
CSS (RGB)	:	rgb(85,107,47)	CSS (RGB)	:	rgb(219,112,147)
CSS (%RGB)	:	rgb(33%,41%,18%)	CSS (%RGB)	:	rgb(85%,43%,57%)

Verlauf Hintergrundfarbe darkolivegreen nach Schriftfarbwert #db7093
#556b2f	#686b3d	#7b6c4b	#8e6d59	#a16d68	#b46e76	#c76f84	#db7093
#556b2f	#686b3d	#7b6c4b	#8e6d59	#a16d68	#b46e76	#c76f84	#db7093

Kombination von darkolivegreen und #db7093
Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. 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.				Die Ähnlichkeit von #db7093 und darkolivegreen ergibt sich zu 90.89%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 9.11%. #db7093 eignet sich nicht als Schriftfarbe auf Hintergrund darkolivegreen. Sowohl Helligkeit als auch die Farben sind zu ähnlich.

Hintergrundfarbe darkolivegreen				Schriftfarbwert #db7093
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#556b2f	#556b2f	#556b2f	#556b2f	#db7093	#db7093	#db7093	#db7093
#6d804c	#6d804c	#485b28	#485b28	#e084a2	#e084a2	#bb607e	#bb607e
#85956a	#85956a	#3c4c21	#3c4c21	#e598b1	#e598b1	#9c5069	#9c5069
#9daa88	#9daa88	#303d1a	#303d1a	#eaadc1	#eaadc1	#7d4054	#7d4054
#b6bfa5	#b6bfa5	#242d14	#242d14	#efc1d0	#efc1d0	#5d303f	#5d303f
#ced4c3	#ced4c3	#181e0d	#181e0d	#f4d6e0	#f4d6e0	#3e202a	#3e202a
#e6e9e1	#e6e9e1	#0c0f06	#0c0f06	#f9eaef	#f9eaef	#1f1015	#1f1015
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe darkolivegreen und Farbwert #db7093

Zebra-Effekt mit Tag td

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, spricht man vom so genannten Zebra-Effekt. Er unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .yang und .ying für <td> mit den Hintergrundfarben Farbe darkolivegreen und Farbwert #db7093.

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

Diese werden abwechselnd angewendet.

<table>
<tr><td class="yang">PA:A</td><td class="ying">PB:A</td><td class="yang">PC:A</td></tr>
<tr><td class="yang">PA:B</td><td class="ying">PB:B</td><td class="yang">PC:B</td></tr>
<tr><td class="yang">PA:C</td><td class="ying">PB:C</td><td class="yang">PC:C</td></tr>
</table>

Weiteres zu td können Sie in Tabellen in HTML nachlesen. Einzelheiten des Tag td sind in der HTML Referenz unter <td> genau zusammengestellt.

Wechsel der Hintergrundfarbe bei Hover von Tag caption

Die Hintergrundfarbe soll sich von Farbe darkolivegreen auf Farbwert #db7093 ändern, wenn man mit der Maus auf <caption> zeigt. Bereiten wir zunächst eine Formatierung von <caption> in Farbe darkolivegreen vor.

Für dieses Beispiel legen wir die Hintergrundfarbe von <caption> auf Farbe darkolivegreen fest und ändern die Schriftgröße auf 14pt:

<style type="text/css"><!--
  caption { 
    background-color:darkolivegreen; 
    font-size:14pt;
  }
//-->
</style>

Jetzt fordern wir, dass bei Berührung mit der Maus die Hintergrundfarbe auf #db7093 geändert wird.

<style type="text/css"><!--
  caption:hover { 
    background-color:#db7093;
  }
//-->
</style>

Mehr zum Thema caption lesen Sie in Tabellen in HTML. Weiteres zum Tag caption finden Sie in der HTML Referenz unter <caption>.