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

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 #faf0e6			Schriftfarbe midnightblue
Detail	:	Hintergrund #faf0e6	Detail	:	Schrift midnightblue
Farbwert	:	#faf0e6	Farbe	:	midnightblue
Farbe	:	linen	Farbwert	:	#191970
HTML	:	#faf0e6	HTML	:	midnightblue
HTML (Wert)	:	#faf0e6	HTML (Wert)	:	#191970
CSS	:	#faf0e6	CSS	:	midnightblue
CSS (Wert)	:	#faf0e6	CSS (Wert)	:	#191970
CSS (kürzest)	:	#faf0e6	CSS (kürzest)	:	#191970
CSS (RGB)	:	rgb(250,240,230)	CSS (RGB)	:	rgb(25,25,112)
CSS (%RGB)	:	rgb(98%,94%,90%)	CSS (%RGB)	:	rgb(9%,9%,43%)

Verlauf Hintergrundfarbwert #faf0e6 nach Schriftfarbe midnightblue
#faf0e6	#d9d1d5	#b9b2c4	#9993b3	#7975a2	#595691	#393780	#191970
#faf0e6	#d9d1d5	#b9b2c4	#9993b3	#7975a2	#595691	#393780	#191970

Kombination von #faf0e6 und midnightblue
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. 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.				midnightblue eignet sich als Schriftfarbe auf Hintergrund #faf0e6, weil der Unterschied in den Helligkeiten ok ist, der Unterschied in den Farben auch. Die Ähnlichkeit von midnightblue und #faf0e6 beträgt 37.14%. Die Lesbarkeit dieser Farbkombination liegt damit bei 62.86%.

Hintergrundfarbwert #faf0e6				Schriftfarbe midnightblue
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#faf0e6	#faf0e6	#faf0e6	#faf0e6	#191970	#191970	#191970	#191970
#faf2e9	#faf2e9	#d6cdc5	#d6cdc5	#393984	#393984	#151560	#151560
#fbf4ed	#fbf4ed	#b2aba4	#b2aba4	#5a5a98	#5a5a98	#111150	#111150
#fcf6f0	#fcf6f0	#8e8983	#8e8983	#7b7bad	#7b7bad	#0e0e40	#0e0e40
#fcf8f4	#fcf8f4	#6b6662	#6b6662	#9c9cc1	#9c9cc1	#0a0a30	#0a0a30
#fdfaf7	#fdfaf7	#474441	#474441	#bdbdd6	#bdbdd6	#070720	#070720
#fefcfb	#fefcfb	#232220	#232220	#dedeea	#dedeea	#030310	#030310
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #faf0e6 und Farbe midnightblue

Wechsel der Textfarbe bei Hover mit HTML-Tag var

Die Textfarbe soll sich von Farbwert #faf0e6 auf Farbe midnightblue ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Formatierung von <var> in Farbwert #faf0e6 vor.

Z.B. setzen wir die Textfarbe von <var> auf Farbwert #faf0e6. Die Hintergrundfarbe lassen wir unverändert. Die Schriftart setzen wir auf verdana.

<style type="text/css"><!--
  var { 
    color: #faf0e6; 
    font-family: verdana;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Hover die Textfarbe auf midnightblue ändert.

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

Mehr zum Thema var lesen Sie in Text in HTML. Mehr zum hier gezeigten HTML-Befehl <var>.

Wechsel der Unterstreichung bei Hover bei HTML-Tag h1

Eine Überschrift erzeugt man mit Befehl <h1>. Diese kann man farblich gestalten und hervorheben.

Die Farbe der Unterstreichung soll sich von Farbwert #faf0e6 auf Farbe midnightblue ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <h1> in Farbwert #faf0e6 vor.

In diesem Beispiel unterstreichen wir <h1> mit Hilfe eines einfallenden Rahmens mit 2 Pixel Dicke in Farbwert #faf0e6.

<style type="text/css"><!--
  h1 { 
    border-bottom-color:#faf0e6; 
    border-bottom-width:2px; 
    border-bottom-style:inset;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Berührung mit der Maus die Farbe der Unterstreichung zu midnightblue ändert.

<style type="text/css"><!--
  h1: hover { 
    border-bottom-color: midnightblue;
  }
//-->
</style>

Die Idee ist hierbei, voneinander unabhängige Formatierungen für Inhalt und Unterstreichung zu haben. Manchmal sieht man das bei Verweisen. Der Text ist in einer Farbe. Und die Unterstreichung in einer anderen. Es ist jedoch keine normale Unterstreichung, der Text selbst ist überhaupt nicht unterstrichen. Die Unterstreichung wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Mehr zum Thema können Sie in Grundlegende Gestaltungselemente in HTML finden. Weiteres zum Tag h1 erfahren Sie in der HTML Referenz unter <h1>.