Ressourcen: 120 HTML Farbnamen - Kombination von Farbe darkmagenta 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 darkmagenta			Schriftfarbe lightsteelblue
Detail	:	Hintergrund darkmagenta	Detail	:	Schrift lightsteelblue
Farbe	:	darkmagenta	Farbe	:	lightsteelblue
Farbwert	:	#8b008b	Farbwert	:	#b0c4de
HTML	:	darkmagenta	HTML	:	lightsteelblue
HTML (Wert)	:	#8b008b	HTML (Wert)	:	#b0c4de
CSS	:	darkmagenta	CSS	:	lightsteelblue
CSS (Wert)	:	#8b008b	CSS (Wert)	:	#b0c4de
CSS (kürzest)	:	#8b008b	CSS (kürzest)	:	#b0c4de
CSS (RGB)	:	rgb(139,0,139)	CSS (RGB)	:	rgb(176,196,222)
CSS (%RGB)	:	rgb(54%,0%,54%)	CSS (%RGB)	:	rgb(69%,76%,87%)

Verlauf Hintergrundfarbe darkmagenta nach Schriftfarbe lightsteelblue
#8b008b	#901c96	#9538a2	#9a54ae	#a070ba	#a58cc6	#aaa8d2	#b0c4de
#8b008b	#901c96	#9538a2	#9a54ae	#a070ba	#a58cc6	#aaa8d2	#b0c4de

Kombination von darkmagenta und lightsteelblue
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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante.				Die Ähnlichkeit der Farben lightsteelblue und darkmagenta ergibt sich zu 77.26%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 22.74%. lightsteelblue eignet sich nicht als Schriftfarbe auf Hintergrund darkmagenta. Zwar ist der Helligkeitsunterschied ausreichend, doch die Farben selbst sind zu ähnlich.

Hintergrundfarbe darkmagenta				Schriftfarbe lightsteelblue
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#8b008b	#8b008b	#8b008b	#8b008b	#b0c4de	#b0c4de	#b0c4de	#b0c4de
#9b249b	#9b249b	#770077	#770077	#bbcce2	#bbcce2	#96a8be	#96a8be
#ac48ac	#ac48ac	#630063	#630063	#c6d4e7	#c6d4e7	#7d8c9e	#7d8c9e
#bc6dbc	#bc6dbc	#4f004f	#4f004f	#d1ddec	#d1ddec	#64707e	#64707e
#cd91cd	#cd91cd	#3b003b	#3b003b	#dde5f0	#dde5f0	#4b545f	#4b545f
#ddb6dd	#ddb6dd	#270027	#270027	#e8eef5	#e8eef5	#32383f	#32383f
#eedaee	#eedaee	#130013	#130013	#f3f6fa	#f3f6fa	#191c1f	#191c1f
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe darkmagenta und Farbe lightsteelblue

Wechsel der Textfarbe bei Hover bei HTML-Befehl a

Mit Befehl <a> wird ein Verweis erzeugt. Diesen können Sie farblich gestalten.

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

Wir legen hier Farbe darkmagenta als Textfarbe von <a> fest. Die Hintergrundfarbe lassen wir unverändert. Die Schriftart ändern wir auf sans-serif und ändern die Größe der Schrift auf 13px:

<style type="text/css"><!--
  a { 
    color: darkmagenta; 
    font-size: 13px; 
    font-family: sans-serif;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Berührung mit der Maus die Textfarbe zu lightsteelblue ändert.

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

Mehr zum Thema erfahren Sie in Verweise und Protokolle in HTML. Möglichkeiten vom HTML-Tag a lesen Sie in der HTML Referenz unter <a>.

Wechsel der Unterstreichung bei Hover mit Tag label

Die Farbe der Unterstreichung soll sich von Farbe darkmagenta auf Farbe lightsteelblue ändern, wenn man mit der Maus auf <label> zeigt. Wir bereiten zunächst eine Darstellung von <label> in Farbe darkmagenta vor.

Beispielsweise unterstreichen wir <label> mit einem herausstehenden Rahmen mit 1 Pixel Dicke in Farbe darkmagenta.

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

Nun fordern wir, dass bei Hover die Unterstreichungsfarbe auf lightsteelblue geändert wird.

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

Die Idee ist hierbei, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu verwenden. Öfter sieht man dies bei Verweisen. Der Text wird in einer Farbe dargestellt. Die Unterstreichung in einer anderen. Es ist jedoch keine "wirkliche" Unterstreichung, der Text selbst ist gar nicht unterstrichen. Sie wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Weiteres zum Thema label können Sie in Formulare in HTML finden. Weiteres zum HTML-Befehl label ist in der HTML Referenz unter <label> gezeigt.