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

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 #556b2f
Detail	:	Hintergrund #a0522d	Detail	:	Schrift #556b2f
Farbwert	:	#a0522d	Farbwert	:	#556b2f
Farbe	:	sienna	Farbe	:	darkolivegreen
HTML	:	#a0522d	HTML	:	#556b2f
HTML (Wert)	:	#a0522d	HTML (Wert)	:	#556b2f
CSS	:	#a0522d	CSS	:	#556b2f
CSS (Wert)	:	#a0522d	CSS (Wert)	:	#556b2f
CSS (kürzest)	:	#a0522d	CSS (kürzest)	:	#556b2f
CSS (RGB)	:	rgb(160,82,45)	CSS (RGB)	:	rgb(85,107,47)
CSS (%RGB)	:	rgb(62%,32%,17%)	CSS (%RGB)	:	rgb(33%,41%,18%)

Verlauf Hintergrundfarbwert #a0522d nach Schriftfarbwert #556b2f
#a0522d	#95552d	#8a592d	#7f5c2d	#75602e	#6a632e	#5f672e	#556b2f
#a0522d	#95552d	#8a592d	#7f5c2d	#75602e	#6a632e	#5f672e	#556b2f

Kombination von #a0522d und #556b2f
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in. 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 id velit ante.				Auf Hintergrund #a0522d ist #556b2f ungeeignet. Die Unterschiede in der Helligkeit und Farbe sind unzureichend. Die Ähnlichkeit der Farben #556b2f und #a0522d beträgt 94.96%. Die Lesbarkeit dieser Farbkombination liegt damit bei 5.04%.

Hintergrundfarbwert #a0522d				Schriftfarbwert #556b2f
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#a0522d	#a0522d	#a0522d	#a0522d	#556b2f	#556b2f	#556b2f	#556b2f
#ad6a4b	#ad6a4b	#894626	#894626	#6d804c	#6d804c	#485b28	#485b28
#bb8369	#bb8369	#723a20	#723a20	#85956a	#85956a	#3c4c21	#3c4c21
#c89c87	#c89c87	#5b2e19	#5b2e19	#9daa88	#9daa88	#303d1a	#303d1a
#d6b4a5	#d6b4a5	#442313	#442313	#b6bfa5	#b6bfa5	#242d14	#242d14
#e3cdc3	#e3cdc3	#2d170c	#2d170c	#ced4c3	#ced4c3	#181e0d	#181e0d
#f1e6e1	#f1e6e1	#160b06	#160b06	#e6e9e1	#e6e9e1	#0c0f06	#0c0f06
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #a0522d und Farbwert #556b2f

Text- und Unterstreichungsfarben bei Tag acronym

Wir ändern für dieses Beispiel die Textfarbe von <acronym> auf Farbwert #556b2f. Die Schriftart setzen wir auf courier new und setzen die Schriftgröße auf 11pt. Wir unterstreichen den Inhalt von <acronym> mit Hilfe eines gestrichelten Rahmens mit 4 Punkte Dicke in Farbwert #a0522d. In HTML ist das kaum möglich. Wir nutzen daher CSS.

<style type="text/css"><!--
  acronym { 
    color: #556b2f; 
    border-bottom-width: 4pt; 
    font-size: 11pt; 
    border-bottom-style: dashed; 
    border-bottom-color: #a0522d; 
    font-family: courier new;
  }
//-->
</style>

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

Weiteres zum hier verwendeten Tag <acronym>.

Wechsel der Umrandung bei Hover mit HTML-Befehl strike

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

In diesem Beispiel umranden wir <strike> mit einem 2 Pixel dicken, gezahnten Rahmen in Farbwert #a0522d.

<style type="text/css"><!--
  strike { border:2px ridge #a0522d; }
//-->
</style>

Jetzt stellen wir ein, dass bei Berührung mit der Maus die Rahmenfarbe auf #556b2f gesetzt wird.

<style type="text/css"><!--
  strike: hover { 
    border-color: #556b2f;
  }
//-->
</style>

Mehr zum Thema lesen Sie in Text in HTML. Einzelheiten des hier genutzten HTML-Tag strike sind in der HTML Referenz bei <strike> zusammengestellt.