Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #fffaf0 und Farbwert #bc8f8f

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 #fffaf0			Schriftfarbwert #bc8f8f
Detail	:	Hintergrund #fffaf0	Detail	:	Schrift #bc8f8f
Farbwert	:	#fffaf0	Farbwert	:	#bc8f8f
Farbe	:	floralwhite	Farbe	:	rosybrown
HTML	:	#fffaf0	HTML	:	#bc8f8f
HTML (Wert)	:	#fffaf0	HTML (Wert)	:	#bc8f8f
CSS	:	#fffaf0	CSS	:	#bc8f8f
CSS (Wert)	:	#fffaf0	CSS (Wert)	:	#bc8f8f
CSS (kürzest)	:	#fffaf0	CSS (kürzest)	:	#bc8f8f
CSS (RGB)	:	rgb(255,250,240)	CSS (RGB)	:	rgb(188,143,143)
CSS (%RGB)	:	rgb(100%,98%,94%)	CSS (%RGB)	:	rgb(73%,56%,56%)

Verlauf Hintergrundfarbwert #fffaf0 nach Schriftfarbwert #bc8f8f
#fffaf0	#f5eae2	#ebdbd4	#e2ccc6	#d8bcb8	#cfadaa	#c59e9c	#bc8f8f
#fffaf0	#f5eae2	#ebdbd4	#e2ccc6	#d8bcb8	#cfadaa	#c59e9c	#bc8f8f

Kombination von #fffaf0 und #bc8f8f
Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit der Farben #bc8f8f und #fffaf0 ergibt sich zu 87.12%. Die Lesbarkeit dieser Kombination bewerte ich mit 12.88%. Auf Hintergrund #fffaf0 ist #bc8f8f ungeeignet, weil die Unterschiede in der Helligkeit und Farbe zu gering sind.

Hintergrundfarbwert #fffaf0				Schriftfarbwert #bc8f8f
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#fffaf0	#fffaf0	#fffaf0	#fffaf0	#bc8f8f	#bc8f8f	#bc8f8f	#bc8f8f
#fffaf2	#fffaf2	#dad6cd	#dad6cd	#c59f9f	#c59f9f	#a17a7a	#a17a7a
#fffbf4	#fffbf4	#b6b2ab	#b6b2ab	#cfafaf	#cfafaf	#866666	#866666
#fffcf6	#fffcf6	#918e89	#918e89	#d8bfbf	#d8bfbf	#6b5151	#6b5151
#fffcf8	#fffcf8	#6d6b66	#6d6b66	#e2cfcf	#e2cfcf	#503d3d	#503d3d
#fffdfa	#fffdfa	#484744	#484744	#ebdfdf	#ebdfdf	#352828	#352828
#fffefc	#fffefc	#242322	#242322	#f5efef	#f5efef	#1a1414	#1a1414
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #fffaf0 und Farbwert #bc8f8f

Zebra-Effekt von Befehl tr

Man redet vom so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Der Effekt unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ung und .ger für <tr> mit unterschiedlichen Hintergrundfarben Farbwert #fffaf0 und Farbwert #bc8f8f.

<style type="text/css"><!--
  tr.ung { 
    background-color:#fffaf0;
  }
  tr.ger { 
    background-color: #bc8f8f;
  }
//-->
</style>

Diese Klassen werden dann abwechselnd angewendet.

<table>
<tr class="ung"><td>Ca:a</td><td>Cb:a</td><td>Cc:a</td></tr>
<tr class="ger"><td>Ca:b</td><td>Cb:b</td><td>Cc:b</td></tr>
<tr class="ung"><td>Ca:c</td><td>Cb:c</td><td>Cc:c</td></tr>
</table>

Mehr zu tr lesen Sie in Tabellen in HTML. Weiteres zum hier verwendeten HTML-Tag <tr>.

Wechsel der Hintergrundfarbe bei Hover von Tag p

Die Hintergrundfarbe soll sich von Farbwert #fffaf0 auf Farbwert #bc8f8f ändern, wenn man mit der Maus auf <p> zeigt. Wir bereiten zunächst eine Darstellung von <p> in Farbwert #fffaf0 vor.

In diesem Beispiel legen wir Farbwert #fffaf0 als Hintergrundfarbe von <p> fest.

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

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

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

Weiteres zu p können Sie in Grundlegende Gestaltungselemente in HTML lesen. Mehr zum hier genutzten Tag p erfahren Sie in der HTML Referenz unter <p>.