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

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 lightgrey			Schriftfarbe slateblue
Detail	:	Hintergrund lightgrey	Detail	:	Schrift slateblue
Farbe	:	lightgrey	Farbe	:	slateblue
Farbwert	:	#d3d3d3	Farbwert	:	#6a5acd
HTML	:	lightgrey	HTML	:	slateblue
HTML (Wert)	:	#d3d3d3	HTML (Wert)	:	#6a5acd
CSS	:	lightgrey	CSS	:	slateblue
CSS (Wert)	:	#d3d3d3	CSS (Wert)	:	#6a5acd
CSS (kürzest)	:	#d3d3d3	CSS (kürzest)	:	#6a5acd
CSS (RGB)	:	rgb(211,211,211)	CSS (RGB)	:	rgb(106,90,205)
CSS (%RGB)	:	rgb(82%,82%,82%)	CSS (%RGB)	:	rgb(41%,35%,80%)

Verlauf Hintergrundfarbe lightgrey nach Schriftfarbe slateblue
#d3d3d3	#c4c1d2	#b5b0d1	#a69fd0	#978dcf	#887cce	#796bcd	#6a5acd
#d3d3d3	#c4c1d2	#b5b0d1	#a69fd0	#978dcf	#887cce	#796bcd	#6a5acd

Kombination von lightgrey und slateblue
Cras id velit ante. 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 vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				Die Ähnlichkeit von slateblue und lightgrey ergibt sich zu 83.12%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 16.88%. slateblue eignet sich nicht als Schriftfarbe auf Hintergrund lightgrey. Die Unterschiede in der Helligkeit und Farbe sind zu gering.

Hintergrundfarbe lightgrey				Schriftfarbe slateblue
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#d3d3d3	#d3d3d3	#d3d3d3	#d3d3d3	#6a5acd	#6a5acd	#6a5acd	#6a5acd
#d9d9d9	#d9d9d9	#b4b4b4	#b4b4b4	#7f71d4	#7f71d4	#5a4daf	#5a4daf
#dfdfdf	#dfdfdf	#969696	#969696	#9489db	#9489db	#4b4092	#4b4092
#e5e5e5	#e5e5e5	#787878	#787878	#a9a0e2	#a9a0e2	#3c3375	#3c3375
#ececec	#ececec	#5a5a5a	#5a5a5a	#bfb8e9	#bfb8e9	#2d2657	#2d2657
#f2f2f2	#f2f2f2	#3c3c3c	#3c3c3c	#d4cff0	#d4cff0	#1e193a	#1e193a
#f8f8f8	#f8f8f8	#1e1e1e	#1e1e1e	#e9e7f7	#e9e7f7	#0f0c1d	#0f0c1d
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe lightgrey und Farbe slateblue

Wechsel der Unterstreichung bei Hover bei Tag code

Die Farbe der Unterstreichung soll sich von Farbe lightgrey auf Farbe slateblue ändern, wenn man mit der Maus auf <code> zeigt. Bereiten wir zunächst die Formatierung von <code> in Farbe lightgrey vor.

In diesem Beispiel unterstreichen wir <code> mit Hilfe eines doppelten Rahmens mit 2 Pixel Dicke in Farbe lightgrey.

<style type="text/css"><!--
  code { border-bottom:2px double lightgrey; }
//-->
</style>

Nun fordern wir, dass sich bei Hover die Farbe der Unterstreichung zu slateblue ändert.

<style type="text/css"><!--
  code: hover { 
    border-bottom-color: slateblue;
  }
//-->
</style>

Die Idee ist dabei, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu nutzen. Öfter sieht man dies bei Links. Der Text ist in einer Farbe. Und die Unterstreichung in einer anderen. Hierbei handelt es sich aber nicht um eine normale Unterstreichung, der Text selbst ist nicht unterstrichen. Sie wird mit einem Rahmen simuliert und dieser ist unabhängig vom Text.

Weiteres zum Thema können Sie in Text in HTML erfahren. Mehr zum Befehl code lesen Sie in der HTML Referenz unter <code>.

Hintergrund/Text-Kombination bei Tag a

Einen Hyperlink erzeugt man mit HTML-Befehl <a>. Diesen kann man farblich gestalten und hervorheben.

Hier ändern wir die Textfarbe von <a> auf Farbe slateblue und die Hintergrundfarbe von <a> auf Farbe lightgrey. Als Schriftart wählen wir sans-serif und setzen die Schriftgröße auf 115%.

<style type="text/css"><!--
  a { 
    color: slateblue; 
    font-family: sans-serif; 
    background-color: lightgrey; 
    font-size: 115%;
  }
//-->
</style>

Mehr zum Thema a lesen Sie in Verweise und Protokolle in HTML. Möglichkeiten vom HTML-Befehl <a>.