Ressourcen: 120 HTML Farbnamen - Kombination von Farbe plum und Farbe orange

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 plum			Schriftfarbe orange
Detail	:	Hintergrund plum	Detail	:	Schrift orange
Farbe	:	plum	Farbe	:	orange
Farbwert	:	#dda0dd	Farbwert	:	#ffa500
HTML	:	plum	HTML	:	orange
HTML (Wert)	:	#dda0dd	HTML (Wert)	:	#ffa500
CSS	:	plum	CSS	:	orange
CSS (Wert)	:	#dda0dd	CSS (Wert)	:	#ffa500
CSS (kürzest)	:	#dda0dd	CSS (kürzest)	:	#ffa500
CSS (RGB)	:	rgb(221,160,221)	CSS (RGB)	:	rgb(255,165,0)
CSS (%RGB)	:	rgb(86%,62%,86%)	CSS (%RGB)	:	rgb(100%,64%,0%)

Verlauf Hintergrundfarbe plum nach Schriftfarbe orange
#dda0dd	#e1a0bd	#e6a19d	#eba27e	#f0a25e	#f5a33f	#faa41f	#ffa500
#dda0dd	#e1a0bd	#e6a19d	#eba27e	#f0a25e	#f5a33f	#faa41f	#ffa500

Kombination von plum und orange
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 orange und plum beträgt 95.01%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 4.99%. orange eignet sich nicht als Schriftfarbe auf Hintergrund plum, weil die Unterschiede in der Helligkeit und Farbe unzureichend sind.

Hintergrundfarbe plum				Schriftfarbe orange
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#dda0dd	#dda0dd	#dda0dd	#dda0dd	#ffa500	#ffa500	#ffa500	#ffa500
#e1ade1	#e1ade1	#bd89bd	#bd89bd	#ffb124	#ffb124	#da8d00	#da8d00
#e6bbe6	#e6bbe6	#9d729d	#9d729d	#ffbe48	#ffbe48	#b67500	#b67500
#ebc8eb	#ebc8eb	#7e5b7e	#7e5b7e	#ffcb6d	#ffcb6d	#915e00	#915e00
#f0d6f0	#f0d6f0	#5e445e	#5e445e	#ffd891	#ffd891	#6d4600	#6d4600
#f5e3f5	#f5e3f5	#3f2d3f	#3f2d3f	#ffe5b6	#ffe5b6	#482f00	#482f00
#faf1fa	#faf1fa	#1f161f	#1f161f	#fff2da	#fff2da	#241700	#241700
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe plum und Farbe orange

Füllen und Umranden mit Tag pre

Hier umranden wir <pre> mit einem einfallenden, 4 Pixel dicken Rahmen in Farbe orange . Die Hintergrundfarbe für <pre> setzen wir entsprechend auf Farbe plum. Mit HTML ist das kaum machbar. Deshalb formatieren wir mit CSS.

<style type="text/css"><!--
  pre { border:4px inset orange; background-color:plum; }
//-->
</style>

Mehr zum Thema pre können Sie in Blockorientierte Elemente in HTML finden. Der hier verwendete Tag pre ist in der HTML Referenz unter <pre> genau gezeigt.

Wechsel der Unterstreichung bei Hover von HTML-Befehl a

Mit Tag <a> wird ein Link gesetzt. Diesen können Sie farblich gestalten.

Die Farbe der Unterstreichung soll sich von Farbe plum auf Farbe orange ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Darstellung von <a> in Farbe plum vor.

In diesem Beispiel unterstreichen wir <a> mit einem gestrichelten Rahmen mit 4 Pixel Dicke in Farbe plum.

<style type="text/css"><!--
  a { 
    border-bottom-color:plum; 
    border-bottom-width:4px; 
    border-bottom-style:dashed;
  }
//-->
</style>

Nun fordern wir, dass bei Hover die Farbe der Unterstreichung auf orange geändert wird.

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

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

Weiteres zum Thema a können Sie in Verweise und Protokolle in HTML erfahren. Mehr zum hier gezeigten HTML-Tag <a>.