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

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 #ff1493
Detail	:	Hintergrund lavender	Detail	:	Schrift #ff1493
Farbe	:	lavender	Farbwert	:	#ff1493
Farbwert	:	#e6e6fa	Farbe	:	deeppink
HTML	:	lavender	HTML	:	#ff1493
HTML (Wert)	:	#e6e6fa	HTML (Wert)	:	#ff1493
CSS	:	lavender	CSS	:	#ff1493
CSS (Wert)	:	#e6e6fa	CSS (Wert)	:	#ff1493
CSS (kürzest)	:	#e6e6fa	CSS (kürzest)	:	#ff1493
CSS (RGB)	:	rgb(230,230,250)	CSS (RGB)	:	rgb(255,20,147)
CSS (%RGB)	:	rgb(90%,90%,98%)	CSS (%RGB)	:	rgb(100%,7%,57%)

Verlauf Hintergrundfarbe lavender nach Schriftfarbwert #ff1493
#e6e6fa	#e9c8eb	#edaadc	#f08ccd	#f46ebf	#f750b0	#fb32a1	#ff1493
#e6e6fa	#e9c8eb	#edaadc	#f08ccd	#f46ebf	#f750b0	#fb32a1	#ff1493

Kombination von lavender und #ff1493
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 von #ff1493 und lavender beträgt 85.93%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 14.07%. Auf Hintergrund lavender ist #ff1493 ungeeignet. Zwar ist der Helligkeitsunterschied ausreichend, die Farben selbst sind sich zu ähnlich.

Hintergrundfarbe lavender				Schriftfarbwert #ff1493
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#e6e6fa	#e6e6fa	#e6e6fa	#e6e6fa	#ff1493	#ff1493	#ff1493	#ff1493
#e9e9fa	#e9e9fa	#c5c5d6	#c5c5d6	#ff35a2	#ff35a2	#da117e	#da117e
#ededfb	#ededfb	#a4a4b2	#a4a4b2	#ff57b1	#ff57b1	#b60e69	#b60e69
#f0f0fc	#f0f0fc	#83838e	#83838e	#ff78c1	#ff78c1	#910b54	#910b54
#f4f4fc	#f4f4fc	#62626b	#62626b	#ff9ad0	#ff9ad0	#6d083f	#6d083f
#f7f7fd	#f7f7fd	#414147	#414147	#ffbbe0	#ffbbe0	#48052a	#48052a
#fbfbfe	#fbfbfe	#202023	#202023	#ffddef	#ffddef	#240215	#240215
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe lavender und Farbwert #ff1493

Wechsel der Umrandung bei Hover von Befehl strong

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

In diesem Beispiel umranden wir <strong> mit einem 1 Pixel dicken, herausstehenden Rahmen in Farbe lavender.

<style type="text/css"><!--
  strong { 
    border-width: 1px; 
    border-style: outset; 
    border-color: lavender;
  }
//-->
</style>

Jetzt fordern wir, dass bei Hover die Rahmenfarbe auf #ff1493 gesetzt wird.

<style type="text/css"><!--
  strong: hover { 
    border-color: #ff1493;
  }
//-->
</style>

Mehr zum Thema strong können Sie in Text in HTML nachsehen. Einzelheiten vom HTML-Tag strong finden Sie in der HTML Referenz unter <strong>.

Zebra-Effekt mit HTML-Tag td

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

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

Diese CSS-Klassen werden abwechselnd verwendet.

<table>
<tr><td class="ung">W1.1</td><td class="ger">W2.1</td><td class="ung">W3.1</td></tr>
<tr><td class="ung">W1.2</td><td class="ger">W2.2</td><td class="ung">W3.2</td></tr>
<tr><td class="ung">W1.3</td><td class="ger">W2.3</td><td class="ung">W3.3</td></tr>
</table>

Weiteres zum Thema td können Sie in Tabellen in HTML nachlesen. Der HTML-Befehl td ist in der HTML Referenz bei <td> beschrieben.