Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #90ee90 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.

Hintergrundfarbwert #90ee90			Schriftfarbwert #5f9ea0
Detail	:	Hintergrund #90ee90	Detail	:	Schrift #5f9ea0
Farbwert	:	#90ee90	Farbwert	:	#5f9ea0
Farbe	:	lightgreen	Farbe	:	cadetblue
HTML	:	#90ee90	HTML	:	#5f9ea0
HTML (Wert)	:	#90ee90	HTML (Wert)	:	#5f9ea0
CSS	:	#90ee90	CSS	:	#5f9ea0
CSS (Wert)	:	#90ee90	CSS (Wert)	:	#5f9ea0
CSS (kürzest)	:	#90ee90	CSS (kürzest)	:	#5f9ea0
CSS (RGB)	:	rgb(144,238,144)	CSS (RGB)	:	rgb(95,158,160)
CSS (%RGB)	:	rgb(56%,93%,56%)	CSS (%RGB)	:	rgb(37%,61%,62%)

Verlauf Hintergrundfarbwert #90ee90 nach Schriftfarbwert #5f9ea0
#90ee90	#89e292	#82d794	#7bcb96	#74c099	#6db49b	#66a99d	#5f9ea0
#90ee90	#89e292	#82d794	#7bcb96	#74c099	#6db49b	#66a99d	#5f9ea0

Kombination von #90ee90 und #5f9ea0
Cras id velit ante. 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				Die Ähnlichkeit von #5f9ea0 und #90ee90 ergibt sich zu 89.75%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 10.25%. #5f9ea0 ist nicht als Schriftfarbe auf Hintergrund #90ee90 geeignet. Weder der Helligkeitsunterschied noch der Farbunterschied sind geeignet.

Hintergrundfarbwert #90ee90				Schriftfarbwert #5f9ea0
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#90ee90	#90ee90	#90ee90	#90ee90	#5f9ea0	#5f9ea0	#5f9ea0	#5f9ea0
#9ff09f	#9ff09f	#7bcc7b	#7bcc7b	#75abad	#75abad	#518789	#518789
#aff2af	#aff2af	#66aa66	#66aa66	#8cb9bb	#8cb9bb	#437072	#437072
#bff5bf	#bff5bf	#528852	#528852	#a3c7c8	#a3c7c8	#365a5b	#365a5b
#cff7cf	#cff7cf	#3d663d	#3d663d	#bad5d6	#bad5d6	#284344	#284344
#dffadf	#dffadf	#294429	#294429	#d1e3e3	#d1e3e3	#1b2d2d	#1b2d2d
#effcef	#effcef	#142214	#142214	#e8f1f1	#e8f1f1	#0d1616	#0d1616
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #90ee90 und Farbwert #5f9ea0

Wechsel der Umrandung bei Hover mit Tag h5

Eine Überschrift der 5. Stufe wird mit Tag <h5> erzeugt. Diese kann farblich gestaltet werden.

Die Rahmenfarbe soll sich von Farbwert #90ee90 auf Farbwert #5f9ea0 ändern, wenn man mit der Maus auf <h5> zeigt. Wir bereiten zunächst eine Darstellung von <h5> in Farbwert #90ee90 vor.

In diesem Beispiel umranden wir <h5> mit einem 5 Pixel dicken, herausstehenden Rahmen in Farbwert #90ee90.

<style type="text/css"><!--
  h5 { border:5px outset #90ee90; }
//-->
</style>

Nun fordern wir, dass sich bei Berührung mit der Maus die Rahmenfarbe zu #5f9ea0 ändert.

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

Mehr zum Thema h5 finden Sie in Grundlegende Gestaltungselemente in HTML. Der hier genutzte Befehl h5 ist in der HTML Referenz unter <h5> ausführlich gezeigt.

Hintergrund/Text-Kombination mit Tag p

Hier ändern wir die Textfarbe von <p> auf Farbwert #5f9ea0 und die Hintergrundfarbe von <p> auf Farbwert #90ee90. Die Schriftart ändern wir auf verdana. Die Schriftgröße ändern wir auf 13px.

<style type="text/css"><!--
  p { 
    color:#5f9ea0; 
    background-color:#90ee90; 
    font-size:13px; 
    font-family:verdana;
  }
//-->
</style>

Mehr zum Thema p finden Sie in Grundlegende Gestaltungselemente in HTML. Mehr zum hier genutzten Tag p ist in der HTML Referenz unter <p> gezeigt.