Ressourcen: 120 HTML Farbnamen - Kombination von Farbe lightsalmon und Farbe lightseagreen

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 lightsalmon			Schriftfarbe lightseagreen
Detail	:	Hintergrund lightsalmon	Detail	:	Schrift lightseagreen
Farbe	:	lightsalmon	Farbe	:	lightseagreen
Farbwert	:	#ffa07a	Farbwert	:	#20b2aa
HTML	:	lightsalmon	HTML	:	lightseagreen
HTML (Wert)	:	#ffa07a	HTML (Wert)	:	#20b2aa
CSS	:	lightsalmon	CSS	:	lightseagreen
CSS (Wert)	:	#ffa07a	CSS (Wert)	:	#20b2aa
CSS (kürzest)	:	#ffa07a	CSS (kürzest)	:	#20b2aa
CSS (RGB)	:	rgb(255,160,122)	CSS (RGB)	:	rgb(32,178,170)
CSS (%RGB)	:	rgb(100%,62%,47%)	CSS (%RGB)	:	rgb(12%,69%,66%)

Verlauf Hintergrundfarbe lightsalmon nach Schriftfarbe lightseagreen
#ffa07a	#dfa280	#bfa587	#9fa78e	#7faa95	#5fac9c	#3fafa3	#20b2aa
#ffa07a	#dfa280	#bfa587	#9fa78e	#7faa95	#5fac9c	#3fafa3	#20b2aa

Kombination von lightsalmon und lightseagreen
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. 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. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit von lightseagreen und lightsalmon beträgt 93.72%. Die Lesbarkeit dieser Farbkombination liegt damit bei 6.28%. lightseagreen eignet sich nicht als Schriftfarbe auf Hintergrund lightsalmon, weil die Unterschiede in der Helligkeit und Farbe unzureichend sind.

Hintergrundfarbe lightsalmon				Schriftfarbe lightseagreen
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ffa07a	#ffa07a	#ffa07a	#ffa07a	#20b2aa	#20b2aa	#20b2aa	#20b2aa
#ffad8d	#ffad8d	#da8968	#da8968	#3fbdb6	#3fbdb6	#1b9891	#1b9891
#ffbba0	#ffbba0	#b67257	#b67257	#5fc8c2	#5fc8c2	#167f79	#167f79
#ffc8b3	#ffc8b3	#915b45	#915b45	#7fd3ce	#7fd3ce	#126561	#126561
#ffd6c6	#ffd6c6	#6d4434	#6d4434	#9fdeda	#9fdeda	#0d4c48	#0d4c48
#ffe3d9	#ffe3d9	#482d22	#482d22	#bfe9e6	#bfe9e6	#093230	#093230
#fff1ec	#fff1ec	#241611	#241611	#dff4f2	#dff4f2	#041918	#041918
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe lightsalmon und Farbe lightseagreen

Zebra-Effekt von Tag th

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, spricht man von einem so genannten Zebra-Effekt. Er unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ger und .ung für <th> mit den Hintergrundfarben Farbe lightsalmon und Farbe lightseagreen.

<style type="text/css"><!--
  th.ger { 
    background-color:lightsalmon;
  }
  th.ung { 
    background-color: lightseagreen;
  }
//-->
</style>

Diese CSS-Klassen werden abwechselnd verwendet.

<table>
<tr><td class="ger">IA~A</td><td class="ung">IB~A</td><td class="ger">IC~A</td></tr>
<tr><td class="ger">IA~B</td><td class="ung">IB~B</td><td class="ger">IC~B</td></tr>
<tr><td class="ger">IA~C</td><td class="ung">IB~C</td><td class="ger">IC~C</td></tr>
</table>

Mehr zu th können Sie in Tabellen in HTML erfahren. Der hier verwendete Befehl th ist in der HTML Referenz unter <th> genau beschrieben.

Wechsel der Hintergrundfarbe bei Hover mit HTML-Tag acronym

Die Hintergrundfarbe soll sich von Farbe lightsalmon auf Farbe lightseagreen ändern, wenn man mit der Maus auf <acronym> zeigt. Wir bereiten zunächst die Formatierung von <acronym> in Farbe lightsalmon vor.

Wir legen in diesem Beispiel die Hintergrundfarbe von <acronym> auf Farbe lightsalmon fest. Die Textfarbe verändern wir nicht, setzen jedoch die Schriftart auf monospace. Die Größe der Schrift setzen wir auf 117%:

<style type="text/css"><!--
  acronym { 
    font-family: monospace; 
    font-size: 117%; 
    background-color: lightsalmon;
  }
//-->
</style>

Nun stellen wir ein, dass bei Mausberührung die Hintergrundfarbe auf lightseagreen gesetzt wird.

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

Möglichkeiten des hier gezeigten Befehl acronym erfahren Sie in der HTML Referenz unter <acronym>.