Ressourcen: 120 HTML Farbnamen - Kombination von Farbe lavender 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 lavender			Schriftfarbwert #8b4513
Detail	:	Hintergrund lavender	Detail	:	Schrift #8b4513
Farbe	:	lavender	Farbwert	:	#8b4513
Farbwert	:	#e6e6fa	Farbe	:	saddlebrown
HTML	:	lavender	HTML	:	#8b4513
HTML (Wert)	:	#e6e6fa	HTML (Wert)	:	#8b4513
CSS	:	lavender	CSS	:	#8b4513
CSS (Wert)	:	#e6e6fa	CSS (Wert)	:	#8b4513
CSS (kürzest)	:	#e6e6fa	CSS (kürzest)	:	#8b4513
CSS (RGB)	:	rgb(230,230,250)	CSS (RGB)	:	rgb(139,69,19)
CSS (%RGB)	:	rgb(90%,90%,98%)	CSS (%RGB)	:	rgb(54%,27%,7%)

Verlauf Hintergrundfarbe lavender nach Schriftfarbwert #8b4513
#e6e6fa	#d9cfd9	#ccb8b8	#bfa197	#b28a76	#a57355	#985c34	#8b4513
#e6e6fa	#d9cfd9	#ccb8b8	#bfa197	#b28a76	#a57355	#985c34	#8b4513

Kombination von lavender und #8b4513
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Die Ähnlichkeit der Farben #8b4513 und lavender beträgt 72.53%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 27.47%. #8b4513 eignet sich nicht als Schriftfarbe auf Hintergrund lavender, da der Farbunterschied zu gering ist

Hintergrundfarbe lavender				Schriftfarbwert #8b4513
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#e6e6fa	#e6e6fa	#e6e6fa	#e6e6fa	#8b4513	#8b4513	#8b4513	#8b4513
#e9e9fa	#e9e9fa	#c5c5d6	#c5c5d6	#9b5f34	#9b5f34	#773b10	#773b10
#ededfb	#ededfb	#a4a4b2	#a4a4b2	#ac7a56	#ac7a56	#63310d	#63310d
#f0f0fc	#f0f0fc	#83838e	#83838e	#bc9478	#bc9478	#4f270a	#4f270a
#f4f4fc	#f4f4fc	#62626b	#62626b	#cdaf99	#cdaf99	#3b1d08	#3b1d08
#f7f7fd	#f7f7fd	#414147	#414147	#ddc9bb	#ddc9bb	#271305	#271305
#fbfbfe	#fbfbfe	#202023	#202023	#eee4dd	#eee4dd	#130902	#130902
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe lavender und Farbwert #8b4513

Zebra-Effekt bei HTML-Befehl th

Man spricht vom Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Er unterstützt das Auge zum Beispiel die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ger und .ung für <th> mit den Hintergrundfarben Farbe lavender und Farbwert #8b4513.

<style type="text/css"><!--
  th.ger { 
    background-color:lavender;
  }
  th.ung { 
    background-color: #8b4513;
  }
//-->
</style>

Diese werden abwechselnd verwendet.

<table>
<tr><td class="ger">M1~1</td><td class="ung">M2~1</td><td class="ger">M3~1</td></tr>
<tr><td class="ger">M1~2</td><td class="ung">M2~2</td><td class="ger">M3~2</td></tr>
<tr><td class="ger">M1~3</td><td class="ung">M2~3</td><td class="ger">M3~3</td></tr>
</table>

Mehr zum Thema erfahren Sie in Tabellen in HTML. Mehr zum hier gezeigten Tag th ist in der HTML Referenz unter <th> ausführlich beschrieben.

Wechsel der Hintergrundfarbe bei Hover bei HTML-Befehl h3

Eine Überschrift der 3. Stufe erzeugt man mit Tag <h3>. Sie kann hervorgehoben und farblich gestaltet werden.

Die Hintergrundfarbe soll sich von Farbe lavender auf Farbwert #8b4513 ändern, wenn man mit der Maus auf <h3> zeigt. Wir bereiten zunächst die Darstellung von <h3> in Farbe lavender vor.

Wir legen z.B. Farbe lavender als Hintergrundfarbe von <h3> fest. Zwar behalten wir die Textfarbe bei, setzen jedoch die Schriftart auf arial.

<style type="text/css"><!--
  h3 { 
    background-color: lavender; 
    font-family: arial;
  }
//-->
</style>

Nun fordern wir, dass sich bei Mausberührung die Hintergrundfarbe zu #8b4513 ändert.

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

Mehr zu h3 können Sie in Grundlegende Gestaltungselemente in HTML nachsehen. Zur Beschreibung des hier genutzten HTML-Befehl <h3>.