Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #5f9ea0 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 #5f9ea0			Schriftfarbwert #ee82ee
Detail	:	Hintergrund #5f9ea0	Detail	:	Schrift #ee82ee
Farbwert	:	#5f9ea0	Farbwert	:	#ee82ee
Farbe	:	cadetblue	Farbe	:	violet
HTML	:	#5f9ea0	HTML	:	#ee82ee
HTML (Wert)	:	#5f9ea0	HTML (Wert)	:	#ee82ee
CSS	:	#5f9ea0	CSS	:	#ee82ee
CSS (Wert)	:	#5f9ea0	CSS (Wert)	:	#ee82ee
CSS (kürzest)	:	#5f9ea0	CSS (kürzest)	:	#ee82ee
CSS (RGB)	:	rgb(95,158,160)	CSS (RGB)	:	rgb(238,130,238)
CSS (%RGB)	:	rgb(37%,61%,62%)	CSS (%RGB)	:	rgb(93%,50%,93%)

Verlauf Hintergrundfarbwert #5f9ea0 nach Schriftfarbwert #ee82ee
#5f9ea0	#739aab	#8796b6	#9c92c1	#b08ecc	#c58ad7	#d986e2	#ee82ee
#5f9ea0	#739aab	#8796b6	#9c92c1	#b08ecc	#c58ad7	#d986e2	#ee82ee

Kombination von #5f9ea0 und #ee82ee
Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				#ee82ee ist nicht als Schriftfarbe auf Hintergrund #5f9ea0 geeignet, da die Helligkeit und Farben zu ähnlich sind. Die Ähnlichkeit der Farben #ee82ee und #5f9ea0 beträgt 93.73%. Die Lesbarkeit dieser Farbkombination liegt damit bei 6.27%.

Hintergrundfarbwert #5f9ea0				Schriftfarbwert #ee82ee
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#5f9ea0	#5f9ea0	#5f9ea0	#5f9ea0	#ee82ee	#ee82ee	#ee82ee	#ee82ee
#75abad	#75abad	#518789	#518789	#f093f0	#f093f0	#cc6fcc	#cc6fcc
#8cb9bb	#8cb9bb	#437072	#437072	#f2a5f2	#f2a5f2	#aa5caa	#aa5caa
#a3c7c8	#a3c7c8	#365a5b	#365a5b	#f5b7f5	#f5b7f5	#884a88	#884a88
#bad5d6	#bad5d6	#284344	#284344	#f7c9f7	#f7c9f7	#663766	#663766
#d1e3e3	#d1e3e3	#1b2d2d	#1b2d2d	#fadbfa	#fadbfa	#442544	#442544
#e8f1f1	#e8f1f1	#0d1616	#0d1616	#fcedfc	#fcedfc	#221222	#221222
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #5f9ea0 und Farbwert #ee82ee

Wechsel der Hintergrundfarbe bei Hover von HTML-Tag strong

Die Hintergrundfarbe soll sich von Farbwert #5f9ea0 auf Farbwert #ee82ee ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Darstellung von <strong> in Farbwert #5f9ea0 vor.

In diesem Beispiel legen wir Farbwert #5f9ea0 als Hintergrundfarbe von <strong> fest. Die Textfarbe behalten wir bei, setzen jedoch die Schriftart auf monospace.

<style type="text/css"><!--
  strong { 
    font-family: monospace; 
    background-color: #5f9ea0;
  }
//-->
</style>

Jetzt fordern wir, dass bei Mausberührung die Hintergrundfarbe auf #ee82ee gesetzt wird.

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

Mehr zum Thema strong finden Sie in Text in HTML. Einzelheiten vom Tag strong sind in der HTML Referenz unter <strong> zusammengestellt.

Zebra-Effekt bei Befehl td

Man redet von einem so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Der Effekt unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .yang und .ying für <td> mit unterschiedlichen Hintergrundfarben Farbwert #5f9ea0 und Farbwert #ee82ee.

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

Diese werden dann abwechselnd genutzt.

<table>
<tr><td class="yang">Sa~a</td><td class="ying">Sb~a</td><td class="yang">Sc~a</td></tr>
<tr><td class="yang">Sa~b</td><td class="ying">Sb~b</td><td class="yang">Sc~b</td></tr>
<tr><td class="yang">Sa~c</td><td class="ying">Sb~c</td><td class="yang">Sc~c</td></tr>
</table>

Mehr zum Thema finden Sie in Tabellen in HTML. Möglichkeiten vom Befehl td lesen Sie in der HTML Referenz unter <td>.