Ressourcen: 137 HTML Farbnamen - Kombination von Farbe yellowgreen und Farbwert #ff7f50

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.

Hintergrundfarbe yellowgreen			Schriftfarbwert #ff7f50
Detail	:	Hintergrund yellowgreen	Detail	:	Schrift #ff7f50
Farbe	:	yellowgreen	Farbwert	:	#ff7f50
Farbwert	:	#9acd32	Farbe	:	coral
HTML	:	yellowgreen	HTML	:	#ff7f50
HTML (Wert)	:	#9acd32	HTML (Wert)	:	#ff7f50
CSS	:	yellowgreen	CSS	:	#ff7f50
CSS (Wert)	:	#9acd32	CSS (Wert)	:	#ff7f50
CSS (kürzest)	:	#9acd32	CSS (kürzest)	:	#ff7f50
CSS (RGB)	:	rgb(154,205,50)	CSS (RGB)	:	rgb(255,127,80)
CSS (%RGB)	:	rgb(60%,80%,19%)	CSS (%RGB)	:	rgb(100%,49%,31%)

Verlauf Hintergrundfarbe yellowgreen nach Schriftfarbwert #ff7f50
#9acd32	#a8c136	#b6b63a	#c5ab3e	#d3a043	#e29547	#f08a4b	#ff7f50
#9acd32	#a8c136	#b6b63a	#c5ab3e	#d3a043	#e29547	#f08a4b	#ff7f50

Kombination von yellowgreen und #ff7f50
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. 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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				#ff7f50 eignet sich nicht als Schriftfarbe auf Hintergrund yellowgreen. Weder der Helligkeitsunterschied noch der Farbunterschied sind gross genug. Die Ähnlichkeit der Farben #ff7f50 und yellowgreen beträgt 93.68%. Die Lesbarkeit dieser Kombination bewerte ich mit 6.32%.

Hintergrundfarbe yellowgreen				Schriftfarbwert #ff7f50
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#9acd32	#9acd32	#9acd32	#9acd32	#ff7f50	#ff7f50	#ff7f50	#ff7f50
#a8d44f	#a8d44f	#84af2a	#84af2a	#ff9169	#ff9169	#da6c44	#da6c44
#b6db6c	#b6db6c	#6e9223	#6e9223	#ffa382	#ffa382	#b65a39	#b65a39
#c5e289	#c5e289	#58751c	#58751c	#ffb59b	#ffb59b	#91482d	#91482d
#d3e9a7	#d3e9a7	#425715	#425715	#ffc8b4	#ffc8b4	#6d3622	#6d3622
#e2f0c4	#e2f0c4	#2c3a0e	#2c3a0e	#ffdacd	#ffdacd	#482416	#482416
#f0f7e1	#f0f7e1	#161d07	#161d07	#ffece6	#ffece6	#24120b	#24120b
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe yellowgreen und Farbwert #ff7f50

Wechsel der Hintergrundfarbe bei Hover von HTML-Befehl p

Die Hintergrundfarbe soll sich von Farbe yellowgreen auf Farbwert #ff7f50 ändern, wenn man mit der Maus auf <p> zeigt. Wir bereiten zunächst die Darstellung von <p> in Farbe yellowgreen vor.

Wir legen z.B. Farbe yellowgreen als Hintergrundfarbe von <p> fest. Zwar verändern wir die Textfarbe nicht, ändern jedoch die Schriftart auf courier new.

<style type="text/css"><!--
  p { 
    background-color:yellowgreen; 
    font-family:courier new;
  }
//-->
</style>

Nun fordern wir, dass sich bei Mausberührung die Hintergrundfarbe auf #ff7f50 ändert.

<style type="text/css"><!--
  p:hover { 
    background-color:#ff7f50;
  }
//-->
</style>

Weiteres zum Thema p finden Sie in Grundlegende Gestaltungselemente in HTML. Weiteres zum hier verwendeten HTML-Befehl p ist in der HTML Referenz bei <p> genau beschrieben.

Hintergrund/Text-Kombination mit HTML-Tag button

Für dieses Beispiel ändern wir die Textfarbe von <button> auf Farbwert #ff7f50 und die Hintergrundfarbe von <button> auf Farbe yellowgreen. Als Schriftart wählen wir monospace und setzen die Schriftgröße auf 13px.

<style type="text/css"><!--
  button { 
    font-size:13px; 
    font-family:monospace; 
    color:#ff7f50; 
    background-color:yellowgreen;
  }
//-->
</style>

Mehr zum Thema können Sie in Formulare in HTML lesen. Weiteres zum HTML-Tag <button>.