Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #deb887 und Farbwert #fff8dc

Netscape führte seinerzeit die websicheren Farben ein. Neben diesen, einem bestimmten Schema folgenden, Farbwerten, definierte man noch 120 Werte und ordnete ihnen Namen zu. Zusammen mit den 17 Standard-HTML-Farben, die ebenfalls Namen haben, ergeben sich so 137 HTML Farbnamen.

Hintergrundfarbwert #deb887			Schriftfarbwert #fff8dc
Detail	:	Hintergrund #deb887	Detail	:	Schrift #fff8dc
Farbwert	:	#deb887	Farbwert	:	#fff8dc
Farbe	:	burlywood	Farbe	:	cornsilk
HTML	:	#deb887	HTML	:	#fff8dc
HTML (Wert)	:	#deb887	HTML (Wert)	:	#fff8dc
CSS	:	#deb887	CSS	:	#fff8dc
CSS (Wert)	:	#deb887	CSS (Wert)	:	#fff8dc
CSS (kürzest)	:	#deb887	CSS (kürzest)	:	#fff8dc
CSS (RGB)	:	rgb(222,184,135)	CSS (RGB)	:	rgb(255,248,220)
CSS (%RGB)	:	rgb(87%,72%,52%)	CSS (%RGB)	:	rgb(100%,97%,86%)

Verlauf Hintergrundfarbwert #deb887 nach Schriftfarbwert #fff8dc
#deb887	#e2c193	#e7ca9f	#ecd3ab	#f0dcb7	#f5e5c3	#faeecf	#fff8dc
#deb887	#e2c193	#e7ca9f	#ecd3ab	#f0dcb7	#f5e5c3	#faeecf	#fff8dc

Kombination von #deb887 und #fff8dc
Cras id velit ante. 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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				Die Ähnlichkeit der Farben #fff8dc und #deb887 ergibt sich zu 91.70%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 8.30%. #fff8dc ist nicht als Schriftfarbe auf Hintergrund #deb887 geeignet, weil weder der Helligkeitsunterschied noch der Farbunterschied gross genug sind.

Hintergrundfarbwert #deb887				Schriftfarbwert #fff8dc
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#deb887	#deb887	#deb887	#deb887	#fff8dc	#fff8dc	#fff8dc	#fff8dc
#e2c298	#e2c298	#be9d73	#be9d73	#fff9e1	#fff9e1	#dad4bc	#dad4bc
#e7cca9	#e7cca9	#9e8360	#9e8360	#fffae6	#fffae6	#b6b19d	#b6b19d
#ecd6ba	#ecd6ba	#7e694d	#7e694d	#fffbeb	#fffbeb	#918d7d	#918d7d
#f0e0cb	#f0e0cb	#5f4e39	#5f4e39	#fffcf0	#fffcf0	#6d6a5e	#6d6a5e
#f5eadc	#f5eadc	#3f3426	#3f3426	#fffdf5	#fffdf5	#48463e	#48463e
#faf4ed	#faf4ed	#1f1a13	#1f1a13	#fffefa	#fffefa	#24231f	#24231f
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #deb887 und Farbwert #fff8dc

Wechsel der Umrandung bei Hover mit HTML-Tag acronym

Die Rahmenfarbe soll sich von Farbwert #deb887 auf Farbwert #fff8dc ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Darstellung von <acronym> in Farbwert #deb887 vor.

In diesem Beispiel umranden wir <acronym> mit einem 3 Pixel dicken, doppelten Rahmen in Farbwert #deb887.

<style type="text/css"><!--
  acronym { 
    border-style:double; 
    border-width:3px; 
    border-color:#deb887;
  }
//-->
</style>

Nun fordern wir, dass sich bei Hover die Rahmenfarbe zu #fff8dc ändert.

<style type="text/css"><!--
  acronym:hover { 
    border-color:#fff8dc;
  }
//-->
</style>

Einzelheiten vom HTML-Befehl acronym lesen Sie in der HTML Referenz unter <acronym>.

Wechsel der Hintergrundfarbe bei Hover von HTML-Tag h2

Eine Überschrift der 2. Stufe erzeugt man mit Tag <h2> und kann farblich gestaltet werden.

Die Hintergrundfarbe soll sich von Farbwert #deb887 auf Farbwert #fff8dc ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Darstellung von <h2> in Farbwert #deb887 vor.

Hier legen wir Farbwert #deb887 als Hintergrundfarbe von <h2> fest. Zwar ändern wir die Textfarbe nicht, ändern jedoch die Schriftart auf arial und setzen die Schriftgröße auf 14px.

<style type="text/css"><!--
  h2 { 
    font-size:14px; 
    background-color:#deb887; 
    font-family:arial;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Hover die Hintergrundfarbe auf #fff8dc ändert.

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

Weiteres zum Thema können Sie in Grundlegende Gestaltungselemente in HTML nachlesen. Mehr zum HTML-Tag h2 erfahren Sie in der HTML Referenz unter <h2>.