Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #f8f8ff und Farbwert #fff5ee

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 #f8f8ff			Schriftfarbwert #fff5ee
Detail	:	Hintergrund #f8f8ff	Detail	:	Schrift #fff5ee
Farbwert	:	#f8f8ff	Farbwert	:	#fff5ee
Farbe	:	ghostwhite	Farbe	:	seashell
HTML	:	#f8f8ff	HTML	:	#fff5ee
HTML (Wert)	:	#f8f8ff	HTML (Wert)	:	#fff5ee
CSS	:	#f8f8ff	CSS	:	#fff5ee
CSS (Wert)	:	#f8f8ff	CSS (Wert)	:	#fff5ee
CSS (kürzest)	:	#f8f8ff	CSS (kürzest)	:	#fff5ee
CSS (RGB)	:	rgb(248,248,255)	CSS (RGB)	:	rgb(255,245,238)
CSS (%RGB)	:	rgb(97%,97%,100%)	CSS (%RGB)	:	rgb(100%,96%,93%)

Verlauf Hintergrundfarbwert #f8f8ff nach Schriftfarbwert #fff5ee
#f8f8ff	#f9f7fc	#faf7fa	#fbf6f7	#fcf6f5	#fdf5f2	#fef5f0	#fff5ee
#f8f8ff	#f9f7fc	#faf7fa	#fbf6f7	#fcf6f5	#fdf5f2	#fef5f0	#fff5ee

Kombination von #f8f8ff und #fff5ee
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante.				Die Ähnlichkeit der Farben #fff5ee und #f8f8ff beträgt 95.16%. Die Lesbarkeit dieser Kombination bewerte ich mit 4.84%. #fff5ee eignet sich nicht als Schriftfarbe auf Hintergrund #f8f8ff. Weder der Helligkeitsunterschied noch der Farbunterschied sind gross genug.

Hintergrundfarbwert #f8f8ff				Schriftfarbwert #fff5ee
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#f8f8ff	#f8f8ff	#f8f8ff	#f8f8ff	#fff5ee	#fff5ee	#fff5ee	#fff5ee
#f9f9ff	#f9f9ff	#d4d4da	#d4d4da	#fff6f0	#fff6f0	#dad2cc	#dad2cc
#fafaff	#fafaff	#b1b1b6	#b1b1b6	#fff7f2	#fff7f2	#b6afaa	#b6afaa
#fbfbff	#fbfbff	#8d8d91	#8d8d91	#fff9f5	#fff9f5	#918c88	#918c88
#fcfcff	#fcfcff	#6a6a6d	#6a6a6d	#fffaf7	#fffaf7	#6d6966	#6d6966
#fdfdff	#fdfdff	#464648	#464648	#fffcfa	#fffcfa	#484644	#484644
#fefeff	#fefeff	#232324	#232324	#fffdfc	#fffdfc	#242322	#242322
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #f8f8ff und Farbwert #fff5ee

Wechsel der Hintergrundfarbe bei Hover bei Tag caption

Die Hintergrundfarbe soll sich von Farbwert #f8f8ff auf Farbwert #fff5ee ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Darstellung von <caption> in Farbwert #f8f8ff vor.

Wir ändern zum Beispiel die Hintergrundfarbe von <caption> auf Farbwert #f8f8ff. Zwar verändern wir die Textfarbe nicht, setzen jedoch die Schriftart auf monospace. Die Größe der Schrift ändern wir auf 13px.

<style type="text/css"><!--
  caption { 
    font-size: 13px; 
    background-color: #f8f8ff; 
    font-family: monospace;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Berührung mit der Maus die Hintergrundfarbe auf #fff5ee ändert.

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

Mehr zu caption können Sie in Tabellen in HTML erfahren. Möglichkeiten des Tag caption sind in der HTML Referenz bei <caption> ausführlich beschrieben.

Zebra-Effekt mit Tag tr

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, redet man vom so genannten Zebra-Effekt. Er unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .odd und .even für <tr> mit unterschiedlichen Hintergrundfarben Farbwert #f8f8ff und Farbwert #fff5ee.

<style type="text/css"><!--
  tr.odd { 
    background-color:#f8f8ff;
  }
  tr.even { 
    background-color:#fff5ee;
  }
//-->
</style>

Diese werden abwechselnd angewendet.

<table>
<tr class="odd"><td>GA-A</td><td>GB-A</td><td>GC-A</td></tr>
<tr class="even"><td>GA-B</td><td>GB-B</td><td>GC-B</td></tr>
<tr class="odd"><td>GA-C</td><td>GB-C</td><td>GC-C</td></tr>
</table>

Weiteres zum Thema finden Sie in Tabellen in HTML. Die Beschreibung vom Befehl tr erfahren Sie in der HTML Referenz unter <tr>.