Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #a0522d und Farbwert #d2b48c

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 #a0522d			Schriftfarbwert #d2b48c
Detail	:	Hintergrund #a0522d	Detail	:	Schrift #d2b48c
Farbwert	:	#a0522d	Farbwert	:	#d2b48c
Farbe	:	sienna	Farbe	:	tan
HTML	:	#a0522d	HTML	:	#d2b48c
HTML (Wert)	:	#a0522d	HTML (Wert)	:	#d2b48c
CSS	:	#a0522d	CSS	:	#d2b48c
CSS (Wert)	:	#a0522d	CSS (Wert)	:	#d2b48c
CSS (kürzest)	:	#a0522d	CSS (kürzest)	:	#d2b48c
CSS (RGB)	:	rgb(160,82,45)	CSS (RGB)	:	rgb(210,180,140)
CSS (%RGB)	:	rgb(62%,32%,17%)	CSS (%RGB)	:	rgb(82%,70%,54%)

Verlauf Hintergrundfarbwert #a0522d nach Schriftfarbwert #d2b48c
#a0522d	#a7603a	#ae6e48	#b57c55	#bc8a63	#c39870	#caa67e	#d2b48c
#a0522d	#a7603a	#ae6e48	#b57c55	#bc8a63	#c39870	#caa67e	#d2b48c

Kombination von #a0522d und #d2b48c
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. 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. Cras id velit ante.				Die Ähnlichkeit von #d2b48c und #a0522d beträgt 86.44%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 13.56%. #d2b48c eignet sich nicht als Schriftfarbe auf Hintergrund #a0522d. Weder der Helligkeitsunterschied noch der Farbunterschied sind gross genug.

Hintergrundfarbwert #a0522d				Schriftfarbwert #d2b48c
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#a0522d	#a0522d	#a0522d	#a0522d	#d2b48c	#d2b48c	#d2b48c	#d2b48c
#ad6a4b	#ad6a4b	#894626	#894626	#d8be9c	#d8be9c	#b49a78	#b49a78
#bb8369	#bb8369	#723a20	#723a20	#dec9ac	#dec9ac	#968064	#968064
#c89c87	#c89c87	#5b2e19	#5b2e19	#e5d4bd	#e5d4bd	#786650	#786650
#d6b4a5	#d6b4a5	#442313	#442313	#ebdecd	#ebdecd	#5a4d3c	#5a4d3c
#e3cdc3	#e3cdc3	#2d170c	#2d170c	#f2e9de	#f2e9de	#3c3328	#3c3328
#f1e6e1	#f1e6e1	#160b06	#160b06	#f8f4ee	#f8f4ee	#1e1914	#1e1914
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #a0522d und Farbwert #d2b48c

Wechsel der Hintergrundfarbe bei Hover bei Tag li

Die Hintergrundfarbe soll sich von Farbwert #a0522d auf Farbwert #d2b48c ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Formatierung von <li> in Farbwert #a0522d vor.

Wir legen als Beispiel bei <li> die Hintergrundfarbe auf Farbwert #a0522d fest und setzen die Größe der Schrift auf 82%.

<style type="text/css"><!--
  li { 
    background-color:#a0522d; 
    font-size:82%;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Berührung mit der Maus die Hintergrundfarbe zu #d2b48c ändert.

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

Mehr zum Thema lesen Sie in Listen und Glossare in HTML. Der hier gezeigte HTML-Befehl li ist in der HTML Referenz unter <li> zusammengestellt.

Wechsel der Unterstreichung bei Hover von HTML-Befehl address

Die Unterstreichungsfarbe soll sich von Farbwert #a0522d auf Farbwert #d2b48c ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Darstellung von <address> in Farbwert #a0522d vor.

Beispielsweise unterstreichen wir <address> mit Hilfe eines gestrichelten Rahmens mit 4 Pixel Dicke in Farbwert #a0522d.

<style type="text/css"><!--
  address { border-bottom:4px dashed #a0522d; }
//-->
</style>

Nun stellen wir ein, dass sich bei Berührung mit der Maus die Farbe der Unterstreichung zu #d2b48c ändert.

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

Die Idee ist dabei, unabhängige Formatierungen für Inhalt und Unterstreichung zu verwenden. Öfter sehen Sie diesen Effekt bei Verweisen. Der Text ist in einer Farbe. Und die Unterstreichung in einer anderen. Hierbei handelt es sich jedoch nicht um eine "normale" Unterstreichung, der Text hat überhaupt keine Unterstreichung. Sie wird mit einem Rahmen simuliert und dieser Rahmen ist unabhängig vom Text.

Weiteres zum Thema finden Sie in Blockorientierte Elemente in HTML. Möglichkeiten vom HTML-Befehl address sind in der HTML Referenz bei <address> genau beschrieben.