Ressourcen: 120 HTML Farbnamen - Kombination von Farbe coral und Farbe seagreen

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.

Hintergrundfarbe coral			Schriftfarbe seagreen
Detail	:	Hintergrund coral	Detail	:	Schrift seagreen
Farbe	:	coral	Farbe	:	seagreen
Farbwert	:	#ff7f50	Farbwert	:	#2e8b57
HTML	:	coral	HTML	:	seagreen
HTML (Wert)	:	#ff7f50	HTML (Wert)	:	#2e8b57
CSS	:	coral	CSS	:	seagreen
CSS (Wert)	:	#ff7f50	CSS (Wert)	:	#2e8b57
CSS (kürzest)	:	#ff7f50	CSS (kürzest)	:	#2e8b57
CSS (RGB)	:	rgb(255,127,80)	CSS (RGB)	:	rgb(46,139,87)
CSS (%RGB)	:	rgb(100%,49%,31%)	CSS (%RGB)	:	rgb(18%,54%,34%)

Verlauf Hintergrundfarbe coral nach Schriftfarbe seagreen
#ff7f50	#e18051	#c38252	#a58453	#878554	#698755	#4b8956	#2e8b57
#ff7f50	#e18051	#c38252	#a58453	#878554	#698755	#4b8956	#2e8b57

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

Hintergrundfarbe coral				Schriftfarbe seagreen
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ff7f50	#ff7f50	#ff7f50	#ff7f50	#2e8b57	#2e8b57	#2e8b57	#2e8b57
#ff9169	#ff9169	#da6c44	#da6c44	#4b9b6f	#4b9b6f	#27774a	#27774a
#ffa382	#ffa382	#b65a39	#b65a39	#69ac87	#69ac87	#20633e	#20633e
#ffb59b	#ffb59b	#91482d	#91482d	#87bc9f	#87bc9f	#1a4f31	#1a4f31
#ffc8b4	#ffc8b4	#6d3622	#6d3622	#a5cdb7	#a5cdb7	#133b25	#133b25
#ffdacd	#ffdacd	#482416	#482416	#c3ddcf	#c3ddcf	#0d2718	#0d2718
#ffece6	#ffece6	#24120b	#24120b	#e1eee7	#e1eee7	#06130c	#06130c
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe coral und Farbe seagreen

Wechsel der Unterstreichung bei Hover mit Befehl fieldset

Die Farbe der Unterstreichung soll sich von Farbe coral auf Farbe seagreen ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Formatierung von <fieldset> in Farbe coral vor.

Beispielsweise unterstreichen wir <fieldset> mit Hilfe eines gefurchten Rahmens mit 2 Pixel Dicke in Farbe coral.

<style type="text/css"><!--
  fieldset { border-bottom:2px groove coral; }
//-->
</style>

Nun fordern wir, dass bei Berührung mit der Maus die Farbe der Unterstreichung auf seagreen geändert wird.

<style type="text/css"><!--
  fieldset: hover { 
    border-bottom-color: seagreen;
  }
//-->
</style>

Die Idee ist, unabhängige Formatierungen für Inhalt und Unterstreichung zu haben. Manchmal sieht man diesen Effekt bei Verweisen. Der Text wird in einer Farbe dargestellt. Und die Unterstreichung in einer anderen. Es ist aber keine wirkliche Unterstreichung, der Text selbst ist überhaupt nicht unterstrichen. Die Unterstreichung wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Weiteres zu fieldset können Sie in Formulare in HTML lesen. Einzelheiten vom Tag fieldset sind in der HTML Referenz bei <fieldset> genau zusammengestellt.

Wechsel der Hintergrundfarbe bei Hover von HTML-Tag colgroup

Die Hintergrundfarbe soll sich von Farbe coral auf Farbe seagreen ändern, wenn man mit der Maus auf <colgroup> zeigt. Bereiten wir zunächst eine Formatierung von <colgroup> in Farbe coral vor.

Wir legen als Beispiel Farbe coral als Hintergrundfarbe von <colgroup> fest. Die Textfarbe verändern wir nicht, setzen jedoch die Schriftart auf sans-serif und setzen die Größe der Schrift auf 9px:

<style type="text/css"><!--
  colgroup { 
    font-family:sans-serif; 
    font-size:9px; 
    background-color:coral;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Hover die Hintergrundfarbe zu seagreen ändert.

<style type="text/css"><!--
  colgroup: hover { 
    background-color: seagreen;
  }
//-->
</style>

Weiteres zum Thema colgroup können Sie in Tabellen in HTML finden. Weiteres zum hier gezeigten Befehl colgroup erfahren Sie in der HTML Referenz unter <colgroup>.