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

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 palevioletred
Detail	:	Hintergrund coral	Detail	:	Schrift palevioletred
Farbe	:	coral	Farbe	:	palevioletred
Farbwert	:	#ff7f50	Farbwert	:	#db7093
HTML	:	coral	HTML	:	palevioletred
HTML (Wert)	:	#ff7f50	HTML (Wert)	:	#db7093
CSS	:	coral	CSS	:	palevioletred
CSS (Wert)	:	#ff7f50	CSS (Wert)	:	#db7093
CSS (kürzest)	:	#ff7f50	CSS (kürzest)	:	#db7093
CSS (RGB)	:	rgb(255,127,80)	CSS (RGB)	:	rgb(219,112,147)
CSS (%RGB)	:	rgb(100%,49%,31%)	CSS (%RGB)	:	rgb(85%,43%,57%)

Verlauf Hintergrundfarbe coral nach Schriftfarbe palevioletred
#ff7f50	#f97c59	#f47a63	#ef786c	#ea7676	#e5747f	#e07289	#db7093
#ff7f50	#f97c59	#f47a63	#ef786c	#ea7676	#e5747f	#e07289	#db7093

Kombination von coral und palevioletred
Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. 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.				palevioletred eignet sich nicht als Schriftfarbe auf Hintergrund coral. Die Unterschiede in der Helligkeit und Farbe sind unzureichend. Die Ähnlichkeit der Farben palevioletred und coral beträgt 94.07%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 5.93%.

Hintergrundfarbe coral				Schriftfarbe palevioletred
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ff7f50	#ff7f50	#ff7f50	#ff7f50	#db7093	#db7093	#db7093	#db7093
#ff9169	#ff9169	#da6c44	#da6c44	#e084a2	#e084a2	#bb607e	#bb607e
#ffa382	#ffa382	#b65a39	#b65a39	#e598b1	#e598b1	#9c5069	#9c5069
#ffb59b	#ffb59b	#91482d	#91482d	#eaadc1	#eaadc1	#7d4054	#7d4054
#ffc8b4	#ffc8b4	#6d3622	#6d3622	#efc1d0	#efc1d0	#5d303f	#5d303f
#ffdacd	#ffdacd	#482416	#482416	#f4d6e0	#f4d6e0	#3e202a	#3e202a
#ffece6	#ffece6	#24120b	#24120b	#f9eaef	#f9eaef	#1f1015	#1f1015
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe coral und Farbe palevioletred

Wechsel der Umrandung bei Hover von Tag q

Die Rahmenfarbe soll sich von Farbe coral auf Farbe palevioletred ändern, wenn man mit der Maus auf <q> zeigt. Wir bereiten zunächst eine Formatierung von <q> in Farbe coral vor.

In diesem Beispiel umranden wir <q> mit einem 5 Pixel dicken, doppelten Rahmen in Farbe coral.

<style type="text/css"><!--
  q { border:5px double coral; }
//-->
</style>

Jetzt fordern wir, dass sich bei Mausberührung die Rahmenfarbe auf palevioletred ändert.

<style type="text/css"><!--
  q:hover { 
    border-color:palevioletred;
  }
//-->
</style>

Der hier genutzte Tag q ist in der HTML Referenz bei <q> zusammengestellt.

Wechsel der Unterstreichung bei Hover von Tag label

Die Unterstreichungsfarbe soll sich von Farbe coral auf Farbe palevioletred ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Formatierung von <label> in Farbe coral vor.

Beispielsweise unterstreichen wir <label> mit Hilfe eines herausstehenden Rahmens mit 4 Pixel Dicke in Farbe coral.

<style type="text/css"><!--
  label { 
    border-bottom-color:coral; 
    border-bottom-style:outset; 
    border-bottom-width:4px;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Mausberührung die Unterstreichungsfarbe auf palevioletred ändert.

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

Die Idee ist dabei, verschiedene Formatierungen für Inhalt und Unterstreichung zu nutzen. Öfter sehen Sie das bei Verweisen. Der Text ist in einer Farbe. Die Unterstreichung in einer anderen. Dies ist jedoch keine "normale" Unterstreichung, der Text ist gar nicht unterstrichen. Sie wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Weiteres zum Thema label können Sie in Formulare in HTML nachlesen. Der hier verwendete Tag label ist in der HTML Referenz bei <label> ausführlich zusammengestellt.