Ressourcen: 120 HTML Farbnamen - Kombination von Farbe lightsteelblue und Farbwert #dda0dd

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 lightsteelblue			Schriftfarbwert #dda0dd
Detail	:	Hintergrund lightsteelblue	Detail	:	Schrift #dda0dd
Farbe	:	lightsteelblue	Farbwert	:	#dda0dd
Farbwert	:	#b0c4de	Farbe	:	plum
HTML	:	lightsteelblue	HTML	:	#dda0dd
HTML (Wert)	:	#b0c4de	HTML (Wert)	:	#dda0dd
CSS	:	lightsteelblue	CSS	:	#dda0dd
CSS (Wert)	:	#b0c4de	CSS (Wert)	:	#dda0dd
CSS (kürzest)	:	#b0c4de	CSS (kürzest)	:	#dda0dd
CSS (RGB)	:	rgb(176,196,222)	CSS (RGB)	:	rgb(221,160,221)
CSS (%RGB)	:	rgb(69%,76%,87%)	CSS (%RGB)	:	rgb(86%,62%,86%)

Verlauf Hintergrundfarbe lightsteelblue nach Schriftfarbwert #dda0dd
#b0c4de	#b6bedd	#bcb9dd	#c3b4dd	#c9afdd	#d0aadd	#d6a5dd	#dda0dd
#b0c4de	#b6bedd	#bcb9dd	#c3b4dd	#c9afdd	#d0aadd	#d6a5dd	#dda0dd

Kombination von lightsteelblue und #dda0dd
Cras vestibulum tristique erat, ac interdum justo cursus in. 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				Die Ähnlichkeit von #dda0dd und lightsteelblue ergibt sich zu 94.46%. Die Lesbarkeit dieser Kombination ergibt sich zu 5.54%. #dda0dd ist nicht als Schriftfarbe auf Hintergrund lightsteelblue geeignet, da sich die Helligkeit und Farben zu ähnlich sind.

Hintergrundfarbe lightsteelblue				Schriftfarbwert #dda0dd
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#b0c4de	#b0c4de	#b0c4de	#b0c4de	#dda0dd	#dda0dd	#dda0dd	#dda0dd
#bbcce2	#bbcce2	#96a8be	#96a8be	#e1ade1	#e1ade1	#bd89bd	#bd89bd
#c6d4e7	#c6d4e7	#7d8c9e	#7d8c9e	#e6bbe6	#e6bbe6	#9d729d	#9d729d
#d1ddec	#d1ddec	#64707e	#64707e	#ebc8eb	#ebc8eb	#7e5b7e	#7e5b7e
#dde5f0	#dde5f0	#4b545f	#4b545f	#f0d6f0	#f0d6f0	#5e445e	#5e445e
#e8eef5	#e8eef5	#32383f	#32383f	#f5e3f5	#f5e3f5	#3f2d3f	#3f2d3f
#f3f6fa	#f3f6fa	#191c1f	#191c1f	#faf1fa	#faf1fa	#1f161f	#1f161f
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe lightsteelblue und Farbwert #dda0dd

Wechsel der Unterstreichung bei Hover mit HTML-Befehl ins

Die Unterstreichungsfarbe soll sich von Farbe lightsteelblue auf Farbwert #dda0dd ändern, wenn man mit der Maus auf <ins> zeigt. Wir bereiten zunächst die Formatierung von <ins> in Farbe lightsteelblue vor.

Beispielsweise unterstreichen wir <ins> mit Hilfe eines gepunkteten Rahmens mit 5 Pixel Dicke in Farbe lightsteelblue.

<style type="text/css"><!--
  ins { 
    border-bottom-style: dotted; 
    border-bottom-color: lightsteelblue; 
    border-bottom-width: 5px;
  }
//-->
</style>

Nun fordern wir, dass bei Mausberührung die Unterstreichungsfarbe auf #dda0dd geändert wird.

<style type="text/css"><!--
  ins: hover { 
    border-bottom-color: #dda0dd;
  }
//-->
</style>

Die Idee ist dabei, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu verwenden. Öfter sehen Sie diesen Effekt bei Hyperlinks. Der Text wird in einer Farbe dargestellt. Und die Unterstreichung in einer anderen. Dies ist aber keine "wirkliche" Unterstreichung, der Text selbst ist nicht unterstrichen. Sie wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Möglichkeiten des hier verwendeten HTML-Befehl ins erfahren Sie in der HTML Referenz unter <ins>.

Wechsel der Textfarbe bei Hover von Befehl dfn

Die Textfarbe soll sich von Farbe lightsteelblue auf Farbwert #dda0dd ändern, wenn man mit der Maus auf <dfn> zeigt. Bereiten wir zunächst die Formatierung von <dfn> in Farbe lightsteelblue vor.

Wir ändern hier die Textfarbe von <dfn> auf Farbe lightsteelblue. Die Schriftgröße setzen wir auf 125%:

<style type="text/css"><!--
  dfn { 
    color:lightsteelblue; 
    font-size:125%;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Hover die Textfarbe zu #dda0dd ändert.

<style type="text/css"><!--
  dfn:hover { 
    color:#dda0dd;
  }
//-->
</style>

Weiteres zu dfn können Sie in Text in HTML finden. Die Beschreibung vom Tag dfn lesen Sie in der HTML Referenz unter <dfn>.