Ressourcen: 120 HTML Farbnamen - Kombination von Farbe lightsteelblue 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 lightsteelblue			Schriftfarbwert #4682b4
Detail	:	Hintergrund lightsteelblue	Detail	:	Schrift #4682b4
Farbe	:	lightsteelblue	Farbwert	:	#4682b4
Farbwert	:	#b0c4de	Farbe	:	steelblue
HTML	:	lightsteelblue	HTML	:	#4682b4
HTML (Wert)	:	#b0c4de	HTML (Wert)	:	#4682b4
CSS	:	lightsteelblue	CSS	:	#4682b4
CSS (Wert)	:	#b0c4de	CSS (Wert)	:	#4682b4
CSS (kürzest)	:	#b0c4de	CSS (kürzest)	:	#4682b4
CSS (RGB)	:	rgb(176,196,222)	CSS (RGB)	:	rgb(70,130,180)
CSS (%RGB)	:	rgb(69%,76%,87%)	CSS (%RGB)	:	rgb(27%,50%,70%)

Verlauf Hintergrundfarbe lightsteelblue nach Schriftfarbwert #4682b4
#b0c4de	#a0bad8	#91b1d2	#82a7cc	#739ec6	#6494c0	#558bba	#4682b4
#b0c4de	#a0bad8	#91b1d2	#82a7cc	#739ec6	#6494c0	#558bba	#4682b4

Kombination von lightsteelblue und #4682b4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante.				#4682b4 eignet sich nicht als Schriftfarbe auf Hintergrund lightsteelblue, da die Unterschiede in der Helligkeit und Farbe zu gering sind. Die Ähnlichkeit der Farben #4682b4 und lightsteelblue ergibt sich zu 89.01%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 10.99%.

Hintergrundfarbe lightsteelblue				Schriftfarbwert #4682b4
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#b0c4de	#b0c4de	#b0c4de	#b0c4de	#4682b4	#4682b4	#4682b4	#4682b4
#bbcce2	#bbcce2	#96a8be	#96a8be	#6093be	#6093be	#3c6f9a	#3c6f9a
#c6d4e7	#c6d4e7	#7d8c9e	#7d8c9e	#7aa5c9	#7aa5c9	#325c80	#325c80
#d1ddec	#d1ddec	#64707e	#64707e	#95b7d4	#95b7d4	#284a66	#284a66
#dde5f0	#dde5f0	#4b545f	#4b545f	#afc9de	#afc9de	#1e374d	#1e374d
#e8eef5	#e8eef5	#32383f	#32383f	#cadbe9	#cadbe9	#142533	#142533
#f3f6fa	#f3f6fa	#191c1f	#191c1f	#e4edf4	#e4edf4	#0a1219	#0a1219
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe lightsteelblue und Farbwert #4682b4

Zebra-Effekt bei Befehl td

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, spricht man vom Zebra-Effekt. Der Effekt unterstützt das Auge zum Beispiel die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ungerade und .gerade für <td> mit den Hintergrundfarben Farbe lightsteelblue und Farbwert #4682b4.

<style type="text/css"><!--
  td.ungerade { 
    background-color: lightsteelblue;
  }
  td.gerade { 
    background-color:#4682b4;
  }
//-->
</style>

Diese werden dann abwechselnd genutzt.

<table>
<tr><td class="ungerade">N1-1</td><td class="gerade">N2-1</td><td class="ungerade">N3-1</td></tr>
<tr><td class="ungerade">N1-2</td><td class="gerade">N2-2</td><td class="ungerade">N3-2</td></tr>
<tr><td class="ungerade">N1-3</td><td class="gerade">N2-3</td><td class="ungerade">N3-3</td></tr>
</table>

Mehr zum Thema td können Sie in Tabellen in HTML finden. Möglichkeiten vom hier verwendeten Befehl td finden Sie in der HTML Referenz unter <td>.

Wechsel der Hintergrundfarbe bei Hover mit HTML-Tag center

Die Hintergrundfarbe soll sich von Farbe lightsteelblue auf Farbwert #4682b4 ändern, wenn man mit der Maus auf <center> zeigt. Wir bereiten zunächst eine Darstellung von <center> in Farbe lightsteelblue vor.

Wir legen für dieses Beispiel Farbe lightsteelblue als Hintergrundfarbe von <center> fest und ändern die Schriftgröße auf 13px.

<style type="text/css"><!--
  center { 
    background-color: lightsteelblue; 
    font-size: 13px;
  }
//-->
</style>

Jetzt fordern wir, dass bei Hover die Hintergrundfarbe auf #4682b4 geändert wird.

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

Mehr zu center können Sie in Grundlegende Gestaltungselemente in HTML erfahren. Möglichkeiten vom hier gezeigten HTML-Befehl center sind in der HTML Referenz bei <center> ausführlich beschrieben.