Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #fffff0 und Farbwert #ffe4b5

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 #fffff0			Schriftfarbwert #ffe4b5
Detail	:	Hintergrund #fffff0	Detail	:	Schrift #ffe4b5
Farbwert	:	#fffff0	Farbwert	:	#ffe4b5
Farbe	:	ivory	Farbe	:	moccasin
HTML	:	#fffff0	HTML	:	#ffe4b5
HTML (Wert)	:	#fffff0	HTML (Wert)	:	#ffe4b5
CSS	:	#fffff0	CSS	:	#ffe4b5
CSS (Wert)	:	#fffff0	CSS (Wert)	:	#ffe4b5
CSS (kürzest)	:	#fffff0	CSS (kürzest)	:	#ffe4b5
CSS (RGB)	:	rgb(255,255,240)	CSS (RGB)	:	rgb(255,228,181)
CSS (%RGB)	:	rgb(100%,100%,94%)	CSS (%RGB)	:	rgb(100%,89%,70%)

Verlauf Hintergrundfarbwert #fffff0 nach Schriftfarbwert #ffe4b5
#fffff0	#fffbe7	#fff7df	#fff3d6	#ffefce	#ffebc5	#ffe7bd	#ffe4b5
#fffff0	#fffbe7	#fff7df	#fff3d6	#ffefce	#ffebc5	#ffe7bd	#ffe4b5

Kombination von #fffff0 und #ffe4b5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. 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.				Auf Hintergrund #fffff0 ist #ffe4b5 ungeeignet, da sich die Helligkeit und Farben zu ähnlich sind. Die Ähnlichkeit der Farben #ffe4b5 und #fffff0 ergibt sich zu 94.18%. Die Lesbarkeit dieser Kombination ergibt sich zu 5.82%.

Hintergrundfarbwert #fffff0				Schriftfarbwert #ffe4b5
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#fffff0	#fffff0	#fffff0	#fffff0	#ffe4b5	#ffe4b5	#ffe4b5	#ffe4b5
#fffff2	#fffff2	#dadacd	#dadacd	#ffe7bf	#ffe7bf	#dac39b	#dac39b
#fffff4	#fffff4	#b6b6ab	#b6b6ab	#ffebca	#ffebca	#b6a281	#b6a281
#fffff6	#fffff6	#919189	#919189	#ffefd4	#ffefd4	#918267	#918267
#fffff8	#fffff8	#6d6d66	#6d6d66	#fff3df	#fff3df	#6d614d	#6d614d
#fffffa	#fffffa	#484844	#484844	#fff7e9	#fff7e9	#484133	#484133
#fffffc	#fffffc	#242422	#242422	#fffbf4	#fffbf4	#242019	#242019
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #fffff0 und Farbwert #ffe4b5

Zebra-Effekt von Tag tr

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, spricht man von einem so genannten Zebra-Effekt. Dieser Effekt unterstützt das Auge zum Beispiel die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .gerade und .ungerade für <tr> mit den Hintergrundfarben Farbwert #fffff0 und Farbwert #ffe4b5.

<style type="text/css"><!--
  tr.gerade { 
    background-color: #fffff0;
  }
  tr.ungerade { 
    background-color:#ffe4b5;
  }
//-->
</style>

Diese werden dann abwechselnd angewendet.

<table>
<tr class="gerade"><td>G1,1</td><td>G2,1</td><td>G3,1</td></tr>
<tr class="ungerade"><td>G1,2</td><td>G2,2</td><td>G3,2</td></tr>
<tr class="gerade"><td>G1,3</td><td>G2,3</td><td>G3,3</td></tr>
</table>

Mehr zum Thema können Sie in Tabellen in HTML finden. Zur Beschreibung vom hier genutzten Befehl <tr>.

Wechsel der Hintergrundfarbe bei Hover von Befehl p

Die Hintergrundfarbe soll sich von Farbwert #fffff0 auf Farbwert #ffe4b5 ändern, wenn man mit der Maus auf <p> zeigt. Bereiten wir zunächst eine Formatierung von <p> in Farbwert #fffff0 vor.

Wir ändern für dieses Beispiel bei <p> die Hintergrundfarbe auf Farbwert #fffff0. Die Textfarbe lassen wir unverändert. Die Schriftart setzen wir auf sans-serif und verringern die Größe der Schrift auf 86%.

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

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

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

Weiteres zum Thema p können Sie in Grundlegende Gestaltungselemente in HTML finden. Der Befehl p ist in der HTML Referenz bei <p> genau beschrieben.