Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #b0c4de und Farbe lawngreen

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.

Hintergrundfarbwert #b0c4de			Schriftfarbe lawngreen
Detail	:	Hintergrund #b0c4de	Detail	:	Schrift lawngreen
Farbwert	:	#b0c4de	Farbe	:	lawngreen
Farbe	:	lightsteelblue	Farbwert	:	#7cfc00
HTML	:	#b0c4de	HTML	:	lawngreen
HTML (Wert)	:	#b0c4de	HTML (Wert)	:	#7cfc00
CSS	:	#b0c4de	CSS	:	lawngreen
CSS (Wert)	:	#b0c4de	CSS (Wert)	:	#7cfc00
CSS (kürzest)	:	#b0c4de	CSS (kürzest)	:	#7cfc00
CSS (RGB)	:	rgb(176,196,222)	CSS (RGB)	:	rgb(124,252,0)
CSS (%RGB)	:	rgb(69%,76%,87%)	CSS (%RGB)	:	rgb(48%,98%,0%)

Verlauf Hintergrundfarbwert #b0c4de nach Schriftfarbe lawngreen
#b0c4de	#a8ccbe	#a1d49e	#99dc7e	#92e45f	#8aec3f	#83f41f	#7cfc00
#b0c4de	#a8ccbe	#a1d49e	#99dc7e	#92e45f	#8aec3f	#83f41f	#7cfc00

Kombination von #b0c4de und lawngreen
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.				lawngreen ist nicht als Schriftfarbe auf Hintergrund #b0c4de geeignet, da weder der Helligkeitsunterschied noch der Farbunterschied geeignet sind. Die Ähnlichkeit der Farben lawngreen und #b0c4de ergibt sich zu 93.63%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 6.37%.

Hintergrundfarbwert #b0c4de				Schriftfarbe lawngreen
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#b0c4de	#b0c4de	#b0c4de	#b0c4de	#7cfc00	#7cfc00	#7cfc00	#7cfc00
#bbcce2	#bbcce2	#96a8be	#96a8be	#8efc24	#8efc24	#6ad800	#6ad800
#c6d4e7	#c6d4e7	#7d8c9e	#7d8c9e	#a1fc48	#a1fc48	#58b400	#58b400
#d1ddec	#d1ddec	#64707e	#64707e	#b4fd6d	#b4fd6d	#469000	#469000
#dde5f0	#dde5f0	#4b545f	#4b545f	#c6fd91	#c6fd91	#356c00	#356c00
#e8eef5	#e8eef5	#32383f	#32383f	#d9feb6	#d9feb6	#234800	#234800
#f3f6fa	#f3f6fa	#191c1f	#191c1f	#ecfeda	#ecfeda	#112400	#112400
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #b0c4de und Farbe lawngreen

Wechsel der Textfarbe bei Hover bei HTML-Befehl select

Die Textfarbe soll sich von Farbwert #b0c4de auf Farbe lawngreen ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Darstellung von <select> in Farbwert #b0c4de vor.

In diesem Beispiel legen wir bei <select> die Textfarbe auf Farbwert #b0c4de fest. Die Hintergrundfarbe behalten wir bei. Die Schriftart setzen wir auf verdana und setzen die Schriftgröße auf 80%:

<style type="text/css"><!--
  select { 
    font-family:verdana; 
    font-size:80%; 
    color:#b0c4de;
  }
//-->
</style>

Nun stellen wir ein, dass bei Hover die Textfarbe auf lawngreen geändert wird.

<style type="text/css"><!--
  select: hover { 
    color: lawngreen;
  }
//-->
</style>

Mehr zum Thema select können Sie in Formulare in HTML finden. Der hier verwendete HTML-Tag select ist in der HTML Referenz bei <select> zusammengestellt.

Zebra-Effekt bei HTML-Befehl tr

Man redet vom Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Der Effekt unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ger und .ung für <tr> mit den Hintergrundfarben Farbwert #b0c4de und Farbe lawngreen.

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

Diese CSS-Klassen werden dann abwechselnd angewendet.

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

Weiteres zum Thema finden Sie in Tabellen in HTML. Weiteres zum hier genutzten HTML-Tag tr ist in der HTML Referenz bei <tr> beschrieben.