Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #4169e1 und Farbwert #32cd32

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.

Hintergrundfarbwert #4169e1			Schriftfarbwert #32cd32
Detail	:	Hintergrund #4169e1	Detail	:	Schrift #32cd32
Farbwert	:	#4169e1	Farbwert	:	#32cd32
Farbe	:	royalblue	Farbe	:	limegreen
HTML	:	#4169e1	HTML	:	#32cd32
HTML (Wert)	:	#4169e1	HTML (Wert)	:	#32cd32
CSS	:	#4169e1	CSS	:	#32cd32
CSS (Wert)	:	#4169e1	CSS (Wert)	:	#32cd32
CSS (kürzest)	:	#4169e1	CSS (kürzest)	:	#32cd32
CSS (RGB)	:	rgb(65,105,225)	CSS (RGB)	:	rgb(50,205,50)
CSS (%RGB)	:	rgb(25%,41%,88%)	CSS (%RGB)	:	rgb(19%,80%,19%)

Verlauf Hintergrundfarbwert #4169e1 nach Schriftfarbwert #32cd32
#4169e1	#3e77c8	#3c85af	#3a9396	#38a27d	#36b064	#34be4b	#32cd32
#4169e1	#3e77c8	#3c85af	#3a9396	#38a27d	#36b064	#34be4b	#32cd32

Kombination von #4169e1 und #32cd32
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				#32cd32 eignet sich nicht als Schriftfarbe auf Hintergrund #4169e1. Die Unterschiede in der Helligkeit und Farbe sind unzureichend. Die Ähnlichkeit von #32cd32 und #4169e1 ergibt sich zu 89.10%. Die Lesbarkeit dieser Kombination ergibt sich zu 10.90%.

Hintergrundfarbwert #4169e1				Schriftfarbwert #32cd32
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#4169e1	#4169e1	#4169e1	#4169e1	#32cd32	#32cd32	#32cd32	#32cd32
#5c7ee5	#5c7ee5	#375ac0	#375ac0	#4fd44f	#4fd44f	#2aaf2a	#2aaf2a
#7793e9	#7793e9	#2e4ba0	#2e4ba0	#6cdb6c	#6cdb6c	#239223	#239223
#92a9ed	#92a9ed	#253c80	#253c80	#89e289	#89e289	#1c751c	#1c751c
#adbef2	#adbef2	#1b2d60	#1b2d60	#a7e9a7	#a7e9a7	#155715	#155715
#c8d4f6	#c8d4f6	#121e40	#121e40	#c4f0c4	#c4f0c4	#0e3a0e	#0e3a0e
#e3e9fa	#e3e9fa	#090f20	#090f20	#e1f7e1	#e1f7e1	#071d07	#071d07
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #4169e1 und Farbwert #32cd32

Wechsel der Umrandung bei Hover mit Tag h3

Eine Überschrift der 3. Stufe erzeugen Sie mit Tag <h3>. Diese kann man farblich gestalten.

Die Rahmenfarbe soll sich von Farbwert #4169e1 auf Farbwert #32cd32 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Darstellung von <h3> in Farbwert #4169e1 vor.

In diesem Beispiel umranden wir <h3> mit einem 4 Pixel dicken, gestrichelten Rahmen in Farbwert #4169e1.

<style type="text/css"><!--
  h3 { 
    border-style:dashed; 
    border-color:#4169e1; 
    border-width:4px;
  }
//-->
</style>

Jetzt stellen wir ein, dass bei Hover die Rahmenfarbe auf #32cd32 geändert wird.

<style type="text/css"><!--
  h3: hover { 
    border-color: #32cd32;
  }
//-->
</style>

Weiteres zu h3 können Sie in Grundlegende Gestaltungselemente in HTML nachlesen. Beschreibung vom hier verwendeten Tag <h3>.

Wechsel der Hintergrundfarbe bei Hover bei HTML-Tag blockquote

Die Hintergrundfarbe soll sich von Farbwert #4169e1 auf Farbwert #32cd32 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Formatierung von <blockquote> in Farbwert #4169e1 vor.

Wir legen als Beispiel Farbwert #4169e1 als Hintergrundfarbe von <blockquote> fest. Zwar lassen wir die Textfarbe unverändert, ändern jedoch die Schriftart auf verdana und ändern die Größe der Schrift auf 9pt:

<style type="text/css"><!--
  blockquote { 
    font-size:9pt; 
    background-color:#4169e1; 
    font-family:verdana;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Mausberührung die Hintergrundfarbe zu #32cd32 ändert.

<style type="text/css"><!--
  blockquote:hover { 
    background-color:#32cd32;
  }
//-->
</style>

Weiteres zu blockquote lesen Sie in Blockorientierte Elemente in HTML. Weiteres zum hier gezeigten Befehl blockquote lesen Sie in der HTML Referenz unter <blockquote>.