Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #ffdab9 und Farbwert #556b2f

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 #ffdab9			Schriftfarbwert #556b2f
Detail	:	Hintergrund #ffdab9	Detail	:	Schrift #556b2f
Farbwert	:	#ffdab9	Farbwert	:	#556b2f
Farbe	:	peachpuff	Farbe	:	darkolivegreen
HTML	:	#ffdab9	HTML	:	#556b2f
HTML (Wert)	:	#ffdab9	HTML (Wert)	:	#556b2f
CSS	:	#ffdab9	CSS	:	#556b2f
CSS (Wert)	:	#ffdab9	CSS (Wert)	:	#556b2f
CSS (kürzest)	:	#ffdab9	CSS (kürzest)	:	#556b2f
CSS (RGB)	:	rgb(255,218,185)	CSS (RGB)	:	rgb(85,107,47)
CSS (%RGB)	:	rgb(100%,85%,72%)	CSS (%RGB)	:	rgb(33%,41%,18%)

Verlauf Hintergrundfarbwert #ffdab9 nach Schriftfarbwert #556b2f
#ffdab9	#e6caa5	#ceba91	#b6aa7d	#9d9a6a	#858a56	#6d7a42	#556b2f
#ffdab9	#e6caa5	#ceba91	#b6aa7d	#9d9a6a	#858a56	#6d7a42	#556b2f

Kombination von #ffdab9 und #556b2f
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in.				Auf Hintergrund #ffdab9 ist #556b2f ungeeignet. Zwar ist der Helligkeitsunterschied in Ordnung, doch die Farben selbst sind zu ähnlich. Die Ähnlichkeit der Farben #556b2f und #ffdab9 ergibt sich zu 78.44%. Die Lesbarkeit dieser Kombination bewerte ich mit 21.56%.

Hintergrundfarbwert #ffdab9				Schriftfarbwert #556b2f
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ffdab9	#ffdab9	#ffdab9	#ffdab9	#556b2f	#556b2f	#556b2f	#556b2f
#ffdfc3	#ffdfc3	#daba9e	#daba9e	#6d804c	#6d804c	#485b28	#485b28
#ffe4cd	#ffe4cd	#b69b84	#b69b84	#85956a	#85956a	#3c4c21	#3c4c21
#ffe9d7	#ffe9d7	#917c69	#917c69	#9daa88	#9daa88	#303d1a	#303d1a
#ffefe1	#ffefe1	#6d5d4f	#6d5d4f	#b6bfa5	#b6bfa5	#242d14	#242d14
#fff4eb	#fff4eb	#483e34	#483e34	#ced4c3	#ced4c3	#181e0d	#181e0d
#fff9f5	#fff9f5	#241f1a	#241f1a	#e6e9e1	#e6e9e1	#0c0f06	#0c0f06
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #ffdab9 und Farbwert #556b2f

Wechsel der Textfarbe bei Hover mit Tag tbody

Die Textfarbe soll sich von Farbwert #ffdab9 auf Farbwert #556b2f ändern, wenn man mit der Maus auf <tbody> zeigt. Wir bereiten zunächst eine Darstellung von <tbody> in Farbwert #ffdab9 vor.

Als Beispiel legen wir Farbwert #ffdab9 als Textfarbe von <tbody> fest. Zwar verändern wir die Hintergrundfarbe nicht, setzen jedoch die Schriftart auf sans-serif.

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

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

<style type="text/css"><!--
  tbody: hover { 
    color: #556b2f;
  }
//-->
</style>

Mehr zum Thema können Sie in Tabellen in HTML lesen. Die Beschreibung des hier gezeigten Tag tbody erfahren Sie in der HTML Referenz unter <tbody>.

Zebra-Effekt bei Befehl th

Man spricht vom Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Dieser Effekt unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ying und .yang für <th> mit unterschiedlichen Hintergrundfarben Farbwert #ffdab9 und Farbwert #556b2f.

<style type="text/css"><!--
  th.ying { 
    background-color:#ffdab9;
  }
  th.yang { 
    background-color: #556b2f;
  }
//-->
</style>

Diese werden abwechselnd verwendet.

<table>
<tr><td class="ying">J1-1</td><td class="yang">J2-1</td><td class="ying">J3-1</td></tr>
<tr><td class="ying">J1-2</td><td class="yang">J2-2</td><td class="ying">J3-2</td></tr>
<tr><td class="ying">J1-3</td><td class="yang">J2-3</td><td class="ying">J3-3</td></tr>
</table>

Mehr zum Thema können Sie in Tabellen in HTML nachsehen. Mehr zum HTML-Befehl th ist in der HTML Referenz unter <th> beschrieben.