Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #708090 und Farbwert #ee82ee

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 #708090			Schriftfarbwert #ee82ee
Detail	:	Hintergrund #708090	Detail	:	Schrift #ee82ee
Farbwert	:	#708090	Farbwert	:	#ee82ee
Farbe	:	slategray	Farbe	:	violet
HTML	:	#708090	HTML	:	#ee82ee
HTML (Wert)	:	#708090	HTML (Wert)	:	#ee82ee
CSS	:	#708090	CSS	:	#ee82ee
CSS (Wert)	:	#708090	CSS (Wert)	:	#ee82ee
CSS (kürzest)	:	#708090	CSS (kürzest)	:	#ee82ee
CSS (RGB)	:	rgb(112,128,144)	CSS (RGB)	:	rgb(238,130,238)
CSS (%RGB)	:	rgb(43%,50%,56%)	CSS (%RGB)	:	rgb(93%,50%,93%)

Verlauf Hintergrundfarbwert #708090 nach Schriftfarbwert #ee82ee
#708090	#82809d	#9480aa	#a680b8	#b881c5	#ca81d3	#dc81e0	#ee82ee
#708090	#82809d	#9480aa	#a680b8	#b881c5	#ca81d3	#dc81e0	#ee82ee

Kombination von #708090 und #ee82ee
Cras id velit ante. 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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Die Ähnlichkeit der Farben #ee82ee und #708090 ergibt sich zu 91.67%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 8.33%. #ee82ee ist nicht als Schriftfarbe auf Hintergrund #708090 geeignet. Sowohl Helligkeit als auch die Farben sind zu ähnlich.

Hintergrundfarbwert #708090				Schriftfarbwert #ee82ee
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#708090	#708090	#708090	#708090	#ee82ee	#ee82ee	#ee82ee	#ee82ee
#84929f	#84929f	#606d7b	#606d7b	#f093f0	#f093f0	#cc6fcc	#cc6fcc
#98a4af	#98a4af	#505b66	#505b66	#f2a5f2	#f2a5f2	#aa5caa	#aa5caa
#adb6bf	#adb6bf	#404952	#404952	#f5b7f5	#f5b7f5	#884a88	#884a88
#c1c8cf	#c1c8cf	#30363d	#30363d	#f7c9f7	#f7c9f7	#663766	#663766
#d6dadf	#d6dadf	#202429	#202429	#fadbfa	#fadbfa	#442544	#442544
#eaecef	#eaecef	#101214	#101214	#fcedfc	#fcedfc	#221222	#221222
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #708090 und Farbwert #ee82ee

Zebra-Effekt bei Befehl tr

Man redet von einem so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Der Effekt unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ger und .ung für <tr> mit den Hintergrundfarben Farbwert #708090 und Farbwert #ee82ee.

<style type="text/css"><!--
  tr.ger { 
    background-color:#708090;
  }
  tr.ung { 
    background-color: #ee82ee;
  }
//-->
</style>

Diese werden dann abwechselnd genutzt.

<table>
<tr class="ger"><td>Ja.a</td><td>Jb.a</td><td>Jc.a</td></tr>
<tr class="ung"><td>Ja.b</td><td>Jb.b</td><td>Jc.b</td></tr>
<tr class="ger"><td>Ja.c</td><td>Jb.c</td><td>Jc.c</td></tr>
</table>

Mehr zum Thema können Sie in Tabellen in HTML lesen. Mehr zum hier verwendeten Tag tr finden Sie in der HTML Referenz unter <tr>.

Wechsel der Textfarbe bei Hover mit Tag h4

Mit HTML-Tag <h4> wird eine Überschrift der 4. Stufe erzeugt. Diese können Sie hervorheben und farblich gestalten.

Die Textfarbe soll sich von Farbwert #708090 auf Farbwert #ee82ee ändern, wenn man mit der Maus auf <h4> zeigt. Bereiten wir zunächst eine Formatierung von <h4> in Farbwert #708090 vor.

In diesem Beispiel legen wir bei <h4> die Textfarbe auf Farbwert #708090 fest. Die Größe der Schrift ändern wir auf 13px:

<style type="text/css"><!--
  h4 { 
    color: #708090; 
    font-size: 13px;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Mausberührung die Textfarbe zu #ee82ee ändert.

<style type="text/css"><!--
  h4:hover { 
    color:#ee82ee;
  }
//-->
</style>

Mehr zu h4 können Sie in Grundlegende Gestaltungselemente in HTML erfahren. Mehr zum Tag h4 finden Sie in der HTML Referenz unter <h4>.