Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #b0c4de und Farbwert #4682b4

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 #b0c4de			Schriftfarbwert #4682b4
Detail	:	Hintergrund #b0c4de	Detail	:	Schrift #4682b4
Farbwert	:	#b0c4de	Farbwert	:	#4682b4
Farbe	:	lightsteelblue	Farbe	:	steelblue
HTML	:	#b0c4de	HTML	:	#4682b4
HTML (Wert)	:	#b0c4de	HTML (Wert)	:	#4682b4
CSS	:	#b0c4de	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 Hintergrundfarbwert #b0c4de nach Schriftfarbwert #4682b4
#b0c4de	#a0bad8	#91b1d2	#82a7cc	#739ec6	#6494c0	#558bba	#4682b4
#b0c4de	#a0bad8	#91b1d2	#82a7cc	#739ec6	#6494c0	#558bba	#4682b4

Kombination von #b0c4de und #4682b4
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 vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante.				Die Ähnlichkeit der Farben #4682b4 und #b0c4de ergibt sich zu 89.01%. Die Lesbarkeit dieser Farbkombination liegt damit bei 10.99%. #4682b4 eignet sich nicht als Schriftfarbe auf Hintergrund #b0c4de. Die Unterschiede in der Helligkeit und Farbe sind unzureichend.

Hintergrundfarbwert #b0c4de				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 Farbwert #b0c4de und Farbwert #4682b4

Zebra-Effekt von HTML-Befehl th

Man spricht von einem so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Er unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ung und .ger für <th> mit unterschiedlichen Hintergrundfarben Farbwert #b0c4de und Farbwert #4682b4.

<style type="text/css"><!--
  th.ung { 
    background-color: #b0c4de;
  }
  th.ger { 
    background-color:#4682b4;
  }
//-->
</style>

Diese Klassen werden abwechselnd genutzt.

<table>
<tr><td class="ung">B1/1</td><td class="ger">B2/1</td><td class="ung">B3/1</td></tr>
<tr><td class="ung">B1/2</td><td class="ger">B2/2</td><td class="ung">B3/2</td></tr>
<tr><td class="ung">B1/3</td><td class="ger">B2/3</td><td class="ung">B3/3</td></tr>
</table>

Weiteres zum Thema erfahren Sie in Tabellen in HTML. Der hier verwendete HTML-Tag th ist in der HTML Referenz bei <th> ausführlich beschrieben.

Wechsel der Textfarbe bei Hover von HTML-Befehl a

Einen Hyperlink setzt man mit Befehl <a>. Diesen kann man farblich gestalten.

Die Textfarbe soll sich von Farbwert #b0c4de auf Farbwert #4682b4 ändern, wenn man mit der Maus auf <a> zeigt. Wir bereiten zunächst eine Formatierung von <a> in Farbwert #b0c4de vor.

Für dieses Beispiel ändern wir die Textfarbe von <a> auf Farbwert #b0c4de. Zwar ändern wir die Hintergrundfarbe nicht, setzen jedoch die Schriftart auf arial. Die Schriftgröße setzen wir auf 13px:

<style type="text/css"><!--
  a { 
    color:#b0c4de; 
    font-family:arial; 
    font-size:13px;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Hover die Textfarbe auf #4682b4 ändert.

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

Mehr zu a können Sie in Verweise und Protokolle in HTML nachsehen. Der hier genutzte HTML-Tag a ist in der HTML Referenz unter <a> genau zusammengestellt.