Ressourcen: 120 HTML Farbnamen - Kombination von Farbe navajowhite und Farbwert #8b4513

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			Schriftfarbwert #8b4513
Detail	:	Hintergrund navajowhite	Detail	:	Schrift #8b4513
Farbe	:	navajowhite	Farbwert	:	#8b4513
Farbwert	:	#ffdead	Farbe	:	saddlebrown
HTML	:	navajowhite	HTML	:	#8b4513
HTML (Wert)	:	#ffdead	HTML (Wert)	:	#8b4513
CSS	:	navajowhite	CSS	:	#8b4513
CSS (Wert)	:	#ffdead	CSS (Wert)	:	#8b4513
CSS (kürzest)	:	#ffdead	CSS (kürzest)	:	#8b4513
CSS (RGB)	:	rgb(255,222,173)	CSS (RGB)	:	rgb(139,69,19)
CSS (%RGB)	:	rgb(100%,87%,67%)	CSS (%RGB)	:	rgb(54%,27%,7%)

Verlauf Hintergrundfarbe navajowhite nach Schriftfarbwert #8b4513
#ffdead	#eec897	#ddb281	#cd9c6b	#bc8655	#ac703f	#9b5a29	#8b4513
#ffdead	#eec897	#ddb281	#cd9c6b	#bc8655	#ac703f	#9b5a29	#8b4513

Kombination von navajowhite und #8b4513
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit von #8b4513 und navajowhite beträgt 73.76%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 26.24%. Auf Hintergrund navajowhite ist #8b4513 ungeeignet. Zwar ist der Helligkeitsunterschied ausreichend, die Farben selbst sind jedoch zu ähnlich.

Hintergrundfarbe navajowhite				Schriftfarbwert #8b4513
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ffdead	#ffdead	#ffdead	#ffdead	#8b4513	#8b4513	#8b4513	#8b4513
#ffe2b8	#ffe2b8	#dabe94	#dabe94	#9b5f34	#9b5f34	#773b10	#773b10
#ffe7c4	#ffe7c4	#b69e7b	#b69e7b	#ac7a56	#ac7a56	#63310d	#63310d
#ffecd0	#ffecd0	#917e62	#917e62	#bc9478	#bc9478	#4f270a	#4f270a
#fff0db	#fff0db	#6d5f4a	#6d5f4a	#cdaf99	#cdaf99	#3b1d08	#3b1d08
#fff5e7	#fff5e7	#483f31	#483f31	#ddc9bb	#ddc9bb	#271305	#271305
#fffaf3	#fffaf3	#241f18	#241f18	#eee4dd	#eee4dd	#130902	#130902
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe navajowhite und Farbwert #8b4513

Zebra-Effekt von HTML-Tag td

Man redet von einem Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Dieser Effekt unterstützt das Auge zum Beispiel die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .odd und .even für <td> mit den Hintergrundfarben Farbe navajowhite und Farbwert #8b4513.

<style type="text/css"><!--
  td.odd { 
    background-color: navajowhite;
  }
  td.even { 
    background-color: #8b4513;
  }
//-->
</style>

Diese werden dann abwechselnd genutzt.

<table>
<tr><td class="odd">I1:1</td><td class="even">I2:1</td><td class="odd">I3:1</td></tr>
<tr><td class="odd">I1:2</td><td class="even">I2:2</td><td class="odd">I3:2</td></tr>
<tr><td class="odd">I1:3</td><td class="even">I2:3</td><td class="odd">I3:3</td></tr>
</table>

Weiteres zu td lesen Sie in Tabellen in HTML. Die Beschreibung vom hier genutzten Befehl td finden Sie in der HTML Referenz unter <td>.

Wechsel der Textfarbe bei Hover mit Tag h3

Eine Überschrift der 3. Stufe erzeugen Sie mit HTML-Tag <h3>. Diese kann man farblich gestalten und hervorheben.

Die Textfarbe soll sich von Farbe navajowhite auf Farbwert #8b4513 ändern, wenn man mit der Maus auf <h3> zeigt. Bereiten wir zunächst eine Formatierung von <h3> in Farbe navajowhite vor.

Wir legen z.B. Farbe navajowhite als Textfarbe von <h3> fest. Zwar behalten wir die Hintergrundfarbe bei, setzen jedoch die Schriftart auf arial und erhöhen die Größe der Schrift auf 125%.

<style type="text/css"><!--
  h3 { 
    font-size: 125%; 
    color: navajowhite; 
    font-family: arial;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Hover die Textfarbe auf #8b4513 ändert.

<style type="text/css"><!--
  h3: hover { 
    color: #8b4513;
  }
//-->
</style>

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