Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #fa8072 und Farbwert #dcdcdc

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.

Hintergrundfarbwert #fa8072			Schriftfarbwert #dcdcdc
Detail	:	Hintergrund #fa8072	Detail	:	Schrift #dcdcdc
Farbwert	:	#fa8072	Farbwert	:	#dcdcdc
Farbe	:	salmon	Farbe	:	gainsboro
HTML	:	#fa8072	HTML	:	#dcdcdc
HTML (Wert)	:	#fa8072	HTML (Wert)	:	#dcdcdc
CSS	:	#fa8072	CSS	:	#dcdcdc
CSS (Wert)	:	#fa8072	CSS (Wert)	:	#dcdcdc
CSS (kürzest)	:	#fa8072	CSS (kürzest)	:	#dcdcdc
CSS (RGB)	:	rgb(250,128,114)	CSS (RGB)	:	rgb(220,220,220)
CSS (%RGB)	:	rgb(98%,50%,44%)	CSS (%RGB)	:	rgb(86%,86%,86%)

Verlauf Hintergrundfarbwert #fa8072 nach Schriftfarbwert #dcdcdc
#fa8072	#f58d81	#f19a90	#eda79f	#e8b4ae	#e4c1bd	#e0cecc	#dcdcdc
#fa8072	#f58d81	#f19a90	#eda79f	#e8b4ae	#e4c1bd	#e0cecc	#dcdcdc

Kombination von #fa8072 und #dcdcdc
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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in.				#dcdcdc ist nicht als Schriftfarbe auf Hintergrund #fa8072 geeignet. Sowohl Helligkeit als auch die Farben sind zu ähnlich. Die Ähnlichkeit der Farben #dcdcdc und #fa8072 ergibt sich zu 91.31%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 8.69%.

Hintergrundfarbwert #fa8072				Schriftfarbwert #dcdcdc
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#fa8072	#fa8072	#fa8072	#fa8072	#dcdcdc	#dcdcdc	#dcdcdc	#dcdcdc
#fa9286	#fa9286	#d66d61	#d66d61	#e1e1e1	#e1e1e1	#bcbcbc	#bcbcbc
#fba49a	#fba49a	#b25b51	#b25b51	#e6e6e6	#e6e6e6	#9d9d9d	#9d9d9d
#fcb6ae	#fcb6ae	#8e4941	#8e4941	#ebebeb	#ebebeb	#7d7d7d	#7d7d7d
#fcc8c2	#fcc8c2	#6b3630	#6b3630	#f0f0f0	#f0f0f0	#5e5e5e	#5e5e5e
#fddad6	#fddad6	#472420	#472420	#f5f5f5	#f5f5f5	#3e3e3e	#3e3e3e
#feecea	#feecea	#231210	#231210	#fafafa	#fafafa	#1f1f1f	#1f1f1f
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #fa8072 und Farbwert #dcdcdc

Wechsel der Umrandung bei Hover mit Tag address

Die Rahmenfarbe soll sich von Farbwert #fa8072 auf Farbwert #dcdcdc ändern, wenn man mit der Maus auf <address> zeigt. Bereiten wir zunächst eine Formatierung von <address> in Farbwert #fa8072 vor.

In diesem Beispiel umranden wir <address> mit einem 3 Pixel dicken, einfallenden Rahmen in Farbwert #fa8072.

<style type="text/css"><!--
  address { border:3px inset #fa8072; }
//-->
</style>

Nun stellen wir ein, dass bei Berührung mit der Maus die Rahmenfarbe auf #dcdcdc gesetzt wird.

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

Mehr zum Thema address können Sie in Blockorientierte Elemente in HTML nachlesen. Mehr zum hier verwendeten HTML-Tag address lesen Sie in der HTML Referenz unter <address>.

Zebra-Effekt von Befehl tr

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, spricht man von einem Zebra-Effekt. Dieser Effekt unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ung und .ger für <tr> mit den Hintergrundfarben Farbwert #fa8072 und Farbwert #dcdcdc.

<style type="text/css"><!--
  tr.ung { 
    background-color: #fa8072;
  }
  tr.ger { 
    background-color: #dcdcdc;
  }
//-->
</style>

Diese werden abwechselnd verwendet.

<table>
<tr class="ung"><td>M1-1</td><td>M2-1</td><td>M3-1</td></tr>
<tr class="ger"><td>M1-2</td><td>M2-2</td><td>M3-2</td></tr>
<tr class="ung"><td>M1-3</td><td>M2-3</td><td>M3-3</td></tr>
</table>

Weiteres zum Thema können Sie in Tabellen in HTML nachsehen. Mehr zum hier verwendeten Befehl <tr>.