Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #9acd32 und Farbwert #20b2aa

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 #9acd32			Schriftfarbwert #20b2aa
Detail	:	Hintergrund #9acd32	Detail	:	Schrift #20b2aa
Farbwert	:	#9acd32	Farbwert	:	#20b2aa
Farbe	:	yellowgreen	Farbe	:	lightseagreen
HTML	:	#9acd32	HTML	:	#20b2aa
HTML (Wert)	:	#9acd32	HTML (Wert)	:	#20b2aa
CSS	:	#9acd32	CSS	:	#20b2aa
CSS (Wert)	:	#9acd32	CSS (Wert)	:	#20b2aa
CSS (kürzest)	:	#9acd32	CSS (kürzest)	:	#20b2aa
CSS (RGB)	:	rgb(154,205,50)	CSS (RGB)	:	rgb(32,178,170)
CSS (%RGB)	:	rgb(60%,80%,19%)	CSS (%RGB)	:	rgb(12%,69%,66%)

Verlauf Hintergrundfarbwert #9acd32 nach Schriftfarbwert #20b2aa
#9acd32	#88c943	#77c554	#65c165	#54bd76	#42b987	#31b598	#20b2aa
#9acd32	#88c943	#77c554	#65c165	#54bd76	#42b987	#31b598	#20b2aa

Kombination von #9acd32 und #20b2aa
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in.				Auf Hintergrund #9acd32 ist #20b2aa ungeeignet, da weder der Helligkeitsunterschied noch der Farbunterschied gross genug sind. Die Ähnlichkeit von #20b2aa und #9acd32 ergibt sich zu 93.37%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 6.63%.

Hintergrundfarbwert #9acd32				Schriftfarbwert #20b2aa
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#9acd32	#9acd32	#9acd32	#9acd32	#20b2aa	#20b2aa	#20b2aa	#20b2aa
#a8d44f	#a8d44f	#84af2a	#84af2a	#3fbdb6	#3fbdb6	#1b9891	#1b9891
#b6db6c	#b6db6c	#6e9223	#6e9223	#5fc8c2	#5fc8c2	#167f79	#167f79
#c5e289	#c5e289	#58751c	#58751c	#7fd3ce	#7fd3ce	#126561	#126561
#d3e9a7	#d3e9a7	#425715	#425715	#9fdeda	#9fdeda	#0d4c48	#0d4c48
#e2f0c4	#e2f0c4	#2c3a0e	#2c3a0e	#bfe9e6	#bfe9e6	#093230	#093230
#f0f7e1	#f0f7e1	#161d07	#161d07	#dff4f2	#dff4f2	#041918	#041918
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #9acd32 und Farbwert #20b2aa

Wechsel der Textfarbe bei Hover mit Tag li

Die Textfarbe soll sich von Farbwert #9acd32 auf Farbwert #20b2aa ändern, wenn man mit der Maus auf <li> zeigt. Bereiten wir zunächst eine Darstellung von <li> in Farbwert #9acd32 vor.

Wir legen zum Beispiel die Textfarbe von <li> auf Farbwert #9acd32 fest. Zwar ändern wir die Hintergrundfarbe nicht, ändern jedoch die Schriftart auf sans-serif.

<style type="text/css"><!--
  li { 
    color:#9acd32; 
    font-family:sans-serif;
  }
//-->
</style>

Nun fordern wir, dass bei Hover die Textfarbe auf #20b2aa geändert wird.

<style type="text/css"><!--
  li: hover { 
    color: #20b2aa;
  }
//-->
</style>

Mehr zum Thema li erfahren Sie in Listen und Glossare in HTML. Weiteres zum HTML-Tag li finden Sie in der HTML Referenz unter <li>.

Text- und Unterstreichungsfarben bei HTML-Befehl address

Wir ändern Hher die Textfarbe von <address> auf Farbwert #20b2aa. Die Schriftart setzen wir auf sans-serif und setzen die Schriftgröße auf 93%. Wir unterstreichen den Inhalt von <address> mit Hilfe eines gezahnten Rahmens mit 5 Pixel Dicke in Farbwert #9acd32. In HTML ist das kaum möglich. Daher formatieren wir mit CSS.

<style type="text/css"><!--
  address { 
    border-bottom-style:ridge; 
    font-family:sans-serif; 
    color:#20b2aa; 
    font-size:93%; 
    border-bottom-width:5px; 
    border-bottom-color:#9acd32;
  }
//-->
</style>

Die Idee ist, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben.

Mehr zum Thema address können Sie in Blockorientierte Elemente in HTML erfahren. Die Beschreibung vom hier genutzten HTML-Tag address erfahren Sie in der HTML Referenz unter <address>.