Ressourcen: 120 HTML Farbnamen - Kombination von Farbe indigo und Farbe lightsteelblue

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 indigo			Schriftfarbe lightsteelblue
Detail	:	Hintergrund indigo	Detail	:	Schrift lightsteelblue
Farbe	:	indigo	Farbe	:	lightsteelblue
Farbwert	:	#4b0082	Farbwert	:	#b0c4de
HTML	:	indigo	HTML	:	lightsteelblue
HTML (Wert)	:	#4b0082	HTML (Wert)	:	#b0c4de
CSS	:	indigo	CSS	:	lightsteelblue
CSS (Wert)	:	#4b0082	CSS (Wert)	:	#b0c4de
CSS (kürzest)	:	#4b0082	CSS (kürzest)	:	#b0c4de
CSS (RGB)	:	rgb(75,0,130)	CSS (RGB)	:	rgb(176,196,222)
CSS (%RGB)	:	rgb(29%,0%,50%)	CSS (%RGB)	:	rgb(69%,76%,87%)

Verlauf Hintergrundfarbe indigo nach Schriftfarbe lightsteelblue
#4b0082	#591c8f	#67389c	#7654a9	#8470b6	#938cc3	#a1a8d0	#b0c4de
#4b0082	#591c8f	#67389c	#7654a9	#8470b6	#938cc3	#a1a8d0	#b0c4de

Kombination von indigo und lightsteelblue
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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante.				Die Ähnlichkeit der Farben lightsteelblue und indigo beträgt 65.36%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 34.64%. lightsteelblue eignet sich nicht als Schriftfarbe auf Hintergrund indigo. Zwar ist der Helligkeitsunterschied ausreichend, doch die Farben selbst sind zu ähnlich.

Hintergrundfarbe indigo				Schriftfarbe lightsteelblue
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#4b0082	#4b0082	#4b0082	#4b0082	#b0c4de	#b0c4de	#b0c4de	#b0c4de
#642493	#642493	#40006f	#40006f	#bbcce2	#bbcce2	#96a8be	#96a8be
#7e48a5	#7e48a5	#35005c	#35005c	#c6d4e7	#c6d4e7	#7d8c9e	#7d8c9e
#986db7	#986db7	#2a004a	#2a004a	#d1ddec	#d1ddec	#64707e	#64707e
#b191c9	#b191c9	#200037	#200037	#dde5f0	#dde5f0	#4b545f	#4b545f
#cbb6db	#cbb6db	#150025	#150025	#e8eef5	#e8eef5	#32383f	#32383f
#e5daed	#e5daed	#0a0012	#0a0012	#f3f6fa	#f3f6fa	#191c1f	#191c1f
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe indigo und Farbe lightsteelblue

Füllen und Umranden von Befehl frame

Für dieses Beispiel umranden wir <frame> mit einem . Den Hintergrund von <frame> färben wir mit Farbe indigo. In HTML geht das nicht. Wir nutzen daher CSS zur Formatierung.

<style type="text/css"><!--
  frame { 
    border-color:lightsteelblue; 
    border-width:3px; 
    border-style:outset; 
    background-color:indigo;
  }
//-->
</style>

Der HTML-Tag frame ist in der HTML Referenz unter <frame> ausführlich zusammengestellt.

Wechsel der Textfarbe bei Hover mit HTML-Befehl kbd

Die Textfarbe soll sich von Farbe indigo auf Farbe lightsteelblue ändern, wenn man mit der Maus auf <kbd> zeigt. Wir bereiten zunächst die Darstellung von <kbd> in Farbe indigo vor.

Für dieses Beispiel legen wir bei <kbd> die Textfarbe auf Farbe indigo fest. Die Größe der Schrift setzen wir auf 85S%.

<style type="text/css"><!--
  kbd { 
    color:indigo; 
    font-size:85S%;
  }
//-->
</style>

Jetzt stellen wir ein, dass bei Berührung mit der Maus die Textfarbe auf lightsteelblue geändert wird.

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

Mehr zum Thema kbd lesen Sie in Text in HTML. Zur Beschreibung vom hier genutzten Befehl <kbd>.