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

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 indigo			Schriftfarbe antiquewhite
Detail	:	Hintergrund indigo	Detail	:	Schrift antiquewhite
Farbe	:	indigo	Farbe	:	antiquewhite
Farbwert	:	#4b0082	Farbwert	:	#faebd7
HTML	:	indigo	HTML	:	antiquewhite
HTML (Wert)	:	#4b0082	HTML (Wert)	:	#faebd7
CSS	:	indigo	CSS	:	antiquewhite
CSS (Wert)	:	#4b0082	CSS (Wert)	:	#faebd7
CSS (kürzest)	:	#4b0082	CSS (kürzest)	:	#faebd7
CSS (RGB)	:	rgb(75,0,130)	CSS (RGB)	:	rgb(250,235,215)
CSS (%RGB)	:	rgb(29%,0%,50%)	CSS (%RGB)	:	rgb(98%,92%,84%)

Verlauf Hintergrundfarbe indigo nach Schriftfarbe antiquewhite
#4b0082	#64218e	#7d439a	#9664a6	#af86b2	#c8a7be	#e1c9ca	#faebd7
#4b0082	#64218e	#7d439a	#9664a6	#af86b2	#c8a7be	#e1c9ca	#faebd7

Kombination von indigo und antiquewhite
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. 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 vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante.				Die Ähnlichkeit der Farben antiquewhite und indigo beträgt 47.35%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 52.65%. antiquewhite ist nicht als Schriftfarbe auf Hintergrund indigo geeignet, da sich die Farben zu ähnlich sind.

Hintergrundfarbe indigo				Schriftfarbe antiquewhite
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#4b0082	#4b0082	#4b0082	#4b0082	#faebd7	#faebd7	#faebd7	#faebd7
#642493	#642493	#40006f	#40006f	#faeddc	#faeddc	#d6c9b8	#d6c9b8
#7e48a5	#7e48a5	#35005c	#35005c	#fbf0e2	#fbf0e2	#b2a799	#b2a799
#986db7	#986db7	#2a004a	#2a004a	#fcf3e8	#fcf3e8	#8e867a	#8e867a
#b191c9	#b191c9	#200037	#200037	#fcf6ed	#fcf6ed	#6b645c	#6b645c
#cbb6db	#cbb6db	#150025	#150025	#fdf9f3	#fdf9f3	#47433d	#47433d
#e5daed	#e5daed	#0a0012	#0a0012	#fefcf9	#fefcf9	#23211e	#23211e
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe indigo und Farbe antiquewhite

Wechsel der Unterstreichung bei Hover von Tag ins

Die Farbe der Unterstreichung soll sich von Farbe indigo auf Farbe antiquewhite ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Formatierung von <ins> in Farbe indigo vor.

Beispielsweise unterstreichen wir <ins> mit Hilfe eines gepunkteten Rahmens mit 1 Pixel Dicke in Farbe indigo.

<style type="text/css"><!--
  ins { 
    border-bottom-width: 1px; 
    border-bottom-style: dotted; 
    border-bottom-color: indigo;
  }
//-->
</style>

Jetzt fordern wir, dass bei Berührung mit der Maus die Unterstreichungsfarbe auf antiquewhite geändert wird.

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

Die Idee ist, voneinander unabhängige Formatierungen für Inhalt und Unterstreichung zu nutzen. Öfter sehen Sie dies bei Links. Der Text ist in einer Farbe. Die Unterstreichung in einer anderen. Hierbei handelt es sich aber nicht um eine normale Unterstreichung, der Text hat überhaupt keine Unterstreichung. Die Unterstreichung wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Möglichkeiten vom Tag <ins>.

Wechsel der Umrandung bei Hover bei Tag textarea

Die Rahmenfarbe soll sich von Farbe indigo auf Farbe antiquewhite ändern, wenn man mit der Maus auf <textarea> zeigt. Wir bereiten zunächst die Formatierung von <textarea> in Farbe indigo vor.

In diesem Beispiel umranden wir <textarea> mit einem 4 Pixel dicken, gefurchten Rahmen in Farbe indigo.

<style type="text/css"><!--
  textarea { 
    border-color: indigo; 
    border-style: groove; 
    border-width: 4px;
  }
//-->
</style>

Nun fordern wir, dass sich bei Mausberührung die Rahmenfarbe auf antiquewhite ändert.

<style type="text/css"><!--
  textarea:hover { 
    border-color:antiquewhite;
  }
//-->
</style>

Mehr zum Thema textarea finden Sie in Formulare in HTML. Mehr zum Tag <textarea>.