Ressourcen: 137 HTML Farbnamen - Kombination von Farbe darkslategray und Farbwert #9370db

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.

Hintergrundfarbe darkslategray			Schriftfarbwert #9370db
Detail	:	Hintergrund darkslategray	Detail	:	Schrift #9370db
Farbe	:	darkslategray	Farbwert	:	#9370db
Farbwert	:	#2f4f4f	Farbe	:	mediumpurple
HTML	:	darkslategray	HTML	:	#9370db
HTML (Wert)	:	#2f4f4f	HTML (Wert)	:	#9370db
CSS	:	darkslategray	CSS	:	#9370db
CSS (Wert)	:	#2f4f4f	CSS (Wert)	:	#9370db
CSS (kürzest)	:	#2f4f4f	CSS (kürzest)	:	#9370db
CSS (RGB)	:	rgb(47,79,79)	CSS (RGB)	:	rgb(147,112,219)
CSS (%RGB)	:	rgb(18%,30%,30%)	CSS (%RGB)	:	rgb(57%,43%,85%)

Verlauf Hintergrundfarbe darkslategray nach Schriftfarbwert #9370db
#2f4f4f	#3d5363	#4b5877	#595d8b	#68619f	#7666b3	#846bc7	#9370db
#2f4f4f	#3d5363	#4b5877	#595d8b	#68619f	#7666b3	#846bc7	#9370db

Kombination von darkslategray und #9370db
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Cras id velit ante.				#9370db eignet sich nicht als Schriftfarbe auf Hintergrund darkslategray, da sich die Helligkeit und Farben zu ähnlich sind. Die Ähnlichkeit der Farben #9370db und darkslategray beträgt 88.70%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 11.30%.

Hintergrundfarbe darkslategray				Schriftfarbwert #9370db
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#2f4f4f	#2f4f4f	#2f4f4f	#2f4f4f	#9370db	#9370db	#9370db	#9370db
#4c6868	#4c6868	#284343	#284343	#a284e0	#a284e0	#7e60bb	#7e60bb
#6a8181	#6a8181	#213838	#213838	#b198e5	#b198e5	#69509c	#69509c
#889a9a	#889a9a	#1a2d2d	#1a2d2d	#c1adea	#c1adea	#54407d	#54407d
#a5b3b3	#a5b3b3	#142121	#142121	#d0c1ef	#d0c1ef	#3f305d	#3f305d
#c3cccc	#c3cccc	#0d1616	#0d1616	#e0d6f4	#e0d6f4	#2a203e	#2a203e
#e1e5e5	#e1e5e5	#060b0b	#060b0b	#efeaf9	#efeaf9	#15101f	#15101f
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe darkslategray und Farbwert #9370db

Wechsel der Hintergrundfarbe bei Hover mit Befehl li

Die Hintergrundfarbe soll sich von Farbe darkslategray auf Farbwert #9370db ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Darstellung von <li> in Farbe darkslategray vor.

Wir ändern z.B. bei <li> die Hintergrundfarbe auf Farbe darkslategray und setzen die Größe der Schrift auf 118%.

<style type="text/css"><!--
  li { 
    font-size: 118%; 
    background-color: darkslategray;
  }
//-->
</style>

Jetzt stellen wir ein, dass bei Mausberührung die Hintergrundfarbe auf #9370db gesetzt wird.

<style type="text/css"><!--
  li: hover { 
    background-color: #9370db;
  }
//-->
</style>

Mehr zum Thema lesen Sie in Listen und Glossare in HTML. Der hier verwendete Tag li ist in der HTML Referenz unter <li> ausführlich zusammengestellt.

Zebra-Effekt bei HTML-Tag tr

Man spricht von einem Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Dieser Effekt unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ung und .ger für <tr> mit unterschiedlichen Hintergrundfarben Farbe darkslategray und Farbwert #9370db.

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

Diese Klassen werden dann abwechselnd verwendet.

<table>
<tr class="ung"><td>Va:a</td><td>Vb:a</td><td>Vc:a</td></tr>
<tr class="ger"><td>Va:b</td><td>Vb:b</td><td>Vc:b</td></tr>
<tr class="ung"><td>Va:c</td><td>Vb:c</td><td>Vc:c</td></tr>
</table>

Mehr zu tr können Sie in Tabellen in HTML erfahren. Möglichkeiten vom hier gezeigten HTML-Tag <tr>.