Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #191970 und Farbwert #f5f5f5

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 #191970			Schriftfarbwert #f5f5f5
Detail	:	Hintergrund #191970	Detail	:	Schrift #f5f5f5
Farbwert	:	#191970	Farbwert	:	#f5f5f5
Farbe	:	midnightblue	Farbe	:	whitesmoke
HTML	:	#191970	HTML	:	#f5f5f5
HTML (Wert)	:	#191970	HTML (Wert)	:	#f5f5f5
CSS	:	#191970	CSS	:	#f5f5f5
CSS (Wert)	:	#191970	CSS (Wert)	:	#f5f5f5
CSS (kürzest)	:	#191970	CSS (kürzest)	:	#f5f5f5
CSS (RGB)	:	rgb(25,25,112)	CSS (RGB)	:	rgb(245,245,245)
CSS (%RGB)	:	rgb(9%,9%,43%)	CSS (%RGB)	:	rgb(96%,96%,96%)

Verlauf Hintergrundfarbwert #191970 nach Schriftfarbwert #f5f5f5
#191970	#383883	#575796	#7777a9	#9696bc	#b6b6cf	#d5d5e2	#f5f5f5
#191970	#383883	#575796	#7777a9	#9696bc	#b6b6cf	#d5d5e2	#f5f5f5

Kombination von #191970 und #f5f5f5
Cras vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				#f5f5f5 eignet sich als Schriftfarbe auf Hintergrund #191970. Der Unterschied in den Helligkeiten ist gut, der Unterschied in den Farben auch. Die Ähnlichkeit von #f5f5f5 und #191970 ergibt sich zu 35.15%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 64.85%.

Hintergrundfarbwert #191970				Schriftfarbwert #f5f5f5
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#191970	#191970	#191970	#191970	#f5f5f5	#f5f5f5	#f5f5f5	#f5f5f5
#393984	#393984	#151560	#151560	#f6f6f6	#f6f6f6	#d2d2d2	#d2d2d2
#5a5a98	#5a5a98	#111150	#111150	#f7f7f7	#f7f7f7	#afafaf	#afafaf
#7b7bad	#7b7bad	#0e0e40	#0e0e40	#f9f9f9	#f9f9f9	#8c8c8c	#8c8c8c
#9c9cc1	#9c9cc1	#0a0a30	#0a0a30	#fafafa	#fafafa	#696969	#696969
#bdbdd6	#bdbdd6	#070720	#070720	#fcfcfc	#fcfcfc	#464646	#464646
#dedeea	#dedeea	#030310	#030310	#fdfdfd	#fdfdfd	#232323	#232323
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #191970 und Farbwert #f5f5f5

Zebra-Effekt von Befehl th

Man redet vom Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Der Effekt unterstützt das Auge, etwa die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ungerade und .gerade für <th> mit unterschiedlichen Hintergrundfarben Farbwert #191970 und Farbwert #f5f5f5.

<style type="text/css"><!--
  th.ungerade { 
    background-color: #191970;
  }
  th.gerade { 
    background-color:#f5f5f5;
  }
//-->
</style>

Diese CSS-Klassen werden dann abwechselnd angewendet.

<table>
<tr><td class="ungerade">Ha-a</td><td class="gerade">Hb-a</td><td class="ungerade">Hc-a</td></tr>
<tr><td class="ungerade">Ha-b</td><td class="gerade">Hb-b</td><td class="ungerade">Hc-b</td></tr>
<tr><td class="ungerade">Ha-c</td><td class="gerade">Hb-c</td><td class="ungerade">Hc-c</td></tr>
</table>

Weiteres zum Thema erfahren Sie in Tabellen in HTML. Möglichkeiten des hier verwendeten HTML-Befehl th sind in der HTML Referenz unter <th> genau gezeigt.

Wechsel der Textfarbe bei Hover mit Tag h2

Mit Befehl <h2> erzeugen Sie eine Überschrift. Diese können Sie hervorheben und farblich gestalten.

Die Textfarbe soll sich von Farbwert #191970 auf Farbwert #f5f5f5 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Formatierung von <h2> in Farbwert #191970 vor.

Hier legen wir bei <h2> die Textfarbe auf Farbwert #191970 fest. Die Hintergrundfarbe lassen wir unverändert. Die Schriftart setzen wir auf arial und erhöhen die Schriftgröße auf 122%:

<style type="text/css"><!--
  h2 { 
    color:#191970; 
    font-size:122%; 
    font-family:arial;
  }
//-->
</style>

Nun fordern wir, dass sich bei Mausberührung die Textfarbe auf #f5f5f5 ändert.

<style type="text/css"><!--
  h2:hover { 
    color:#f5f5f5;
  }
//-->
</style>

Weiteres zum Thema können Sie in Grundlegende Gestaltungselemente in HTML lesen. Mehr zum HTML-Befehl <h2>.