Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #4169e1 und Farbwert #4b0082

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 #4169e1			Schriftfarbwert #4b0082
Detail	:	Hintergrund #4169e1	Detail	:	Schrift #4b0082
Farbwert	:	#4169e1	Farbwert	:	#4b0082
Farbe	:	royalblue	Farbe	:	indigo
HTML	:	#4169e1	HTML	:	#4b0082
HTML (Wert)	:	#4169e1	HTML (Wert)	:	#4b0082
CSS	:	#4169e1	CSS	:	#4b0082
CSS (Wert)	:	#4169e1	CSS (Wert)	:	#4b0082
CSS (kürzest)	:	#4169e1	CSS (kürzest)	:	#4b0082
CSS (RGB)	:	rgb(65,105,225)	CSS (RGB)	:	rgb(75,0,130)
CSS (%RGB)	:	rgb(25%,41%,88%)	CSS (%RGB)	:	rgb(29%,0%,50%)

Verlauf Hintergrundfarbwert #4169e1 nach Schriftfarbwert #4b0082
#4169e1	#425ad3	#434bc5	#453cb8	#462daa	#481e9d	#490f8f	#4b0082
#4169e1	#425ad3	#434bc5	#453cb8	#462daa	#481e9d	#490f8f	#4b0082

Kombination von #4169e1 und #4b0082
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. 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 von #4b0082 und #4169e1 beträgt 87.28%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 12.72%. #4b0082 ist nicht als Schriftfarbe auf Hintergrund #4169e1 geeignet, weil die Unterschiede in der Helligkeit und Farbe zu gering sind.

Hintergrundfarbwert #4169e1				Schriftfarbwert #4b0082
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#4169e1	#4169e1	#4169e1	#4169e1	#4b0082	#4b0082	#4b0082	#4b0082
#5c7ee5	#5c7ee5	#375ac0	#375ac0	#642493	#642493	#40006f	#40006f
#7793e9	#7793e9	#2e4ba0	#2e4ba0	#7e48a5	#7e48a5	#35005c	#35005c
#92a9ed	#92a9ed	#253c80	#253c80	#986db7	#986db7	#2a004a	#2a004a
#adbef2	#adbef2	#1b2d60	#1b2d60	#b191c9	#b191c9	#200037	#200037
#c8d4f6	#c8d4f6	#121e40	#121e40	#cbb6db	#cbb6db	#150025	#150025
#e3e9fa	#e3e9fa	#090f20	#090f20	#e5daed	#e5daed	#0a0012	#0a0012
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #4169e1 und Farbwert #4b0082

Zebra-Effekt von HTML-Befehl th

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, spricht man vom so genannten Zebra-Effekt. Der Effekt unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ger und .ung für <th> mit unterschiedlichen Hintergrundfarben Farbwert #4169e1 und Farbwert #4b0082.

<style type="text/css"><!--
  th.ger { 
    background-color: #4169e1;
  }
  th.ung { 
    background-color:#4b0082;
  }
//-->
</style>

Diese werden abwechselnd verwendet.

<table>
<tr><td class="ger">Qa/a</td><td class="ung">Qb/a</td><td class="ger">Qc/a</td></tr>
<tr><td class="ger">Qa/b</td><td class="ung">Qb/b</td><td class="ger">Qc/b</td></tr>
<tr><td class="ger">Qa/c</td><td class="ung">Qb/c</td><td class="ger">Qc/c</td></tr>
</table>

Weiteres zum Thema th können Sie in Tabellen in HTML erfahren. Mehr zum hier genutzten HTML-Befehl th lesen Sie in der HTML Referenz unter <th>.

Wechsel der Umrandung bei Hover von HTML-Tag var

Die Rahmenfarbe soll sich von Farbwert #4169e1 auf Farbwert #4b0082 ändern, wenn man mit der Maus auf <var> zeigt. Wir bereiten zunächst die Darstellung von <var> in Farbwert #4169e1 vor.

In diesem Beispiel umranden wir <var> mit einem 2 Pixel dicken, herausstehenden Rahmen in Farbwert #4169e1.

<style type="text/css"><!--
  var { border:2px outset #4169e1; }
//-->
</style>

Nun fordern wir, dass bei Berührung mit der Maus die Rahmenfarbe auf #4b0082 gesetzt wird.

<style type="text/css"><!--
  var:hover { 
    border-color:#4b0082;
  }
//-->
</style>

Mehr zum Thema var finden Sie in Text in HTML. Mehr zum hier verwendeten HTML-Befehl var ist in der HTML Referenz bei <var> genau beschrieben.