Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #fdf5e6 und Farbe chocolate

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 #fdf5e6			Schriftfarbe chocolate
Detail	:	Hintergrund #fdf5e6	Detail	:	Schrift chocolate
Farbwert	:	#fdf5e6	Farbe	:	chocolate
Farbe	:	oldlace	Farbwert	:	#d2691e
HTML	:	#fdf5e6	HTML	:	chocolate
HTML (Wert)	:	#fdf5e6	HTML (Wert)	:	#d2691e
CSS	:	#fdf5e6	CSS	:	chocolate
CSS (Wert)	:	#fdf5e6	CSS (Wert)	:	#d2691e
CSS (kürzest)	:	#fdf5e6	CSS (kürzest)	:	#d2691e
CSS (RGB)	:	rgb(253,245,230)	CSS (RGB)	:	rgb(210,105,30)
CSS (%RGB)	:	rgb(99%,96%,90%)	CSS (%RGB)	:	rgb(82%,41%,11%)

Verlauf Hintergrundfarbwert #fdf5e6 nach Schriftfarbe chocolate
#fdf5e6	#f6e1c9	#f0cdac	#eab990	#e4a573	#de9157	#d87d3a	#d2691e
#fdf5e6	#f6e1c9	#f0cdac	#eab990	#e4a573	#de9157	#d87d3a	#d2691e

Kombination von #fdf5e6 und chocolate
Cras id velit ante. 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.				Auf Hintergrund #fdf5e6 ist chocolate ungeeignet. Die Unterschiede in der Helligkeit und Farbe sind nicht ausreichend. Die Ähnlichkeit von chocolate und #fdf5e6 ergibt sich zu 84.03%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 15.97%.

Hintergrundfarbwert #fdf5e6				Schriftfarbe chocolate
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#fdf5e6	#fdf5e6	#fdf5e6	#fdf5e6	#d2691e	#d2691e	#d2691e	#d2691e
#fdf6e9	#fdf6e9	#d8d2c5	#d8d2c5	#d87e3e	#d87e3e	#b45a19	#b45a19
#fdf7ed	#fdf7ed	#b4afa4	#b4afa4	#de935e	#de935e	#964b15	#964b15
#fdf9f0	#fdf9f0	#908c83	#908c83	#e5a97e	#e5a97e	#783c11	#783c11
#fefaf4	#fefaf4	#6c6962	#6c6962	#ebbe9e	#ebbe9e	#5a2d0c	#5a2d0c
#fefcf7	#fefcf7	#484641	#484641	#f2d4be	#f2d4be	#3c1e08	#3c1e08
#fefdfb	#fefdfb	#242320	#242320	#f8e9de	#f8e9de	#1e0f04	#1e0f04
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #fdf5e6 und Farbe chocolate

Zebra-Effekt von Befehl tr

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, redet man von einem Zebra-Effekt. Dieser Effekt unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .even und .odd für <tr> mit unterschiedlichen Hintergrundfarben Farbwert #fdf5e6 und Farbe chocolate.

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

Diese CSS-Klassen werden abwechselnd angewendet.

<table>
<tr class="even"><td>La/a</td><td>Lb/a</td><td>Lc/a</td></tr>
<tr class="odd"><td>La/b</td><td>Lb/b</td><td>Lc/b</td></tr>
<tr class="even"><td>La/c</td><td>Lb/c</td><td>Lc/c</td></tr>
</table>

Mehr zum Thema lesen Sie in Tabellen in HTML. Mehr zum hier gezeigten Befehl tr ist in der HTML Referenz bei <tr> genau beschrieben.

Wechsel der Hintergrundfarbe bei Hover mit Tag button

Die Hintergrundfarbe soll sich von Farbwert #fdf5e6 auf Farbe chocolate ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Darstellung von <button> in Farbwert #fdf5e6 vor.

Wir legen z.B. die Hintergrundfarbe von <button> auf Farbwert #fdf5e6 fest. Zwar verändern wir die Textfarbe nicht, ändern jedoch die Schriftart auf sans-serif. Die Schriftgröße setzen wir auf 13px:

<style type="text/css"><!--
  button { 
    background-color:#fdf5e6; 
    font-family:sans-serif; 
    font-size:13px;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Hover die Hintergrundfarbe auf chocolate ändert.

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

Mehr zum Thema erfahren Sie in Formulare in HTML. Einzelheiten vom Tag button lesen Sie in der HTML Referenz unter <button>.