Ressourcen: 137 HTML Farbnamen - Kombination von Farbe papayawhip und Farbe springgreen

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 papayawhip			Schriftfarbe springgreen
Detail	:	Hintergrund papayawhip	Detail	:	Schrift springgreen
Farbe	:	papayawhip	Farbe	:	springgreen
Farbwert	:	#ffefd5	Farbwert	:	#00ff7f
HTML	:	papayawhip	HTML	:	springgreen
HTML (Wert)	:	#ffefd5	HTML (Wert)	:	#00ff7f
CSS	:	papayawhip	CSS	:	springgreen
CSS (Wert)	:	#ffefd5	CSS (Wert)	:	#00ff7f
CSS (kürzest)	:	#ffefd5	CSS (kürzest)	:	#00ff7f
CSS (RGB)	:	rgb(255,239,213)	CSS (RGB)	:	rgb(0,255,127)
CSS (%RGB)	:	rgb(100%,93%,83%)	CSS (%RGB)	:	rgb(0%,100%,49%)

Verlauf Hintergrundfarbe papayawhip nach Schriftfarbe springgreen
#ffefd5	#daf1c8	#b6f3bc	#91f5b0	#6df8a3	#48fa97	#24fc8b	#00ff7f
#ffefd5	#daf1c8	#b6f3bc	#91f5b0	#6df8a3	#48fa97	#24fc8b	#00ff7f

Kombination von papayawhip und springgreen
Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				springgreen ist nicht als Schriftfarbe auf Hintergrund papayawhip geeignet, weil sowohl Helligkeit als auch die Farben zu ähnlich sind. Die Ähnlichkeit der Farben springgreen und papayawhip ergibt sich zu 94.34%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 5.66%.

Hintergrundfarbe papayawhip				Schriftfarbe springgreen
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ffefd5	#ffefd5	#ffefd5	#ffefd5	#00ff7f	#00ff7f	#00ff7f	#00ff7f
#fff1db	#fff1db	#daccb6	#daccb6	#24ff91	#24ff91	#00da6c	#00da6c
#fff3e1	#fff3e1	#b6aa98	#b6aa98	#48ffa3	#48ffa3	#00b65a	#00b65a
#fff5e7	#fff5e7	#918879	#918879	#6dffb5	#6dffb5	#009148	#009148
#fff8ed	#fff8ed	#6d665b	#6d665b	#91ffc8	#91ffc8	#006d36	#006d36
#fffaf3	#fffaf3	#48443c	#48443c	#b6ffda	#b6ffda	#004824	#004824
#fffcf9	#fffcf9	#24221e	#24221e	#daffec	#daffec	#002412	#002412
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe papayawhip und Farbe springgreen

Wechsel der Textfarbe bei Hover von Befehl cite

Die Textfarbe soll sich von Farbe papayawhip auf Farbe springgreen ändern, wenn man mit der Maus auf <cite> zeigt. Bereiten wir zunächst eine Darstellung von <cite> in Farbe papayawhip vor.

Wir legen als Beispiel bei <cite> die Textfarbe auf Farbe papayawhip fest. Zwar lassen wir die Hintergrundfarbe unverändert, ändern jedoch die Schriftart auf monospace und setzen die Größe der Schrift auf 13px:

<style type="text/css"><!--
  cite { 
    font-size:13px; 
    color:papayawhip; 
    font-family:monospace;
  }
//-->
</style>

Nun fordern wir, dass bei Hover die Textfarbe auf springgreen gesetzt wird.

<style type="text/css"><!--
  cite: hover { 
    color: springgreen;
  }
//-->
</style>

Die Beschreibung vom hier genutzten Befehl cite lesen Sie in der HTML Referenz unter <cite>.

Text- und Unterstreichungsfarben mit HTML-Tag a

Einen Link setzen Sie mit HTML-Tag <a> und kann farblich gestaltet werden.

Wir ändern bei diesem Beispiel die Textfarbe von <a> auf Farbe springgreen. Die Schriftart ändern wir auf sans-serif und vergrößern die Schriftgröße auf 119%. Wir unterstreichen den Inhalt von <a> mit Hilfe eines einfallenden Rahmens mit 1 Pixel Dicke in Farbe papayawhip. Dies geht mit HTML nicht. Wir verwenden daher CSS zur Formatierung.

<style type="text/css"><!--
  a { 
    font-size: 119%; 
    font-family: sans-serif; 
    border-bottom-color: papayawhip; 
    color: springgreen; 
    border-bottom-style: inset; 
    border-bottom-width: 1px;
  }
//-->
</style>

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

Mehr zum Thema können Sie in Verweise und Protokolle in HTML lesen. Einzelheiten des hier verwendeten HTML-Befehl a sind in der HTML Referenz unter <a> genau zusammengestellt.