Ressourcen: 120 HTML Farbnamen - Kombination von Farbe lightseagreen und Farbwert #4682b4

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 lightseagreen			Schriftfarbwert #4682b4
Detail	:	Hintergrund lightseagreen	Detail	:	Schrift #4682b4
Farbe	:	lightseagreen	Farbwert	:	#4682b4
Farbwert	:	#20b2aa	Farbe	:	steelblue
HTML	:	lightseagreen	HTML	:	#4682b4
HTML (Wert)	:	#20b2aa	HTML (Wert)	:	#4682b4
CSS	:	lightseagreen	CSS	:	#4682b4
CSS (Wert)	:	#20b2aa	CSS (Wert)	:	#4682b4
CSS (kürzest)	:	#20b2aa	CSS (kürzest)	:	#4682b4
CSS (RGB)	:	rgb(32,178,170)	CSS (RGB)	:	rgb(70,130,180)
CSS (%RGB)	:	rgb(12%,69%,66%)	CSS (%RGB)	:	rgb(27%,50%,70%)

Verlauf Hintergrundfarbe lightseagreen nach Schriftfarbwert #4682b4
#20b2aa	#25abab	#2aa4ac	#309dae	#3596af	#3b8fb1	#4088b2	#4682b4
#20b2aa	#25abab	#2aa4ac	#309dae	#3596af	#3b8fb1	#4088b2	#4682b4

Kombination von lightseagreen und #4682b4
Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in. 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.				Die Ähnlichkeit der Farben #4682b4 und lightseagreen beträgt 92.54%. Die Lesbarkeit dieser Farbkombination liegt damit bei 7.46%. Auf Hintergrund lightseagreen ist #4682b4 ungeeignet, weil weder der Helligkeitsunterschied noch der Farbunterschied geeignet sind.

Hintergrundfarbe lightseagreen				Schriftfarbwert #4682b4
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#20b2aa	#20b2aa	#20b2aa	#20b2aa	#4682b4	#4682b4	#4682b4	#4682b4
#3fbdb6	#3fbdb6	#1b9891	#1b9891	#6093be	#6093be	#3c6f9a	#3c6f9a
#5fc8c2	#5fc8c2	#167f79	#167f79	#7aa5c9	#7aa5c9	#325c80	#325c80
#7fd3ce	#7fd3ce	#126561	#126561	#95b7d4	#95b7d4	#284a66	#284a66
#9fdeda	#9fdeda	#0d4c48	#0d4c48	#afc9de	#afc9de	#1e374d	#1e374d
#bfe9e6	#bfe9e6	#093230	#093230	#cadbe9	#cadbe9	#142533	#142533
#dff4f2	#dff4f2	#041918	#041918	#e4edf4	#e4edf4	#0a1219	#0a1219
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe lightseagreen und Farbwert #4682b4

Zebra-Effekt mit HTML-Tag th

Man redet von einem so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Dieser Effekt unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .odd und .even für <th> mit unterschiedlichen Hintergrundfarben Farbe lightseagreen und Farbwert #4682b4.

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

Diese Klassen werden dann abwechselnd verwendet.

<table>
<tr><td class="odd">Y1,1</td><td class="even">Y2,1</td><td class="odd">Y3,1</td></tr>
<tr><td class="odd">Y1,2</td><td class="even">Y2,2</td><td class="odd">Y3,2</td></tr>
<tr><td class="odd">Y1,3</td><td class="even">Y2,3</td><td class="odd">Y3,3</td></tr>
</table>

Weiteres zu th finden Sie in Tabellen in HTML. Beschreibung des Tag <th>.

Wechsel der Umrandung bei Hover mit Befehl address

Die Rahmenfarbe soll sich von Farbe lightseagreen auf Farbwert #4682b4 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Formatierung von <address> in Farbe lightseagreen vor.

In diesem Beispiel umranden wir <address> mit einem 5 Pixel dicken, herausstehenden Rahmen in Farbe lightseagreen.

<style type="text/css"><!--
  address { border:5px outset lightseagreen; }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Mausberührung die Rahmenfarbe zu #4682b4 ändert.

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

Weiteres zum Thema lesen Sie in Blockorientierte Elemente in HTML. Der HTML-Befehl address ist in der HTML Referenz unter <address> ausführlich beschrieben.