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

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 #f5deb3			Schriftfarbwert #f8f8ff
Detail	:	Hintergrund #f5deb3	Detail	:	Schrift #f8f8ff
Farbwert	:	#f5deb3	Farbwert	:	#f8f8ff
Farbe	:	wheat	Farbe	:	ghostwhite
HTML	:	#f5deb3	HTML	:	#f8f8ff
HTML (Wert)	:	#f5deb3	HTML (Wert)	:	#f8f8ff
CSS	:	#f5deb3	CSS	:	#f8f8ff
CSS (Wert)	:	#f5deb3	CSS (Wert)	:	#f8f8ff
CSS (kürzest)	:	#f5deb3	CSS (kürzest)	:	#f8f8ff
CSS (RGB)	:	rgb(245,222,179)	CSS (RGB)	:	rgb(248,248,255)
CSS (%RGB)	:	rgb(96%,87%,70%)	CSS (%RGB)	:	rgb(97%,97%,100%)

Verlauf Hintergrundfarbwert #f5deb3 nach Schriftfarbwert #f8f8ff
#f5deb3	#f5e1bd	#f5e5c8	#f6e9d3	#f6ecde	#f7f0e9	#f7f4f4	#f8f8ff
#f5deb3	#f5e1bd	#f5e5c8	#f6e9d3	#f6ecde	#f7f0e9	#f7f4f4	#f8f8ff

Kombination von #f5deb3 und #f8f8ff
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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante.				#f8f8ff ist nicht als Schriftfarbe auf Hintergrund #f5deb3 geeignet, weil sich die Helligkeit und Farben zu ähnlich sind. Die Ähnlichkeit von #f8f8ff und #f5deb3 beträgt 94.08%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 5.92%.

Hintergrundfarbwert #f5deb3				Schriftfarbwert #f8f8ff
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#f5deb3	#f5deb3	#f5deb3	#f5deb3	#f8f8ff	#f8f8ff	#f8f8ff	#f8f8ff
#f6e2bd	#f6e2bd	#d2be99	#d2be99	#f9f9ff	#f9f9ff	#d4d4da	#d4d4da
#f7e7c8	#f7e7c8	#af9e7f	#af9e7f	#fafaff	#fafaff	#b1b1b6	#b1b1b6
#f9ecd3	#f9ecd3	#8c7e66	#8c7e66	#fbfbff	#fbfbff	#8d8d91	#8d8d91
#faf0de	#faf0de	#695f4c	#695f4c	#fcfcff	#fcfcff	#6a6a6d	#6a6a6d
#fcf5e9	#fcf5e9	#463f33	#463f33	#fdfdff	#fdfdff	#464648	#464648
#fdfaf4	#fdfaf4	#231f19	#231f19	#fefeff	#fefeff	#232324	#232324
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #f5deb3 und Farbwert #f8f8ff

Zebra-Effekt mit HTML-Befehl tr

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, spricht man vom so genannten Zebra-Effekt. Der Effekt unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .odd und .even für <tr> mit den Hintergrundfarben Farbwert #f5deb3 und Farbwert #f8f8ff.

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

Diese Klassen werden dann abwechselnd verwendet.

<table>
<tr class="odd"><td>AA/A</td><td>AB/A</td><td>AC/A</td></tr>
<tr class="even"><td>AA/B</td><td>AB/B</td><td>AC/B</td></tr>
<tr class="odd"><td>AA/C</td><td>AB/C</td><td>AC/C</td></tr>
</table>

Weiteres zu tr können Sie in Tabellen in HTML nachlesen. Der hier gezeigte HTML-Befehl tr ist in der HTML Referenz unter <tr> ausführlich zusammengestellt.

Wechsel der Textfarbe bei Hover mit Tag h3

Mit HTML-Tag <h3> setzen Sie eine Überschrift der 3. Stufe. Diese können Sie hervorheben und farblich gestalten.

Die Textfarbe soll sich von Farbwert #f5deb3 auf Farbwert #f8f8ff ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <h3> in Farbwert #f5deb3 vor.

Zum Beispiel ändern wir die Textfarbe von <h3> auf Farbwert #f5deb3. Zwar lassen wir die Hintergrundfarbe unverändert, setzen jedoch die Schriftart auf sans-serif:

<style type="text/css"><!--
  h3 { 
    font-family: sans-serif; 
    color: #f5deb3;
  }
//-->
</style>

Jetzt stellen wir ein, dass bei Berührung mit der Maus die Textfarbe auf #f8f8ff gesetzt wird.

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

Weiteres zum Thema finden Sie in Grundlegende Gestaltungselemente in HTML. Der hier verwendete Befehl h3 ist in der HTML Referenz unter <h3> genau zusammengestellt.