Ressourcen: 120 HTML Farbnamen - Kombination von Farbe slategray und Farbe lavender

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 slategray			Schriftfarbe lavender
Detail	:	Hintergrund slategray	Detail	:	Schrift lavender
Farbe	:	slategray	Farbe	:	lavender
Farbwert	:	#708090	Farbwert	:	#e6e6fa
HTML	:	slategray	HTML	:	lavender
HTML (Wert)	:	#708090	HTML (Wert)	:	#e6e6fa
CSS	:	slategray	CSS	:	lavender
CSS (Wert)	:	#708090	CSS (Wert)	:	#e6e6fa
CSS (kürzest)	:	#708090	CSS (kürzest)	:	#e6e6fa
CSS (RGB)	:	rgb(112,128,144)	CSS (RGB)	:	rgb(230,230,250)
CSS (%RGB)	:	rgb(43%,50%,56%)	CSS (%RGB)	:	rgb(90%,90%,98%)

Verlauf Hintergrundfarbe slategray nach Schriftfarbe lavender
#708090	#808e9f	#919dae	#a2abbd	#b3bacc	#c4c8db	#d5d7ea	#e6e6fa
#708090	#808e9f	#919dae	#a2abbd	#b3bacc	#c4c8db	#d5d7ea	#e6e6fa

Kombination von slategray und lavender
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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante.				Die Ähnlichkeit von lavender und slategray ergibt sich zu 84.31%. Die Lesbarkeit dieser Farbkombination liegt damit bei 15.69%. lavender eignet sich nicht als Schriftfarbe auf Hintergrund slategray, da sich die Helligkeit und Farben zu ähnlich sind.

Hintergrundfarbe slategray				Schriftfarbe lavender
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#708090	#708090	#708090	#708090	#e6e6fa	#e6e6fa	#e6e6fa	#e6e6fa
#84929f	#84929f	#606d7b	#606d7b	#e9e9fa	#e9e9fa	#c5c5d6	#c5c5d6
#98a4af	#98a4af	#505b66	#505b66	#ededfb	#ededfb	#a4a4b2	#a4a4b2
#adb6bf	#adb6bf	#404952	#404952	#f0f0fc	#f0f0fc	#83838e	#83838e
#c1c8cf	#c1c8cf	#30363d	#30363d	#f4f4fc	#f4f4fc	#62626b	#62626b
#d6dadf	#d6dadf	#202429	#202429	#f7f7fd	#f7f7fd	#414147	#414147
#eaecef	#eaecef	#101214	#101214	#fbfbfe	#fbfbfe	#202023	#202023
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe slategray und Farbe lavender

Wechsel der Textfarbe bei Hover mit HTML-Befehl h1

Eine Überschrift der 1. Stufe setzt man mit HTML-Befehl <h1>. Diese können Sie farblich gestalten und hervorheben.

Die Textfarbe soll sich von Farbe slategray auf Farbe lavender ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <h1> in Farbe slategray vor.

Als Beispiel legen wir Farbe slategray als Textfarbe von <h1> fest und verkleinern die Schriftgröße auf 93%.

<style type="text/css"><!--
  h1 { 
    color:slategray; 
    font-size:93%;
  }
//-->
</style>

Jetzt fordern wir, dass bei Berührung mit der Maus die Textfarbe auf lavender gesetzt wird.

<style type="text/css"><!--
  h1: hover { 
    color: lavender;
  }
//-->
</style>

Mehr zum Thema h1 können Sie in Grundlegende Gestaltungselemente in HTML lesen. Zur Beschreibung des hier verwendeten HTML-Befehl <h1>.

Füllen und Umranden bei HTML-Befehl span

Bei diesem Beispiel umranden wir <span> mit einem gefurchten, 3 Pixel dicken Rahmen in Farbe lavender . Den Hintergrund von <span> färben wir mit Farbe slategray. In HTML ist dies nicht möglich. Wir verwenden deshalb CSS zur Formatierung.

<style type="text/css"><!--
  span { border:3px groove lavender; background-color:slategray; }
//-->
</style>

Möglichkeiten vom Tag span erfahren Sie in der HTML Referenz unter <span>.