Ressourcen: 120 HTML Farbnamen - Kombination von Farbe darkolivegreen 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 darkolivegreen			Schriftfarbe indigo
Detail	:	Hintergrund darkolivegreen	Detail	:	Schrift indigo
Farbe	:	darkolivegreen	Farbe	:	indigo
Farbwert	:	#556b2f	Farbwert	:	#4b0082
HTML	:	darkolivegreen	HTML	:	indigo
HTML (Wert)	:	#556b2f	HTML (Wert)	:	#4b0082
CSS	:	darkolivegreen	CSS	:	indigo
CSS (Wert)	:	#556b2f	CSS (Wert)	:	#4b0082
CSS (kürzest)	:	#556b2f	CSS (kürzest)	:	#4b0082
CSS (RGB)	:	rgb(85,107,47)	CSS (RGB)	:	rgb(75,0,130)
CSS (%RGB)	:	rgb(33%,41%,18%)	CSS (%RGB)	:	rgb(29%,0%,50%)

Verlauf Hintergrundfarbe darkolivegreen nach Schriftfarbe indigo
#556b2f	#535b3a	#524c46	#503d52	#4f2d5e	#4d1e6a	#4c0f76	#4b0082
#556b2f	#535b3a	#524c46	#503d52	#4f2d5e	#4d1e6a	#4c0f76	#4b0082

Kombination von darkolivegreen und indigo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. 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.				indigo eignet sich nicht als Schriftfarbe auf Hintergrund darkolivegreen. Sowohl Helligkeit als auch die Farben sind sich zu ähnlich. Die Ähnlichkeit von indigo und darkolivegreen beträgt 89.63%. Die Lesbarkeit dieser Kombination bewerte ich mit 10.37%.

Hintergrundfarbe darkolivegreen				Schriftfarbe indigo
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#556b2f	#556b2f	#556b2f	#556b2f	#4b0082	#4b0082	#4b0082	#4b0082
#6d804c	#6d804c	#485b28	#485b28	#642493	#642493	#40006f	#40006f
#85956a	#85956a	#3c4c21	#3c4c21	#7e48a5	#7e48a5	#35005c	#35005c
#9daa88	#9daa88	#303d1a	#303d1a	#986db7	#986db7	#2a004a	#2a004a
#b6bfa5	#b6bfa5	#242d14	#242d14	#b191c9	#b191c9	#200037	#200037
#ced4c3	#ced4c3	#181e0d	#181e0d	#cbb6db	#cbb6db	#150025	#150025
#e6e9e1	#e6e9e1	#0c0f06	#0c0f06	#e5daed	#e5daed	#0a0012	#0a0012
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe darkolivegreen und Farbe indigo

Wechsel der Hintergrundfarbe bei Hover mit Tag h4

Eine Überschrift der 4. Stufe wird mit Tag <h4> erzeugt. Sie kann hervorgehoben und farblich gestaltet werden.

Die Hintergrundfarbe soll sich von Farbe darkolivegreen auf Farbe indigo ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Darstellung von <h4> in Farbe darkolivegreen vor.

Als Beispiel legen wir Farbe darkolivegreen als Hintergrundfarbe von <h4> fest und vergrößern die Schriftgröße auf 112%.

<style type="text/css"><!--
  h4 { 
    font-size: 112%; 
    background-color: darkolivegreen;
  }
//-->
</style>

Jetzt stellen wir ein, dass bei Berührung mit der Maus die Hintergrundfarbe auf indigo geändert wird.

<style type="text/css"><!--
  h4: hover { 
    background-color: indigo;
  }
//-->
</style>

Weiteres zum Thema h4 lesen Sie in Grundlegende Gestaltungselemente in HTML. Weiteres zum Befehl h4 ist in der HTML Referenz bei <h4> genau zusammengestellt.

Wechsel der Umrandung bei Hover mit HTML-Tag textarea

Die Rahmenfarbe soll sich von Farbe darkolivegreen auf Farbe indigo ändern, wenn man mit der Maus auf <textarea> zeigt. Bereiten wir zunächst eine Darstellung von <textarea> in Farbe darkolivegreen vor.

In diesem Beispiel umranden wir <textarea> mit einem 1 Pixel dicken, gepunkteten Rahmen in Farbe darkolivegreen.

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

Nun fordern wir, dass bei Berührung mit der Maus die Rahmenfarbe auf indigo gesetzt wird.

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

Mehr zum Thema können Sie in Formulare in HTML finden. Weiteres zum Befehl textarea erfahren Sie in der HTML Referenz unter <textarea>.