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

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.

Hintergrundfarbwert #dda0dd			Schriftfarbwert #fffff0
Detail	:	Hintergrund #dda0dd	Detail	:	Schrift #fffff0
Farbwert	:	#dda0dd	Farbwert	:	#fffff0
Farbe	:	plum	Farbe	:	ivory
HTML	:	#dda0dd	HTML	:	#fffff0
HTML (Wert)	:	#dda0dd	HTML (Wert)	:	#fffff0
CSS	:	#dda0dd	CSS	:	#fffff0
CSS (Wert)	:	#dda0dd	CSS (Wert)	:	#fffff0
CSS (kürzest)	:	#dda0dd	CSS (kürzest)	:	#fffff0
CSS (RGB)	:	rgb(221,160,221)	CSS (RGB)	:	rgb(255,255,240)
CSS (%RGB)	:	rgb(86%,62%,86%)	CSS (%RGB)	:	rgb(100%,100%,94%)

Verlauf Hintergrundfarbwert #dda0dd nach Schriftfarbwert #fffff0
#dda0dd	#e1addf	#e6bbe2	#ebc8e5	#f0d6e7	#f5e3ea	#faf1ed	#fffff0
#dda0dd	#e1addf	#e6bbe2	#ebc8e5	#f0d6e7	#f5e3ea	#faf1ed	#fffff0

Kombination von #dda0dd und #fffff0
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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 #fffff0 und #dda0dd ergibt sich zu 90.23%. Die Lesbarkeit dieser Kombination bewerte ich mit 9.77%. Auf Hintergrund #dda0dd ist #fffff0 ungeeignet. Sowohl Helligkeit als auch die Farben sind sich zu ähnlich.

Hintergrundfarbwert #dda0dd				Schriftfarbwert #fffff0
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#dda0dd	#dda0dd	#dda0dd	#dda0dd	#fffff0	#fffff0	#fffff0	#fffff0
#e1ade1	#e1ade1	#bd89bd	#bd89bd	#fffff2	#fffff2	#dadacd	#dadacd
#e6bbe6	#e6bbe6	#9d729d	#9d729d	#fffff4	#fffff4	#b6b6ab	#b6b6ab
#ebc8eb	#ebc8eb	#7e5b7e	#7e5b7e	#fffff6	#fffff6	#919189	#919189
#f0d6f0	#f0d6f0	#5e445e	#5e445e	#fffff8	#fffff8	#6d6d66	#6d6d66
#f5e3f5	#f5e3f5	#3f2d3f	#3f2d3f	#fffffa	#fffffa	#484844	#484844
#faf1fa	#faf1fa	#1f161f	#1f161f	#fffffc	#fffffc	#242422	#242422
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #dda0dd und Farbwert #fffff0

Wechsel der Unterstreichung bei Hover mit Befehl em

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

In diesem Beispiel unterstreichen wir <em> mit Hilfe eines gefurchten Rahmens mit 4 Pixel Dicke in Farbwert #dda0dd.

<style type="text/css"><!--
  em { border-bottom:4px groove #dda0dd; }
//-->
</style>

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

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

Die Idee ist hierbei, voneinander unabhängige Formatierungen für Inhalt und Unterstreichung zu nutzen. Manchmal sehen Sie diesen Effekt bei Verweisen. Der Text wird in einer Farbe dargestellt. Die Unterstreichung in einer anderen. Dies ist aber keine "normale" Unterstreichung, der Text ist nicht unterstrichen. Die Unterstreichung wird mit einem Rahmen simuliert und dieser Rahmen ist unabhängig vom Text.

Weiteres zum Thema können Sie in Text in HTML finden. Die Beschreibung des Befehl em finden Sie in der HTML Referenz unter <em>.

Wechsel der Hintergrundfarbe bei Hover mit HTML-Tag legend

Die Hintergrundfarbe soll sich von Farbwert #dda0dd auf Farbwert #fffff0 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Darstellung von <legend> in Farbwert #dda0dd vor.

Hier legen wir die Hintergrundfarbe von <legend> auf Farbwert #dda0dd fest. Zwar verändern wir die Textfarbe nicht, ändern jedoch die Schriftart auf courier new und verringern die Größe der Schrift auf 82%.

<style type="text/css"><!--
  legend { 
    font-size:82%; 
    background-color:#dda0dd; 
    font-family:courier new;
  }
//-->
</style>

Nun stellen wir ein, dass bei Berührung mit der Maus die Hintergrundfarbe auf #fffff0 geändert wird.

<style type="text/css"><!--
  legend:hover { 
    background-color:#fffff0;
  }
//-->
</style>

Mehr zum Thema legend lesen Sie in Formulare in HTML. Mehr zum HTML-Befehl <legend>.