Ressourcen: 120 HTML Farbnamen - Kombination von Farbe plum und Farbwert #ff7f50

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			Schriftfarbwert #ff7f50
Detail	:	Hintergrund plum	Detail	:	Schrift #ff7f50
Farbe	:	plum	Farbwert	:	#ff7f50
Farbwert	:	#dda0dd	Farbe	:	coral
HTML	:	plum	HTML	:	#ff7f50
HTML (Wert)	:	#dda0dd	HTML (Wert)	:	#ff7f50
CSS	:	plum	CSS	:	#ff7f50
CSS (Wert)	:	#dda0dd	CSS (Wert)	:	#ff7f50
CSS (kürzest)	:	#dda0dd	CSS (kürzest)	:	#ff7f50
CSS (RGB)	:	rgb(221,160,221)	CSS (RGB)	:	rgb(255,127,80)
CSS (%RGB)	:	rgb(86%,62%,86%)	CSS (%RGB)	:	rgb(100%,49%,31%)

Verlauf Hintergrundfarbe plum nach Schriftfarbwert #ff7f50
#dda0dd	#e19bc8	#e696b4	#eb91a0	#f08d8c	#f58878	#fa8364	#ff7f50
#dda0dd	#e19bc8	#e696b4	#eb91a0	#f08d8c	#f58878	#fa8364	#ff7f50

Kombination von plum und #ff7f50
Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				#ff7f50 ist nicht als Schriftfarbe auf Hintergrund plum geeignet. Die Helligkeit und Farben sind zu ähnlich. Die Ähnlichkeit der Farben #ff7f50 und plum beträgt 94.25%. Die Lesbarkeit dieser Kombination ergibt sich zu 5.75%.

Hintergrundfarbe plum				Schriftfarbwert #ff7f50
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#dda0dd	#dda0dd	#dda0dd	#dda0dd	#ff7f50	#ff7f50	#ff7f50	#ff7f50
#e1ade1	#e1ade1	#bd89bd	#bd89bd	#ff9169	#ff9169	#da6c44	#da6c44
#e6bbe6	#e6bbe6	#9d729d	#9d729d	#ffa382	#ffa382	#b65a39	#b65a39
#ebc8eb	#ebc8eb	#7e5b7e	#7e5b7e	#ffb59b	#ffb59b	#91482d	#91482d
#f0d6f0	#f0d6f0	#5e445e	#5e445e	#ffc8b4	#ffc8b4	#6d3622	#6d3622
#f5e3f5	#f5e3f5	#3f2d3f	#3f2d3f	#ffdacd	#ffdacd	#482416	#482416
#faf1fa	#faf1fa	#1f161f	#1f161f	#ffece6	#ffece6	#24120b	#24120b
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe plum und Farbwert #ff7f50

Wechsel der Unterstreichung bei Hover von HTML-Tag address

Die Farbe der Unterstreichung soll sich von Farbe plum auf Farbwert #ff7f50 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <address> in Farbe plum vor.

Beispielsweise unterstreichen wir <address> mit einem doppelten Rahmen mit 4 Pixel Dicke in Farbe plum.

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

Jetzt stellen wir ein, dass sich bei Berührung mit der Maus die Farbe der Unterstreichung auf #ff7f50 ändert.

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

Die Idee ist dabei, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben. Manchmal sehen Sie das bei Verweisen. Der Text ist in einer Farbe. Und die Unterstreichung in einer anderen. Hierbei handelt es sich aber nicht um eine "normale" Unterstreichung, der Text selbst ist gar nicht unterstrichen. Die Unterstreichung wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Mehr zum Thema address erfahren Sie in Blockorientierte Elemente in HTML. Mehr zum Tag address ist in der HTML Referenz bei <address> gezeigt.

Text- und Unterstreichungsfarben mit HTML-Tag legend

Hier ändern wir die Textfarbe von <legend> auf Farbwert #ff7f50 und lassen die Hintergrundfarbe unverändert. Die Schriftart setzen wir auf sans-serif. Die Schriftgröße setzen wir auf 13px. Wir unterstreichen den Inhalt von <legend> mit Hilfe eines gepunkteten Rahmens mit 4 Punkte Dicke in Farbe plum. In HTML ist dies nicht möglich. Deshalb verwenden wir dafür CSS.

<style type="text/css"><!--
  legend { 
    color: #ff7f50; 
    font-family: sans-serif; 
    border-bottom-style: dotted; 
    border-bottom-width: 4pt; 
    font-size: 13px; 
    border-bottom-color: plum;
  }
//-->
</style>

Die Idee ist, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben.

Weiteres zum Thema finden Sie in Formulare in HTML. Einzelheiten des Tag <legend>.