Ressourcen: 137 HTML Farbnamen - Kombination von Farbe palevioletred und Farbwert #8fbc8f

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.

Hintergrundfarbe palevioletred			Schriftfarbwert #8fbc8f
Detail	:	Hintergrund palevioletred	Detail	:	Schrift #8fbc8f
Farbe	:	palevioletred	Farbwert	:	#8fbc8f
Farbwert	:	#db7093	Farbe	:	darkseagreen
HTML	:	palevioletred	HTML	:	#8fbc8f
HTML (Wert)	:	#db7093	HTML (Wert)	:	#8fbc8f
CSS	:	palevioletred	CSS	:	#8fbc8f
CSS (Wert)	:	#db7093	CSS (Wert)	:	#8fbc8f
CSS (kürzest)	:	#db7093	CSS (kürzest)	:	#8fbc8f
CSS (RGB)	:	rgb(219,112,147)	CSS (RGB)	:	rgb(143,188,143)
CSS (%RGB)	:	rgb(85%,43%,57%)	CSS (%RGB)	:	rgb(56%,73%,56%)

Verlauf Hintergrundfarbe palevioletred nach Schriftfarbwert #8fbc8f
#db7093	#d07a92	#c58591	#ba9091	#af9b90	#a4a690	#99b18f	#8fbc8f
#db7093	#d07a92	#c58591	#ba9091	#af9b90	#a4a690	#99b18f	#8fbc8f

Kombination von palevioletred und #8fbc8f
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 vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante.				Die Ähnlichkeit der Farben #8fbc8f und palevioletred beträgt 93.12%. Die Lesbarkeit dieser Kombination ergibt sich zu 6.88%. #8fbc8f ist nicht als Schriftfarbe auf Hintergrund palevioletred geeignet. Die Helligkeit und Farben sind sich zu ähnlich.

Hintergrundfarbe palevioletred				Schriftfarbwert #8fbc8f
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#db7093	#db7093	#db7093	#db7093	#8fbc8f	#8fbc8f	#8fbc8f	#8fbc8f
#e084a2	#e084a2	#bb607e	#bb607e	#9fc59f	#9fc59f	#7aa17a	#7aa17a
#e598b1	#e598b1	#9c5069	#9c5069	#afcfaf	#afcfaf	#668666	#668666
#eaadc1	#eaadc1	#7d4054	#7d4054	#bfd8bf	#bfd8bf	#516b51	#516b51
#efc1d0	#efc1d0	#5d303f	#5d303f	#cfe2cf	#cfe2cf	#3d503d	#3d503d
#f4d6e0	#f4d6e0	#3e202a	#3e202a	#dfebdf	#dfebdf	#283528	#283528
#f9eaef	#f9eaef	#1f1015	#1f1015	#eff5ef	#eff5ef	#141a14	#141a14
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe palevioletred und Farbwert #8fbc8f

Wechsel der Hintergrundfarbe bei Hover mit Tag h2

Eine Überschrift der 2. Stufe wird mit HTML-Tag <h2> gesetzt. Diese kann man farblich gestalten und hervorheben.

Die Hintergrundfarbe soll sich von Farbe palevioletred auf Farbwert #8fbc8f ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Formatierung von <h2> in Farbe palevioletred vor.

Zum Beispiel legen wir Farbe palevioletred als Hintergrundfarbe von <h2> fest. Zwar lassen wir die Textfarbe unverändert, setzen jedoch die Schriftart auf monospace:

<style type="text/css"><!--
  h2 { 
    font-family:monospace; 
    background-color:palevioletred;
  }
//-->
</style>

Nun fordern wir, dass bei Hover die Hintergrundfarbe auf #8fbc8f gesetzt wird.

<style type="text/css"><!--
  h2:hover { 
    background-color:#8fbc8f;
  }
//-->
</style>

Weiteres zum Thema h2 erfahren Sie in Grundlegende Gestaltungselemente in HTML. Weiteres zum hier gezeigten Tag <h2>.

Zebra-Effekt mit Tag td

Man redet vom so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Dieser Effekt unterstützt das Auge zum Beispiel die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ung und .ger für <td> mit unterschiedlichen Hintergrundfarben Farbe palevioletred und Farbwert #8fbc8f.

<style type="text/css"><!--
  td.ung { 
    background-color: palevioletred;
  }
  td.ger { 
    background-color:#8fbc8f;
  }
//-->
</style>

Diese Klassen werden dann abwechselnd verwendet.

<table>
<tr><td class="ung">M1:1</td><td class="ger">M2:1</td><td class="ung">M3:1</td></tr>
<tr><td class="ung">M1:2</td><td class="ger">M2:2</td><td class="ung">M3:2</td></tr>
<tr><td class="ung">M1:3</td><td class="ger">M2:3</td><td class="ung">M3:3</td></tr>
</table>

Weiteres zu td erfahren Sie in Tabellen in HTML. Mehr zum Befehl <td>.