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

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 #d3d3d3
Detail	:	Hintergrund #f5deb3	Detail	:	Schrift #d3d3d3
Farbwert	:	#f5deb3	Farbwert	:	#d3d3d3
Farbe	:	wheat	Farbe	:	lightgrey
HTML	:	#f5deb3	HTML	:	#d3d3d3
HTML (Wert)	:	#f5deb3	HTML (Wert)	:	#d3d3d3
CSS	:	#f5deb3	CSS	:	#d3d3d3
CSS (Wert)	:	#f5deb3	CSS (Wert)	:	#d3d3d3
CSS (kürzest)	:	#f5deb3	CSS (kürzest)	:	#d3d3d3
CSS (RGB)	:	rgb(245,222,179)	CSS (RGB)	:	rgb(211,211,211)
CSS (%RGB)	:	rgb(96%,87%,70%)	CSS (%RGB)	:	rgb(82%,82%,82%)

Verlauf Hintergrundfarbwert #f5deb3 nach Schriftfarbwert #d3d3d3
#f5deb3	#f0dcb7	#ebdabc	#e6d9c0	#e1d7c5	#dcd6c9	#d7d4ce	#d3d3d3
#f5deb3	#f0dcb7	#ebdabc	#e6d9c0	#e1d7c5	#dcd6c9	#d7d4ce	#d3d3d3

Kombination von #f5deb3 und #d3d3d3
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.				Die Ähnlichkeit von #d3d3d3 und #f5deb3 ergibt sich zu 94.57%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 5.43%. #d3d3d3 eignet sich nicht als Schriftfarbe auf Hintergrund #f5deb3. Weder der Helligkeitsunterschied noch der Farbunterschied sind geeignet.

Hintergrundfarbwert #f5deb3				Schriftfarbwert #d3d3d3
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#f5deb3	#f5deb3	#f5deb3	#f5deb3	#d3d3d3	#d3d3d3	#d3d3d3	#d3d3d3
#f6e2bd	#f6e2bd	#d2be99	#d2be99	#d9d9d9	#d9d9d9	#b4b4b4	#b4b4b4
#f7e7c8	#f7e7c8	#af9e7f	#af9e7f	#dfdfdf	#dfdfdf	#969696	#969696
#f9ecd3	#f9ecd3	#8c7e66	#8c7e66	#e5e5e5	#e5e5e5	#787878	#787878
#faf0de	#faf0de	#695f4c	#695f4c	#ececec	#ececec	#5a5a5a	#5a5a5a
#fcf5e9	#fcf5e9	#463f33	#463f33	#f2f2f2	#f2f2f2	#3c3c3c	#3c3c3c
#fdfaf4	#fdfaf4	#231f19	#231f19	#f8f8f8	#f8f8f8	#1e1e1e	#1e1e1e
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #f5deb3 und Farbwert #d3d3d3

Wechsel der Textfarbe bei Hover von HTML-Befehl p

Die Textfarbe soll sich von Farbwert #f5deb3 auf Farbwert #d3d3d3 ändern, wenn man mit der Maus auf <p> zeigt. Bereiten wir zunächst eine Darstellung von <p> in Farbwert #f5deb3 vor.

In diesem Beispiel legen wir die Textfarbe von <p> auf Farbwert #f5deb3 fest.

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

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

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

Weiteres zum Thema finden Sie in Grundlegende Gestaltungselemente in HTML. Mehr zum HTML-Tag p lesen Sie in der HTML Referenz unter <p>.

Zebra-Effekt bei Befehl td

Man spricht vom Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Dieser Effekt unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ying und .yang für <td> mit unterschiedlichen Hintergrundfarben Farbwert #f5deb3 und Farbwert #d3d3d3.

<style type="text/css"><!--
  td.ying { 
    background-color:#f5deb3;
  }
  td.yang { 
    background-color: #d3d3d3;
  }
//-->
</style>

Diese werden dann abwechselnd angewendet.

<table>
<tr><td class="ying">RA~A</td><td class="yang">RB~A</td><td class="ying">RC~A</td></tr>
<tr><td class="ying">RA~B</td><td class="yang">RB~B</td><td class="ying">RC~B</td></tr>
<tr><td class="ying">RA~C</td><td class="yang">RB~C</td><td class="ying">RC~C</td></tr>
</table>

Mehr zum Thema td können Sie in Tabellen in HTML erfahren. Die Beschreibung vom Tag td lesen Sie in der HTML Referenz unter <td>.