Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #2e8b57 und Farbwert #ff8c00

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 #2e8b57			Schriftfarbwert #ff8c00
Detail	:	Hintergrund #2e8b57	Detail	:	Schrift #ff8c00
Farbwert	:	#2e8b57	Farbwert	:	#ff8c00
Farbe	:	seagreen	Farbe	:	darkorange
HTML	:	#2e8b57	HTML	:	#ff8c00
HTML (Wert)	:	#2e8b57	HTML (Wert)	:	#ff8c00
CSS	:	#2e8b57	CSS	:	#ff8c00
CSS (Wert)	:	#2e8b57	CSS (Wert)	:	#ff8c00
CSS (kürzest)	:	#2e8b57	CSS (kürzest)	:	#ff8c00
CSS (RGB)	:	rgb(46,139,87)	CSS (RGB)	:	rgb(255,140,0)
CSS (%RGB)	:	rgb(18%,54%,34%)	CSS (%RGB)	:	rgb(100%,54%,0%)

Verlauf Hintergrundfarbwert #2e8b57 nach Schriftfarbwert #ff8c00
#2e8b57	#4b8b4a	#698b3e	#878b31	#a58b25	#c38b18	#e18b0c	#ff8c00
#2e8b57	#4b8b4a	#698b3e	#878b31	#a58b25	#c38b18	#e18b0c	#ff8c00

Kombination von #2e8b57 und #ff8c00
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna.				Auf Hintergrund #2e8b57 ist #ff8c00 ungeeignet, da die Helligkeit und Farben zu ähnlich sind. Die Ähnlichkeit der Farben #ff8c00 und #2e8b57 beträgt 91.33%. Die Lesbarkeit dieser Kombination bewerte ich mit 8.67%.

Hintergrundfarbwert #2e8b57				Schriftfarbwert #ff8c00
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#2e8b57	#2e8b57	#2e8b57	#2e8b57	#ff8c00	#ff8c00	#ff8c00	#ff8c00
#4b9b6f	#4b9b6f	#27774a	#27774a	#ff9c24	#ff9c24	#da7800	#da7800
#69ac87	#69ac87	#20633e	#20633e	#ffac48	#ffac48	#b66400	#b66400
#87bc9f	#87bc9f	#1a4f31	#1a4f31	#ffbd6d	#ffbd6d	#915000	#915000
#a5cdb7	#a5cdb7	#133b25	#133b25	#ffcd91	#ffcd91	#6d3c00	#6d3c00
#c3ddcf	#c3ddcf	#0d2718	#0d2718	#ffdeb6	#ffdeb6	#482800	#482800
#e1eee7	#e1eee7	#06130c	#06130c	#ffeeda	#ffeeda	#241400	#241400
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #2e8b57 und Farbwert #ff8c00

Wechsel der Umrandung bei Hover von Tag dt

Die Rahmenfarbe soll sich von Farbwert #2e8b57 auf Farbwert #ff8c00 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <dt> in Farbwert #2e8b57 vor.

In diesem Beispiel umranden wir <dt> mit einem 4 Pixel dicken, einfallenden Rahmen in Farbwert #2e8b57.

<style type="text/css"><!--
  dt { border:4px inset #2e8b57; }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Hover die Rahmenfarbe zu #ff8c00 ändert.

<style type="text/css"><!--
  dt:hover { 
    border-color:#ff8c00;
  }
//-->
</style>

Mehr zum Thema dt können Sie in Listen und Glossare in HTML finden. Möglichkeiten des Tag dt sind in der HTML Referenz bei <dt> ausführlich zusammengestellt.

Wechsel der Unterstreichung bei Hover bei Tag cite

Die Unterstreichungsfarbe soll sich von Farbwert #2e8b57 auf Farbwert #ff8c00 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Darstellung von <cite> in Farbwert #2e8b57 vor.

In diesem Beispiel unterstreichen wir <cite> mit einem gepunkteten Rahmen mit 1 Pixel Dicke in Farbwert #2e8b57.

<style type="text/css"><!--
  cite { border-bottom:1px dotted #2e8b57; }
//-->
</style>

Jetzt fordern wir, dass bei Hover die Unterstreichungsfarbe auf #ff8c00 geändert wird.

<style type="text/css"><!--
  cite: hover { 
    border-bottom-color: #ff8c00;
  }
//-->
</style>

Die Idee ist, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu nutzen. Öfter sieht man das bei Links. Der Text wird in einer Farbe dargestellt. Die Unterstreichung in einer anderen. Hierbei handelt es sich jedoch nicht um eine "normale" Unterstreichung, der Text selbst ist überhaupt nicht unterstrichen. Die Unterstreichung wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Weiteres zum hier genutzten HTML-Tag cite finden Sie in der HTML Referenz unter <cite>.