Ressourcen: 120 HTML Farbnamen - Kombination von Farbe lightslategray und Farbwert #2f4f4f

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 lightslategray			Schriftfarbwert #2f4f4f
Detail	:	Hintergrund lightslategray	Detail	:	Schrift #2f4f4f
Farbe	:	lightslategray	Farbwert	:	#2f4f4f
Farbwert	:	#778899	Farbe	:	darkslategray
HTML	:	lightslategray	HTML	:	#2f4f4f
HTML (Wert)	:	#778899	HTML (Wert)	:	#2f4f4f
CSS	:	lightslategray	CSS	:	#2f4f4f
CSS (Wert)	:	#778899	CSS (Wert)	:	#2f4f4f
CSS (kürzest)	:	#789	CSS (kürzest)	:	#2f4f4f
CSS (RGB)	:	rgb(119,136,153)	CSS (RGB)	:	rgb(47,79,79)
CSS (%RGB)	:	rgb(46%,53%,60%)	CSS (%RGB)	:	rgb(18%,30%,30%)

Verlauf Hintergrundfarbe lightslategray nach Schriftfarbwert #2f4f4f
#778899	#6c7f8e	#627783	#586f79	#4d676e	#435f64	#395759	#2f4f4f
#778899	#6c7f8e	#627783	#586f79	#4d676e	#435f64	#395759	#2f4f4f

Kombination von lightslategray und #2f4f4f
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante.				#2f4f4f eignet sich nicht als Schriftfarbe auf Hintergrund lightslategray. Die Helligkeit und Farben sind sich zu ähnlich. Die Ähnlichkeit der Farben #2f4f4f und lightslategray beträgt 88.33%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 11.67%.

Hintergrundfarbe lightslategray				Schriftfarbwert #2f4f4f
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#778899	#778899	#778899	#778899	#2f4f4f	#2f4f4f	#2f4f4f	#2f4f4f
#8a99a7	#8a99a7	#667483	#667483	#4c6868	#4c6868	#284343	#284343
#9daab6	#9daab6	#55616d	#55616d	#6a8181	#6a8181	#213838	#213838
#b1bbc4	#b1bbc4	#444d57	#444d57	#889a9a	#889a9a	#1a2d2d	#1a2d2d
#c4ccd3	#c4ccd3	#333a41	#333a41	#a5b3b3	#a5b3b3	#142121	#142121
#d8dde1	#d8dde1	#22262b	#22262b	#c3cccc	#c3cccc	#0d1616	#0d1616
#ebeef0	#ebeef0	#111315	#111315	#e1e5e5	#e1e5e5	#060b0b	#060b0b
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe lightslategray und Farbwert #2f4f4f

Wechsel der Textfarbe bei Hover mit Befehl tfoot

Die Textfarbe soll sich von Farbe lightslategray auf Farbwert #2f4f4f ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Formatierung von <tfoot> in Farbe lightslategray vor.

In diesem Beispiel setzen wir bei <tfoot> die Textfarbe auf Farbe lightslategray. Die Hintergrundfarbe behalten wir bei. Die Schriftart setzen wir auf sans-serif und ändern die Schriftgröße auf 13px.

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

Jetzt stellen wir ein, dass sich bei Hover die Textfarbe auf #2f4f4f ändert.

<style type="text/css"><!--
  tfoot: hover { 
    color: #2f4f4f;
  }
//-->
</style>

Mehr zu tfoot können Sie in Tabellen in HTML nachsehen. Einzelheiten vom hier genutzten HTML-Tag tfoot erfahren Sie in der HTML Referenz unter <tfoot>.

Zebra-Effekt von Tag tr

Man spricht von einem so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Dieser Effekt unterstützt das Auge zum Beispiel die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ying und .yang für <tr> mit den Hintergrundfarben Farbe lightslategray und Farbwert #2f4f4f.

<style type="text/css"><!--
  tr.ying { 
    background-color:lightslategray;
  }
  tr.yang { 
    background-color:#2f4f4f;
  }
//-->
</style>

Diese Klassen werden dann abwechselnd genutzt.

<table>
<tr class="ying"><td>C1~1</td><td>C2~1</td><td>C3~1</td></tr>
<tr class="yang"><td>C1~2</td><td>C2~2</td><td>C3~2</td></tr>
<tr class="ying"><td>C1~3</td><td>C2~3</td><td>C3~3</td></tr>
</table>

Weiteres zum Thema erfahren Sie in Tabellen in HTML. Einzelheiten vom hier verwendeten Tag tr erfahren Sie in der HTML Referenz unter <tr>.