Ressourcen: 137 HTML Farbnamen - Kombination von Farbe lightseagreen und Farbwert #ffb6c1

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.

Hintergrundfarbe lightseagreen			Schriftfarbwert #ffb6c1
Detail	:	Hintergrund lightseagreen	Detail	:	Schrift #ffb6c1
Farbe	:	lightseagreen	Farbwert	:	#ffb6c1
Farbwert	:	#20b2aa	Farbe	:	lightpink
HTML	:	lightseagreen	HTML	:	#ffb6c1
HTML (Wert)	:	#20b2aa	HTML (Wert)	:	#ffb6c1
CSS	:	lightseagreen	CSS	:	#ffb6c1
CSS (Wert)	:	#20b2aa	CSS (Wert)	:	#ffb6c1
CSS (kürzest)	:	#20b2aa	CSS (kürzest)	:	#ffb6c1
CSS (RGB)	:	rgb(32,178,170)	CSS (RGB)	:	rgb(255,182,193)
CSS (%RGB)	:	rgb(12%,69%,66%)	CSS (%RGB)	:	rgb(100%,71%,75%)

Verlauf Hintergrundfarbe lightseagreen nach Schriftfarbwert #ffb6c1
#20b2aa	#3fb2ad	#5fb3b0	#7fb3b3	#9fb4b7	#bfb4ba	#dfb5bd	#ffb6c1
#20b2aa	#3fb2ad	#5fb3b0	#7fb3b3	#9fb4b7	#bfb4ba	#dfb5bd	#ffb6c1

Kombination von lightseagreen und #ffb6c1
Cras vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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 id velit ante.				Die Ähnlichkeit von #ffb6c1 und lightseagreen ergibt sich zu 92.44%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 7.56%. #ffb6c1 ist nicht als Schriftfarbe auf Hintergrund lightseagreen geeignet, da sowohl Helligkeit als auch die Farben zu ähnlich sind.

Hintergrundfarbe lightseagreen				Schriftfarbwert #ffb6c1
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#20b2aa	#20b2aa	#20b2aa	#20b2aa	#ffb6c1	#ffb6c1	#ffb6c1	#ffb6c1
#3fbdb6	#3fbdb6	#1b9891	#1b9891	#ffc0c9	#ffc0c9	#da9ca5	#da9ca5
#5fc8c2	#5fc8c2	#167f79	#167f79	#ffcad2	#ffcad2	#b68289	#b68289
#7fd3ce	#7fd3ce	#126561	#126561	#ffd5db	#ffd5db	#91686e	#91686e
#9fdeda	#9fdeda	#0d4c48	#0d4c48	#ffdfe4	#ffdfe4	#6d4e52	#6d4e52
#bfe9e6	#bfe9e6	#093230	#093230	#ffeaed	#ffeaed	#483437	#483437
#dff4f2	#dff4f2	#041918	#041918	#fff4f6	#fff4f6	#241a1b	#241a1b
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe lightseagreen und Farbwert #ffb6c1

Wechsel der Textfarbe bei Hover mit HTML-Tag li

Die Textfarbe soll sich von Farbe lightseagreen auf Farbwert #ffb6c1 ändern, wenn man mit der Maus auf <li> zeigt. Bereiten wir zunächst die Darstellung von <li> in Farbe lightseagreen vor.

Wir ändern z.B. die Textfarbe von <li> auf Farbe lightseagreen. Die Hintergrundfarbe verändern wir nicht, ändern jedoch die Schriftart auf sans-serif. Die Schriftgröße ändern wir auf 13px:

<style type="text/css"><!--
  li { 
    font-size:13px; 
    font-family:sans-serif; 
    color:lightseagreen;
  }
//-->
</style>

Nun fordern wir, dass sich bei Mausberührung die Textfarbe zu #ffb6c1 ändert.

<style type="text/css"><!--
  li: hover { 
    color: #ffb6c1;
  }
//-->
</style>

Weiteres zu li können Sie in Listen und Glossare in HTML finden. Einzelheiten des HTML-Befehl li lesen Sie in der HTML Referenz unter <li>.

Zebra-Effekt von HTML-Tag td

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, 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 .even und .odd für <td> mit unterschiedlichen Hintergrundfarben Farbe lightseagreen und Farbwert #ffb6c1.

<style type="text/css"><!--
  td.even { 
    background-color:lightseagreen;
  }
  td.odd { 
    background-color: #ffb6c1;
  }
//-->
</style>

Diese CSS-Klassen werden dann abwechselnd verwendet.

<table>
<tr><td class="even">VA~A</td><td class="odd">VB~A</td><td class="even">VC~A</td></tr>
<tr><td class="even">VA~B</td><td class="odd">VB~B</td><td class="even">VC~B</td></tr>
<tr><td class="even">VA~C</td><td class="odd">VB~C</td><td class="even">VC~C</td></tr>
</table>

Weiteres zu td können Sie in Tabellen in HTML finden. Einzelheiten des Tag td sind in der HTML Referenz unter <td> ausführlich beschrieben.