Ressourcen: 120 HTML Farbnamen - Kombination von Farbe midnightblue und Farbwert #9400d3

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 midnightblue			Schriftfarbwert #9400d3
Detail	:	Hintergrund midnightblue	Detail	:	Schrift #9400d3
Farbe	:	midnightblue	Farbwert	:	#9400d3
Farbwert	:	#191970	Farbe	:	darkviolet
HTML	:	midnightblue	HTML	:	#9400d3
HTML (Wert)	:	#191970	HTML (Wert)	:	#9400d3
CSS	:	midnightblue	CSS	:	#9400d3
CSS (Wert)	:	#191970	CSS (Wert)	:	#9400d3
CSS (kürzest)	:	#191970	CSS (kürzest)	:	#9400d3
CSS (RGB)	:	rgb(25,25,112)	CSS (RGB)	:	rgb(148,0,211)
CSS (%RGB)	:	rgb(9%,9%,43%)	CSS (%RGB)	:	rgb(58%,0%,82%)

Verlauf Hintergrundfarbe midnightblue nach Schriftfarbwert #9400d3
#191970	#2a157e	#3c118c	#4d0e9a	#5f0aa8	#7007b6	#8203c4	#9400d3
#191970	#2a157e	#3c118c	#4d0e9a	#5f0aa8	#7007b6	#8203c4	#9400d3

Kombination von midnightblue und #9400d3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna.				Die Ähnlichkeit von #9400d3 und midnightblue ergibt sich zu 89.23%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 10.77%. #9400d3 eignet sich nicht als Schriftfarbe auf Hintergrund midnightblue, da sich sowohl Helligkeit als auch die Farben zu ähnlich sind.

Hintergrundfarbe midnightblue				Schriftfarbwert #9400d3
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#191970	#191970	#191970	#191970	#9400d3	#9400d3	#9400d3	#9400d3
#393984	#393984	#151560	#151560	#a324d9	#a324d9	#7e00b4	#7e00b4
#5a5a98	#5a5a98	#111150	#111150	#b248df	#b248df	#690096	#690096
#7b7bad	#7b7bad	#0e0e40	#0e0e40	#c16de5	#c16de5	#540078	#540078
#9c9cc1	#9c9cc1	#0a0a30	#0a0a30	#d191ec	#d191ec	#3f005a	#3f005a
#bdbdd6	#bdbdd6	#070720	#070720	#e0b6f2	#e0b6f2	#2a003c	#2a003c
#dedeea	#dedeea	#030310	#030310	#efdaf8	#efdaf8	#15001e	#15001e
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe midnightblue und Farbwert #9400d3

Wechsel der Textfarbe bei Hover mit Tag p

Die Textfarbe soll sich von Farbe midnightblue auf Farbwert #9400d3 ändern, wenn man mit der Maus auf <p> zeigt. Bereiten wir zunächst eine Formatierung von <p> in Farbe midnightblue vor.

Wir legen für dieses Beispiel die Textfarbe von <p> auf Farbe midnightblue fest und ändern die Schriftgröße auf 13px:

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

Nun fordern wir, dass bei Berührung mit der Maus die Textfarbe auf #9400d3 gesetzt wird.

<style type="text/css"><!--
  p: hover { 
    color: #9400d3;
  }
//-->
</style>

Weiteres zum Thema p lesen Sie in Grundlegende Gestaltungselemente in HTML. Die Beschreibung vom Befehl p erfahren Sie in der HTML Referenz unter <p>.

Zebra-Effekt von Tag td

Man spricht von einem Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Er unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ung und .ger für <td> mit unterschiedlichen Hintergrundfarben Farbe midnightblue und Farbwert #9400d3.

<style type="text/css"><!--
  td.ung { 
    background-color: midnightblue;
  }
  td.ger { 
    background-color: #9400d3;
  }
//-->
</style>

Diese CSS-Klassen werden dann abwechselnd genutzt.

<table>
<tr><td class="ung">U1~1</td><td class="ger">U2~1</td><td class="ung">U3~1</td></tr>
<tr><td class="ung">U1~2</td><td class="ger">U2~2</td><td class="ung">U3~2</td></tr>
<tr><td class="ung">U1~3</td><td class="ger">U2~3</td><td class="ung">U3~3</td></tr>
</table>

Mehr zu td lesen Sie in Tabellen in HTML. Mehr zum Tag td ist in der HTML Referenz bei <td> ausführlich zusammengestellt.