Ressourcen: 120 HTML Farbnamen - Kombination von Farbe indigo und Farbwert #5f9ea0

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 indigo			Schriftfarbwert #5f9ea0
Detail	:	Hintergrund indigo	Detail	:	Schrift #5f9ea0
Farbe	:	indigo	Farbwert	:	#5f9ea0
Farbwert	:	#4b0082	Farbe	:	cadetblue
HTML	:	indigo	HTML	:	#5f9ea0
HTML (Wert)	:	#4b0082	HTML (Wert)	:	#5f9ea0
CSS	:	indigo	CSS	:	#5f9ea0
CSS (Wert)	:	#4b0082	CSS (Wert)	:	#5f9ea0
CSS (kürzest)	:	#4b0082	CSS (kürzest)	:	#5f9ea0
CSS (RGB)	:	rgb(75,0,130)	CSS (RGB)	:	rgb(95,158,160)
CSS (%RGB)	:	rgb(29%,0%,50%)	CSS (%RGB)	:	rgb(37%,61%,62%)

Verlauf Hintergrundfarbe indigo nach Schriftfarbwert #5f9ea0
#4b0082	#4d1686	#502d8a	#53438e	#565a93	#597097	#5c879b	#5f9ea0
#4b0082	#4d1686	#502d8a	#53438e	#565a93	#597097	#5c879b	#5f9ea0

Kombination von indigo und #5f9ea0
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.				Die Ähnlichkeit der Farben #5f9ea0 und indigo beträgt 79.78%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 20.22%. Auf Hintergrund indigo ist #5f9ea0 ungeeignet. Die Unterschiede in der Helligkeit und Farbe sind zu gering.

Hintergrundfarbe indigo				Schriftfarbwert #5f9ea0
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#4b0082	#4b0082	#4b0082	#4b0082	#5f9ea0	#5f9ea0	#5f9ea0	#5f9ea0
#642493	#642493	#40006f	#40006f	#75abad	#75abad	#518789	#518789
#7e48a5	#7e48a5	#35005c	#35005c	#8cb9bb	#8cb9bb	#437072	#437072
#986db7	#986db7	#2a004a	#2a004a	#a3c7c8	#a3c7c8	#365a5b	#365a5b
#b191c9	#b191c9	#200037	#200037	#bad5d6	#bad5d6	#284344	#284344
#cbb6db	#cbb6db	#150025	#150025	#d1e3e3	#d1e3e3	#1b2d2d	#1b2d2d
#e5daed	#e5daed	#0a0012	#0a0012	#e8f1f1	#e8f1f1	#0d1616	#0d1616
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe indigo und Farbwert #5f9ea0

Zebra-Effekt bei Tag tr

Man spricht vom Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Der Effekt unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ying und .yang für <tr> mit den Hintergrundfarben Farbe indigo und Farbwert #5f9ea0.

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

Diese werden abwechselnd genutzt.

<table>
<tr class="ying"><td>Ra:a</td><td>Rb:a</td><td>Rc:a</td></tr>
<tr class="yang"><td>Ra:b</td><td>Rb:b</td><td>Rc:b</td></tr>
<tr class="ying"><td>Ra:c</td><td>Rb:c</td><td>Rc:c</td></tr>
</table>

Weiteres zum Thema finden Sie in Tabellen in HTML. Zur Beschreibung vom hier verwendeten HTML-Befehl <tr>.

Wechsel der Textfarbe bei Hover von HTML-Befehl strong

Die Textfarbe soll sich von Farbe indigo auf Farbwert #5f9ea0 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Formatierung von <strong> in Farbe indigo vor.

Wir setzen für dieses Beispiel bei <strong> die Textfarbe auf Farbe indigo. Zwar behalten wir die Hintergrundfarbe bei, ändern jedoch die Schriftart auf sans-serif.

<style type="text/css"><!--
  strong { 
    color: indigo; 
    font-family: sans-serif;
  }
//-->
</style>

Jetzt fordern wir, dass bei Mausberührung die Textfarbe auf #5f9ea0 gesetzt wird.

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

Mehr zum Thema strong lesen Sie in Text in HTML. Möglichkeiten vom Tag strong sind in der HTML Referenz unter <strong> ausführlich zusammengestellt.