Ressourcen: 120 HTML Farbnamen - Kombination von Farbe slateblue und Farbe lavenderblush

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 slateblue			Schriftfarbe lavenderblush
Detail	:	Hintergrund slateblue	Detail	:	Schrift lavenderblush
Farbe	:	slateblue	Farbe	:	lavenderblush
Farbwert	:	#6a5acd	Farbwert	:	#fff0f5
HTML	:	slateblue	HTML	:	lavenderblush
HTML (Wert)	:	#6a5acd	HTML (Wert)	:	#fff0f5
CSS	:	slateblue	CSS	:	lavenderblush
CSS (Wert)	:	#6a5acd	CSS (Wert)	:	#fff0f5
CSS (kürzest)	:	#6a5acd	CSS (kürzest)	:	#fff0f5
CSS (RGB)	:	rgb(106,90,205)	CSS (RGB)	:	rgb(255,240,245)
CSS (%RGB)	:	rgb(41%,35%,80%)	CSS (%RGB)	:	rgb(100%,94%,96%)

Verlauf Hintergrundfarbe slateblue nach Schriftfarbe lavenderblush
#6a5acd	#7f6fd2	#9484d8	#a99ade	#bfafe3	#d4c5e9	#e9daef	#fff0f5
#6a5acd	#7f6fd2	#9484d8	#a99ade	#bfafe3	#d4c5e9	#e9daef	#fff0f5

Kombination von slateblue und lavenderblush
Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit der Farben lavenderblush und slateblue beträgt 77.09%. Die Lesbarkeit dieser Kombination bewerte ich mit 22.91%. lavenderblush ist nicht als Schriftfarbe auf Hintergrund slateblue geeignet, da der Farbunterschied zu gering ist

Hintergrundfarbe slateblue				Schriftfarbe lavenderblush
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#6a5acd	#6a5acd	#6a5acd	#6a5acd	#fff0f5	#fff0f5	#fff0f5	#fff0f5
#7f71d4	#7f71d4	#5a4daf	#5a4daf	#fff2f6	#fff2f6	#dacdd2	#dacdd2
#9489db	#9489db	#4b4092	#4b4092	#fff4f7	#fff4f7	#b6abaf	#b6abaf
#a9a0e2	#a9a0e2	#3c3375	#3c3375	#fff6f9	#fff6f9	#91898c	#91898c
#bfb8e9	#bfb8e9	#2d2657	#2d2657	#fff8fa	#fff8fa	#6d6669	#6d6669
#d4cff0	#d4cff0	#1e193a	#1e193a	#fffafc	#fffafc	#484446	#484446
#e9e7f7	#e9e7f7	#0f0c1d	#0f0c1d	#fffcfd	#fffcfd	#242223	#242223
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe slateblue und Farbe lavenderblush

Wechsel der Umrandung bei Hover von Befehl frame

Die Rahmenfarbe soll sich von Farbe slateblue auf Farbe lavenderblush ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Darstellung von <frame> in Farbe slateblue vor.

In diesem Beispiel umranden wir <frame> mit einem 4 Pixel dicken, einfallenden Rahmen in Farbe slateblue.

<style type="text/css"><!--
  frame { border:4px inset slateblue; }
//-->
</style>

Nun fordern wir, dass bei Hover die Rahmenfarbe auf lavenderblush geändert wird.

<style type="text/css"><!--
  frame: hover { 
    border-color: lavenderblush;
  }
//-->
</style>

Der HTML-Tag frame ist in der HTML Referenz unter <frame> gezeigt.

Wechsel der Hintergrundfarbe bei Hover bei Befehl code

Die Hintergrundfarbe soll sich von Farbe slateblue auf Farbe lavenderblush ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Darstellung von <code> in Farbe slateblue vor.

Für dieses Beispiel legen wir bei <code> die Hintergrundfarbe auf Farbe slateblue fest. Die Textfarbe lassen wir unverändert, setzen jedoch die Schriftart auf verdana und vergrößern die Größe der Schrift auf 120%:

<style type="text/css"><!--
  code { 
    font-size:120%; 
    font-family:verdana; 
    background-color:slateblue;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Mausberührung die Hintergrundfarbe auf lavenderblush ändert.

<style type="text/css"><!--
  code:hover { 
    background-color:lavenderblush;
  }
//-->
</style>

Weiteres zum Thema code können Sie in Text in HTML finden. Die Beschreibung vom HTML-Befehl code erfahren Sie in der HTML Referenz unter <code>.