Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #7fff00 und Farbwert #a9a9a9

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 #7fff00			Schriftfarbwert #a9a9a9
Detail	:	Hintergrund #7fff00	Detail	:	Schrift #a9a9a9
Farbwert	:	#7fff00	Farbwert	:	#a9a9a9
Farbe	:	chartreuse	Farbe	:	darkgray
HTML	:	#7fff00	HTML	:	#a9a9a9
HTML (Wert)	:	#7fff00	HTML (Wert)	:	#a9a9a9
CSS	:	#7fff00	CSS	:	#a9a9a9
CSS (Wert)	:	#7fff00	CSS (Wert)	:	#a9a9a9
CSS (kürzest)	:	#7fff00	CSS (kürzest)	:	#a9a9a9
CSS (RGB)	:	rgb(127,255,0)	CSS (RGB)	:	rgb(169,169,169)
CSS (%RGB)	:	rgb(49%,100%,0%)	CSS (%RGB)	:	rgb(66%,66%,66%)

Verlauf Hintergrundfarbwert #7fff00 nach Schriftfarbwert #a9a9a9
#7fff00	#85f218	#8be630	#91da48	#97cd60	#9dc178	#a3b590	#a9a9a9
#7fff00	#85f218	#8be630	#91da48	#97cd60	#9dc178	#a3b590	#a9a9a9

Kombination von #7fff00 und #a9a9a9
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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante.				#a9a9a9 ist nicht als Schriftfarbe auf Hintergrund #7fff00 geeignet. Die Helligkeit und Farben sind sich zu ähnlich. Die Ähnlichkeit der Farben #a9a9a9 und #7fff00 ergibt sich zu 91.36%. Die Lesbarkeit dieser Kombination liegt damit bei 8.64%.

Hintergrundfarbwert #7fff00				Schriftfarbwert #a9a9a9
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#7fff00	#7fff00	#7fff00	#7fff00	#a9a9a9	#a9a9a9	#a9a9a9	#a9a9a9
#91ff24	#91ff24	#6cda00	#6cda00	#b5b5b5	#b5b5b5	#909090	#909090
#a3ff48	#a3ff48	#5ab600	#5ab600	#c1c1c1	#c1c1c1	#787878	#787878
#b5ff6d	#b5ff6d	#489100	#489100	#cdcdcd	#cdcdcd	#606060	#606060
#c8ff91	#c8ff91	#366d00	#366d00	#dadada	#dadada	#484848	#484848
#daffb6	#daffb6	#244800	#244800	#e6e6e6	#e6e6e6	#303030	#303030
#ecffda	#ecffda	#122400	#122400	#f2f2f2	#f2f2f2	#181818	#181818
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #7fff00 und Farbwert #a9a9a9

Wechsel der Umrandung bei Hover von HTML-Befehl h3

Mit HTML-Befehl <h3> erzeugen Sie eine Überschrift der 3. Stufe. Diese kann farblich gestaltet und hervorgehoben werden.

Die Rahmenfarbe soll sich von Farbwert #7fff00 auf Farbwert #a9a9a9 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Formatierung von <h3> in Farbwert #7fff00 vor.

In diesem Beispiel umranden wir <h3> mit einem 1 Pixel dicken, gestrichelten Rahmen in Farbwert #7fff00.

<style type="text/css"><!--
  h3 { 
    border-width: 1px; 
    border-color: #7fff00; 
    border-style: dashed;
  }
//-->
</style>

Nun fordern wir, dass bei Mausberührung die Rahmenfarbe auf #a9a9a9 gesetzt wird.

<style type="text/css"><!--
  h3: hover { 
    border-color: #a9a9a9;
  }
//-->
</style>

Mehr zum Thema lesen Sie in Grundlegende Gestaltungselemente in HTML. Möglichkeiten vom Befehl h3 sind in der HTML Referenz bei <h3> ausführlich zusammengestellt.

Wechsel der Hintergrundfarbe bei Hover mit Tag blockquote

Die Hintergrundfarbe soll sich von Farbwert #7fff00 auf Farbwert #a9a9a9 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Formatierung von <blockquote> in Farbwert #7fff00 vor.

Wir legen zum Beispiel Farbwert #7fff00 als Hintergrundfarbe von <blockquote> fest. Die Textfarbe verändern wir nicht. Die Schriftart setzen wir auf monospace.

<style type="text/css"><!--
  blockquote { 
    background-color: #7fff00; 
    font-family: monospace;
  }
//-->
</style>

Nun stellen wir ein, dass bei Mausberührung die Hintergrundfarbe auf #a9a9a9 geändert wird.

<style type="text/css"><!--
  blockquote: hover { 
    background-color: #a9a9a9;
  }
//-->
</style>

Weiteres zu blockquote können Sie in Blockorientierte Elemente in HTML finden. Weiteres zum HTML-Tag blockquote ist in der HTML Referenz unter <blockquote> ausführlich beschrieben.