Ressourcen: 120 HTML Farbnamen - Kombination von Farbe lavender und Farbwert #778899

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 #778899
Detail	:	Hintergrund lavender	Detail	:	Schrift #778899
Farbe	:	lavender	Farbwert	:	#778899
Farbwert	:	#e6e6fa	Farbe	:	lightslategray
HTML	:	lavender	HTML	:	#778899
HTML (Wert)	:	#e6e6fa	HTML (Wert)	:	#778899
CSS	:	lavender	CSS	:	#778899
CSS (Wert)	:	#e6e6fa	CSS (Wert)	:	#778899
CSS (kürzest)	:	#e6e6fa	CSS (kürzest)	:	#789
CSS (RGB)	:	rgb(230,230,250)	CSS (RGB)	:	rgb(119,136,153)
CSS (%RGB)	:	rgb(90%,90%,98%)	CSS (%RGB)	:	rgb(46%,53%,60%)

Verlauf Hintergrundfarbe lavender nach Schriftfarbwert #778899
#e6e6fa	#d6d8ec	#c6cbde	#b6bdd0	#a6b0c2	#96a2b4	#8695a6	#778899
#e6e6fa	#d6d8ec	#c6cbde	#b6bdd0	#a6b0c2	#96a2b4	#8695a6	#778899

Kombination von lavender und #778899
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.				Die Ähnlichkeit der Farben #778899 und lavender beträgt 85.91%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 14.09%. Auf Hintergrund lavender ist #778899 ungeeignet, da die Unterschiede in der Helligkeit und Farbe nicht ausreichend sind.

Hintergrundfarbe lavender				Schriftfarbwert #778899
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#e6e6fa	#e6e6fa	#e6e6fa	#e6e6fa	#778899	#778899	#778899	#778899
#e9e9fa	#e9e9fa	#c5c5d6	#c5c5d6	#8a99a7	#8a99a7	#667483	#667483
#ededfb	#ededfb	#a4a4b2	#a4a4b2	#9daab6	#9daab6	#55616d	#55616d
#f0f0fc	#f0f0fc	#83838e	#83838e	#b1bbc4	#b1bbc4	#444d57	#444d57
#f4f4fc	#f4f4fc	#62626b	#62626b	#c4ccd3	#c4ccd3	#333a41	#333a41
#f7f7fd	#f7f7fd	#414147	#414147	#d8dde1	#d8dde1	#22262b	#22262b
#fbfbfe	#fbfbfe	#202023	#202023	#ebeef0	#ebeef0	#111315	#111315
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe lavender und Farbwert #778899

Wechsel der Hintergrundfarbe bei Hover bei Tag button

Die Hintergrundfarbe soll sich von Farbe lavender auf Farbwert #778899 ändern, wenn man mit der Maus auf <button> zeigt. Bereiten wir zunächst eine Darstellung von <button> in Farbe lavender vor.

Hier setzen wir die Hintergrundfarbe von <button> auf Farbe lavender. Die Textfarbe lassen wir unverändert, setzen jedoch die Schriftart auf monospace und erhöhen die Schriftgröße auf 124%:

<style type="text/css"><!--
  button { 
    background-color:lavender; 
    font-family:monospace; 
    font-size:124%;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Hover die Hintergrundfarbe zu #778899 ändert.

<style type="text/css"><!--
  button:hover { 
    background-color:#778899;
  }
//-->
</style>

Mehr zum Thema button können Sie in Formulare in HTML nachlesen. Möglichkeiten des hier verwendeten HTML-Befehl button sind in der HTML Referenz bei <button> ausführlich beschrieben.

Zebra-Effekt mit HTML-Tag td

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, spricht man vom Zebra-Effekt. Dieser Effekt unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ung und .ger für <td> mit den Hintergrundfarben Farbe lavender und Farbwert #778899.

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

Diese Klassen werden abwechselnd verwendet.

<table>
<tr><td class="ung">Xa-a</td><td class="ger">Xb-a</td><td class="ung">Xc-a</td></tr>
<tr><td class="ung">Xa-b</td><td class="ger">Xb-b</td><td class="ung">Xc-b</td></tr>
<tr><td class="ung">Xa-c</td><td class="ger">Xb-c</td><td class="ung">Xc-c</td></tr>
</table>

Mehr zu td erfahren Sie in Tabellen in HTML. Möglichkeiten vom HTML-Tag td sind in der HTML Referenz bei <td> ausführlich beschrieben.