Ressourcen: 120 HTML Farbnamen - Kombination von Farbe sandybrown und Farbe indigo

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 sandybrown			Schriftfarbe indigo
Detail	:	Hintergrund sandybrown	Detail	:	Schrift indigo
Farbe	:	sandybrown	Farbe	:	indigo
Farbwert	:	#f4a460	Farbwert	:	#4b0082
HTML	:	sandybrown	HTML	:	indigo
HTML (Wert)	:	#f4a460	HTML (Wert)	:	#4b0082
CSS	:	sandybrown	CSS	:	indigo
CSS (Wert)	:	#f4a460	CSS (Wert)	:	#4b0082
CSS (kürzest)	:	#f4a460	CSS (kürzest)	:	#4b0082
CSS (RGB)	:	rgb(244,164,96)	CSS (RGB)	:	rgb(75,0,130)
CSS (%RGB)	:	rgb(95%,64%,37%)	CSS (%RGB)	:	rgb(29%,0%,50%)

Verlauf Hintergrundfarbe sandybrown nach Schriftfarbe indigo
#f4a460	#db8c64	#c37569	#ab5d6e	#934673	#7b2e78	#63177d	#4b0082
#f4a460	#db8c64	#c37569	#ab5d6e	#934673	#7b2e78	#63177d	#4b0082

Kombination von sandybrown und indigo
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.				indigo eignet sich nicht als Schriftfarbe auf Hintergrund sandybrown. Zwar ist der Helligkeitsunterschied ausreichend, die Farben selbst sind sich zu ähnlich. Die Ähnlichkeit von indigo und sandybrown beträgt 69.68%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 30.32%.

Hintergrundfarbe sandybrown				Schriftfarbe indigo
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#f4a460	#f4a460	#f4a460	#f4a460	#4b0082	#4b0082	#4b0082	#4b0082
#f5b176	#f5b176	#d18c52	#d18c52	#642493	#642493	#40006f	#40006f
#f7be8d	#f7be8d	#ae7544	#ae7544	#7e48a5	#7e48a5	#35005c	#35005c
#f8cba4	#f8cba4	#8b5d36	#8b5d36	#986db7	#986db7	#2a004a	#2a004a
#fad8ba	#fad8ba	#684629	#684629	#b191c9	#b191c9	#200037	#200037
#fbe5d1	#fbe5d1	#452e1b	#452e1b	#cbb6db	#cbb6db	#150025	#150025
#fdf2e8	#fdf2e8	#22170d	#22170d	#e5daed	#e5daed	#0a0012	#0a0012
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe sandybrown und Farbe indigo

Wechsel der Unterstreichung bei Hover mit Tag s

Die Farbe der Unterstreichung soll sich von Farbe sandybrown auf Farbe indigo ändern, wenn man mit der Maus auf <s> zeigt. Bereiten wir zunächst die Darstellung von <s> in Farbe sandybrown vor.

Hier unterstreichen wir <s> mit einem herausstehenden Rahmen mit 3 Pixel Dicke in Farbe sandybrown.

<style type="text/css"><!--
  s { 
    border-bottom-style:outset; 
    border-bottom-color:sandybrown; 
    border-bottom-width:3px;
  }
//-->
</style>

Nun fordern wir, dass bei Hover die Unterstreichungsfarbe auf indigo gesetzt wird.

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

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

Mehr zu s können Sie in Text in HTML nachlesen. Die Beschreibung des Tag s lesen Sie in der HTML Referenz unter <s>.

Füllen und Umranden von Tag img

Für dieses Beispiel umranden wir <img> mit einem . Die Hintergrundfarbe für <img> setzen wir entsprechend auf Farbe sandybrown. Mit HTML geht dies nicht. Wir verwenden daher CSS.

<style type="text/css"><!--
  img { 
    background-color: sandybrown; 
    border-color: indigo; 
    border-style: outset; 
    border-width: 4pt;
  }
//-->
</style>

Mehr zum Thema img lesen Sie in Grafik in HTML. Einzelheiten vom HTML-Tag img finden Sie in der HTML Referenz unter <img>.