Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #00ff00 und Farbwert #f8f8ff

Netscape führte seinerzeit die websicheren Farben ein. Neben diesen, einem bestimmten Schema folgenden, Farbwerten, definierte man noch 120 Werte und ordnete ihnen Namen zu. Zusammen mit den 17 Standard-HTML-Farben, die ebenfalls Namen haben, ergeben sich so 137 HTML Farbnamen.

Hintergrundfarbwert #00ff00			Schriftfarbwert #f8f8ff
Detail	:	Hintergrund #00ff00	Detail	:	Schrift #f8f8ff
Farbwert	:	#00ff00	Farbwert	:	#f8f8ff
Farbe	:	lime	Farbe	:	ghostwhite
HTML	:	#00ff00	HTML	:	#f8f8ff
HTML (Wert)	:	#00ff00	HTML (Wert)	:	#f8f8ff
CSS	:	#00ff00	CSS	:	#f8f8ff
CSS (Wert)	:	#00ff00	CSS (Wert)	:	#f8f8ff
CSS (kürzest)	:	#0f0	CSS (kürzest)	:	#f8f8ff
CSS (RGB)	:	rgb(0,255,0)	CSS (RGB)	:	rgb(248,248,255)
CSS (%RGB)	:	rgb(0%,100%,0%)	CSS (%RGB)	:	rgb(97%,97%,100%)

Verlauf Hintergrundfarbwert #00ff00 nach Schriftfarbwert #f8f8ff
#00ff00	#23fe24	#46fd48	#6afc6d	#8dfb91	#b1fab6	#d4f9da	#f8f8ff
#00ff00	#23fe24	#46fd48	#6afc6d	#8dfb91	#b1fab6	#d4f9da	#f8f8ff

Kombination von #00ff00 und #f8f8ff
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Die Ähnlichkeit der Farben #f8f8ff und #00ff00 ergibt sich zu 93.82%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 6.18%. Auf Hintergrund #00ff00 ist #f8f8ff ungeeignet. Zwar ist der Farbunterschied gut, die Helligkeiten sind jedoch zu ähnlich.

Hintergrundfarbwert #00ff00				Schriftfarbwert #f8f8ff
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#00ff00	#00ff00	#00ff00	#00ff00	#f8f8ff	#f8f8ff	#f8f8ff	#f8f8ff
#24ff24	#24ff24	#00da00	#00da00	#f9f9ff	#f9f9ff	#d4d4da	#d4d4da
#48ff48	#48ff48	#00b600	#00b600	#fafaff	#fafaff	#b1b1b6	#b1b1b6
#6dff6d	#6dff6d	#009100	#009100	#fbfbff	#fbfbff	#8d8d91	#8d8d91
#91ff91	#91ff91	#006d00	#006d00	#fcfcff	#fcfcff	#6a6a6d	#6a6a6d
#b6ffb6	#b6ffb6	#004800	#004800	#fdfdff	#fdfdff	#464648	#464648
#daffda	#daffda	#002400	#002400	#fefeff	#fefeff	#232324	#232324
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #00ff00 und Farbwert #f8f8ff

Zebra-Effekt bei Tag td

Man spricht vom so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Der Effekt unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .yang und .ying für <td> mit den Hintergrundfarben Farbwert #00ff00 und Farbwert #f8f8ff.

<style type="text/css"><!--
  td.yang { 
    background-color: #00ff00;
  }
  td.ying { 
    background-color:#f8f8ff;
  }
//-->
</style>

Diese werden dann abwechselnd genutzt.

<table>
<tr><td class="yang">FA/A</td><td class="ying">FB/A</td><td class="yang">FC/A</td></tr>
<tr><td class="yang">FA/B</td><td class="ying">FB/B</td><td class="yang">FC/B</td></tr>
<tr><td class="yang">FA/C</td><td class="ying">FB/C</td><td class="yang">FC/C</td></tr>
</table>

Weiteres zum Thema td erfahren Sie in Tabellen in HTML. Weiteres zum Tag td lesen Sie in der HTML Referenz unter <td>.

Wechsel der Textfarbe bei Hover von HTML-Tag h4

Mit HTML-Tag <h4> wird eine Überschrift der 4. Stufe erzeugt. Diese kann hervorgehoben und farblich gestaltet werden.

Die Textfarbe soll sich von Farbwert #00ff00 auf Farbwert #f8f8ff ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Darstellung von <h4> in Farbwert #00ff00 vor.

Für dieses Beispiel legen wir Farbwert #00ff00 als Textfarbe von <h4> fest. Die Größe der Schrift setzen wir auf 122%.

<style type="text/css"><!--
  h4 { 
    color: #00ff00; 
    font-size: 122%;
  }
//-->
</style>

Nun stellen wir ein, dass bei Mausberührung die Textfarbe auf #f8f8ff gesetzt wird.

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

Weiteres zu h4 können Sie in Grundlegende Gestaltungselemente in HTML finden. Einzelheiten vom Tag <h4>.