Ressourcen: 120 HTML Farbnamen - Kombination von Farbe honeydew und Farbe gainsboro

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 honeydew			Schriftfarbe gainsboro
Detail	:	Hintergrund honeydew	Detail	:	Schrift gainsboro
Farbe	:	honeydew	Farbe	:	gainsboro
Farbwert	:	#f0fff0	Farbwert	:	#dcdcdc
HTML	:	honeydew	HTML	:	gainsboro
HTML (Wert)	:	#f0fff0	HTML (Wert)	:	#dcdcdc
CSS	:	honeydew	CSS	:	gainsboro
CSS (Wert)	:	#f0fff0	CSS (Wert)	:	#dcdcdc
CSS (kürzest)	:	#f0fff0	CSS (kürzest)	:	#dcdcdc
CSS (RGB)	:	rgb(240,255,240)	CSS (RGB)	:	rgb(220,220,220)
CSS (%RGB)	:	rgb(94%,100%,94%)	CSS (%RGB)	:	rgb(86%,86%,86%)

Verlauf Hintergrundfarbe honeydew nach Schriftfarbe gainsboro
#f0fff0	#edfaed	#eaf5ea	#e7f0e7	#e4ebe4	#e1e6e1	#dee1de	#dcdcdc
#f0fff0	#edfaed	#eaf5ea	#e7f0e7	#e4ebe4	#e1e6e1	#dee1de	#dcdcdc

Kombination von honeydew und gainsboro
Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				Auf Hintergrund honeydew ist gainsboro ungeeignet, weil weder der Helligkeitsunterschied noch der Farbunterschied gross genug sind. Die Ähnlichkeit der Farben gainsboro und honeydew beträgt 93.70%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 6.30%.

Hintergrundfarbe honeydew				Schriftfarbe gainsboro
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#f0fff0	#f0fff0	#f0fff0	#f0fff0	#dcdcdc	#dcdcdc	#dcdcdc	#dcdcdc
#f2fff2	#f2fff2	#cddacd	#cddacd	#e1e1e1	#e1e1e1	#bcbcbc	#bcbcbc
#f4fff4	#f4fff4	#abb6ab	#abb6ab	#e6e6e6	#e6e6e6	#9d9d9d	#9d9d9d
#f6fff6	#f6fff6	#899189	#899189	#ebebeb	#ebebeb	#7d7d7d	#7d7d7d
#f8fff8	#f8fff8	#666d66	#666d66	#f0f0f0	#f0f0f0	#5e5e5e	#5e5e5e
#fafffa	#fafffa	#444844	#444844	#f5f5f5	#f5f5f5	#3e3e3e	#3e3e3e
#fcfffc	#fcfffc	#222422	#222422	#fafafa	#fafafa	#1f1f1f	#1f1f1f
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe honeydew und Farbe gainsboro

Wechsel der Hintergrundfarbe bei Hover von HTML-Befehl p

Die Hintergrundfarbe soll sich von Farbe honeydew auf Farbe gainsboro ändern, wenn man mit der Maus auf <p> zeigt. Wir bereiten zunächst die Formatierung von <p> in Farbe honeydew vor.

Wir legen hier Farbe honeydew als Hintergrundfarbe von <p> fest. Die Textfarbe ändern wir nicht, ändern jedoch die Schriftart auf sans-serif. Die Schriftgröße verringern wir auf 85S%:

<style type="text/css"><!--
  p { 
    background-color: honeydew; 
    font-family: sans-serif; 
    font-size: 85S%;
  }
//-->
</style>

Nun stellen wir ein, dass bei Hover die Hintergrundfarbe auf gainsboro gesetzt wird.

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

Weiteres zum Thema p erfahren Sie in Grundlegende Gestaltungselemente in HTML. Möglichkeiten des hier verwendeten Befehl <p>.

Zebra-Effekt bei HTML-Befehl td

Man spricht vom so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Der Effekt unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ger und .ung für <td> mit den Hintergrundfarben Farbe honeydew und Farbe gainsboro.

<style type="text/css"><!--
  td.ger { 
    background-color: honeydew;
  }
  td.ung { 
    background-color: gainsboro;
  }
//-->
</style>

Diese Klassen werden dann abwechselnd verwendet.

<table>
<tr><td class="ger">Aa/a</td><td class="ung">Ab/a</td><td class="ger">Ac/a</td></tr>
<tr><td class="ger">Aa/b</td><td class="ung">Ab/b</td><td class="ger">Ac/b</td></tr>
<tr><td class="ger">Aa/c</td><td class="ung">Ab/c</td><td class="ger">Ac/c</td></tr>
</table>

Mehr zum Thema td können Sie in Tabellen in HTML nachsehen. Weiteres zum hier genutzten HTML-Befehl td ist in der HTML Referenz unter <td> genau beschrieben.