Ressourcen: 120 HTML Farbnamen - Kombination von Farbe chartreuse und Farbe chocolate

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 chartreuse			Schriftfarbe chocolate
Detail	:	Hintergrund chartreuse	Detail	:	Schrift chocolate
Farbe	:	chartreuse	Farbe	:	chocolate
Farbwert	:	#7fff00	Farbwert	:	#d2691e
HTML	:	chartreuse	HTML	:	chocolate
HTML (Wert)	:	#7fff00	HTML (Wert)	:	#d2691e
CSS	:	chartreuse	CSS	:	chocolate
CSS (Wert)	:	#7fff00	CSS (Wert)	:	#d2691e
CSS (kürzest)	:	#7fff00	CSS (kürzest)	:	#d2691e
CSS (RGB)	:	rgb(127,255,0)	CSS (RGB)	:	rgb(210,105,30)
CSS (%RGB)	:	rgb(49%,100%,0%)	CSS (%RGB)	:	rgb(82%,41%,11%)

Verlauf Hintergrundfarbe chartreuse nach Schriftfarbe chocolate
#7fff00	#8ae904	#96d408	#a2be0c	#aea911	#ba9315	#c67e19	#d2691e
#7fff00	#8ae904	#96d408	#a2be0c	#aea911	#ba9315	#c67e19	#d2691e

Kombination von chartreuse und chocolate
Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Die Ähnlichkeit von chocolate und chartreuse ergibt sich zu 86.65%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 13.35%. chocolate eignet sich nicht als Schriftfarbe auf Hintergrund chartreuse, da weder der Helligkeitsunterschied noch der Farbunterschied geeignet sind.

Hintergrundfarbe chartreuse				Schriftfarbe chocolate
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#7fff00	#7fff00	#7fff00	#7fff00	#d2691e	#d2691e	#d2691e	#d2691e
#91ff24	#91ff24	#6cda00	#6cda00	#d87e3e	#d87e3e	#b45a19	#b45a19
#a3ff48	#a3ff48	#5ab600	#5ab600	#de935e	#de935e	#964b15	#964b15
#b5ff6d	#b5ff6d	#489100	#489100	#e5a97e	#e5a97e	#783c11	#783c11
#c8ff91	#c8ff91	#366d00	#366d00	#ebbe9e	#ebbe9e	#5a2d0c	#5a2d0c
#daffb6	#daffb6	#244800	#244800	#f2d4be	#f2d4be	#3c1e08	#3c1e08
#ecffda	#ecffda	#122400	#122400	#f8e9de	#f8e9de	#1e0f04	#1e0f04
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe chartreuse und Farbe chocolate

Wechsel der Umrandung bei Hover bei Befehl colgroup

Die Rahmenfarbe soll sich von Farbe chartreuse auf Farbe chocolate ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Formatierung von <colgroup> in Farbe chartreuse vor.

In diesem Beispiel umranden wir <colgroup> mit einem 1 Pixel dicken, gezahnten Rahmen in Farbe chartreuse.

<style type="text/css"><!--
  colgroup { 
    border-color:chartreuse; 
    border-style:ridge; 
    border-width:1px;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Mausberührung die Rahmenfarbe auf chocolate ändert.

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

Mehr zum Thema lesen Sie in Tabellen in HTML. Beschreibung des hier verwendeten HTML-Befehl <colgroup>.

Wechsel der Textfarbe bei Hover bei Tag h1

Eine Überschrift wird mit Tag <h1> erzeugt. Diese können Sie farblich gestalten.

Die Textfarbe soll sich von Farbe chartreuse auf Farbe chocolate ändern, wenn man mit der Maus auf <h1> zeigt. Bereiten wir zunächst die Darstellung von <h1> in Farbe chartreuse vor.

Hier legen wir bei <h1> die Textfarbe auf Farbe chartreuse fest. Zwar behalten wir die Hintergrundfarbe bei, ändern jedoch die Schriftart auf arial. Die Schriftgröße verkleinern wir auf 88%:

<style type="text/css"><!--
  h1 { 
    font-family: arial; 
    color: chartreuse; 
    font-size: 88%;
  }
//-->
</style>

Nun stellen wir ein, dass bei Hover die Textfarbe auf chocolate gesetzt wird.

<style type="text/css"><!--
  h1:hover { 
    color:chocolate;
  }
//-->
</style>

Mehr zu h1 lesen Sie in Grundlegende Gestaltungselemente in HTML. Weiteres zum hier genutzten Tag h1 lesen Sie in der HTML Referenz unter <h1>.