Ressourcen: 120 HTML Farbnamen - Kombination von Farbe navajowhite und Farbe darkslateblue

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 navajowhite			Schriftfarbe darkslateblue
Detail	:	Hintergrund navajowhite	Detail	:	Schrift darkslateblue
Farbe	:	navajowhite	Farbe	:	darkslateblue
Farbwert	:	#ffdead	Farbwert	:	#483d8b
HTML	:	navajowhite	HTML	:	darkslateblue
HTML (Wert)	:	#ffdead	HTML (Wert)	:	#483d8b
CSS	:	navajowhite	CSS	:	darkslateblue
CSS (Wert)	:	#ffdead	CSS (Wert)	:	#483d8b
CSS (kürzest)	:	#ffdead	CSS (kürzest)	:	#483d8b
CSS (RGB)	:	rgb(255,222,173)	CSS (RGB)	:	rgb(72,61,139)
CSS (%RGB)	:	rgb(100%,87%,67%)	CSS (%RGB)	:	rgb(28%,23%,54%)

Verlauf Hintergrundfarbe navajowhite nach Schriftfarbe darkslateblue
#ffdead	#e4c7a8	#cab0a3	#b0999e	#968299	#7c6b94	#62548f	#483d8b
#ffdead	#e4c7a8	#cab0a3	#b0999e	#968299	#7c6b94	#62548f	#483d8b

Kombination von navajowhite und darkslateblue
Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				darkslateblue ist nicht als Schriftfarbe auf Hintergrund navajowhite geeignet, weil der Unterschied in den Farben nicht ausreichend ist Die Ähnlichkeit der Farben darkslateblue und navajowhite ergibt sich zu 66.48%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 33.52%.

Hintergrundfarbe navajowhite				Schriftfarbe darkslateblue
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ffdead	#ffdead	#ffdead	#ffdead	#483d8b	#483d8b	#483d8b	#483d8b
#ffe2b8	#ffe2b8	#dabe94	#dabe94	#62589b	#62589b	#3d3477	#3d3477
#ffe7c4	#ffe7c4	#b69e7b	#b69e7b	#7c74ac	#7c74ac	#332b63	#332b63
#ffecd0	#ffecd0	#917e62	#917e62	#9690bc	#9690bc	#29224f	#29224f
#fff0db	#fff0db	#6d5f4a	#6d5f4a	#b0abcd	#b0abcd	#1e1a3b	#1e1a3b
#fff5e7	#fff5e7	#483f31	#483f31	#cac7dd	#cac7dd	#141127	#141127
#fffaf3	#fffaf3	#241f18	#241f18	#e4e3ee	#e4e3ee	#0a0813	#0a0813
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe navajowhite und Farbe darkslateblue

Text- und Unterstreichungsfarben bei Befehl legend

Für dieses Beispiel ändern wir die Textfarbe von <legend> auf Farbe darkslateblue und lassen die Hintergrundfarbe unverändert. Die Schriftart ändern wir auf verdana. Die Schriftgröße verringern wir auf 83%. Wir unterstreichen den Inhalt von <legend> mit Hilfe eines gepunkteten Rahmens mit 1 Pixel Dicke in Farbe navajowhite. In HTML ist dies kaum möglich. Wir nutzen deshalb CSS zur Formatierung.

<style type="text/css"><!--
  legend { 
    color:darkslateblue; 
    font-size:83%; 
    border-bottom-width:1px; 
    font-family:verdana; 
    border-bottom-color:navajowhite; 
    border-bottom-style:dotted;
  }
//-->
</style>

Die Idee ist, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben.

Weiteres zum Thema legend finden Sie in Formulare in HTML. Beschreibung des hier verwendeten HTML-Tag <legend>.

Wechsel der Unterstreichung bei Hover mit Tag h3

Mit Befehl <h3> wird eine Überschrift gesetzt. Diese können Sie farblich gestalten.

Die Unterstreichungsfarbe soll sich von Farbe navajowhite auf Farbe darkslateblue ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Formatierung von <h3> in Farbe navajowhite vor.

Hier unterstreichen wir <h3> mit einem gezahnten Rahmen mit 5 Pixel Dicke in Farbe navajowhite.

<style type="text/css"><!--
  h3 { border-bottom:5px ridge navajowhite; }
//-->
</style>

Jetzt fordern wir, dass bei Berührung mit der Maus die Farbe der Unterstreichung auf darkslateblue gesetzt wird.

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

Die Idee ist hierbei, voneinander unabhängige Formatierungen für Inhalt und Unterstreichung zu nutzen. Öfter sehen Sie dies bei Links. Der Text wird in einer Farbe dargestellt. Die Unterstreichung in einer anderen. Hierbei handelt es sich jedoch nicht um eine wirkliche Unterstreichung, der Text selbst ist überhaupt nicht unterstrichen. Die Unterstreichung wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Mehr zum Thema finden Sie in Grundlegende Gestaltungselemente in HTML. Weiteres zum Befehl h3 ist in der HTML Referenz bei <h3> ausführlich gezeigt.