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

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 #6b8e23			Schriftfarbwert #f5deb3
Detail	:	Hintergrund #6b8e23	Detail	:	Schrift #f5deb3
Farbwert	:	#6b8e23	Farbwert	:	#f5deb3
Farbe	:	olivedrab	Farbe	:	wheat
HTML	:	#6b8e23	HTML	:	#f5deb3
HTML (Wert)	:	#6b8e23	HTML (Wert)	:	#f5deb3
CSS	:	#6b8e23	CSS	:	#f5deb3
CSS (Wert)	:	#6b8e23	CSS (Wert)	:	#f5deb3
CSS (kürzest)	:	#6b8e23	CSS (kürzest)	:	#f5deb3
CSS (RGB)	:	rgb(107,142,35)	CSS (RGB)	:	rgb(245,222,179)
CSS (%RGB)	:	rgb(41%,55%,13%)	CSS (%RGB)	:	rgb(96%,87%,70%)

Verlauf Hintergrundfarbwert #6b8e23 nach Schriftfarbwert #f5deb3
#6b8e23	#7e9937	#92a44c	#a6b060	#b9bb75	#cdc789	#e1d29e	#f5deb3
#6b8e23	#7e9937	#92a44c	#a6b060	#b9bb75	#cdc789	#e1d29e	#f5deb3

Kombination von #6b8e23 und #f5deb3
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 id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit von #f5deb3 und #6b8e23 beträgt 86.21%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 13.79%. #f5deb3 ist nicht als Schriftfarbe auf Hintergrund #6b8e23 geeignet, da sich sowohl Helligkeit als auch die Farben zu ähnlich sind.

Hintergrundfarbwert #6b8e23				Schriftfarbwert #f5deb3
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#6b8e23	#6b8e23	#6b8e23	#6b8e23	#f5deb3	#f5deb3	#f5deb3	#f5deb3
#809e42	#809e42	#5b791e	#5b791e	#f6e2bd	#f6e2bd	#d2be99	#d2be99
#95ae61	#95ae61	#4c6519	#4c6519	#f7e7c8	#f7e7c8	#af9e7f	#af9e7f
#aabe81	#aabe81	#3d5114	#3d5114	#f9ecd3	#f9ecd3	#8c7e66	#8c7e66
#bfcea0	#bfcea0	#2d3c0f	#2d3c0f	#faf0de	#faf0de	#695f4c	#695f4c
#d4dec0	#d4dec0	#1e280a	#1e280a	#fcf5e9	#fcf5e9	#463f33	#463f33
#e9eedf	#e9eedf	#0f1405	#0f1405	#fdfaf4	#fdfaf4	#231f19	#231f19
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #6b8e23 und Farbwert #f5deb3

Wechsel der Textfarbe bei Hover von Tag col

Die Textfarbe soll sich von Farbwert #6b8e23 auf Farbwert #f5deb3 ändern, wenn man mit der Maus auf <col> zeigt. Bereiten wir zunächst die Formatierung von <col> in Farbwert #6b8e23 vor.

Hier legen wir die Textfarbe von <col> auf Farbwert #6b8e23 fest. Zwar verändern wir die Hintergrundfarbe nicht, ändern jedoch die Schriftart auf arial und ändern die Schriftgröße auf 9px.

<style type="text/css"><!--
  col { 
    font-family: arial; 
    font-size: 9px; 
    color: #6b8e23;
  }
//-->
</style>

Nun stellen wir ein, dass bei Hover die Textfarbe auf #f5deb3 gesetzt wird.

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

Mehr zu col erfahren Sie in Tabellen in HTML. Möglichkeiten des hier verwendeten Befehl <col>.

Zebra-Effekt von HTML-Tag td

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, spricht man von einem so genannten Zebra-Effekt. Der Effekt unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ungerade und .gerade für <td> mit unterschiedlichen Hintergrundfarben Farbwert #6b8e23 und Farbwert #f5deb3.

<style type="text/css"><!--
  td.ungerade { 
    background-color:#6b8e23;
  }
  td.gerade { 
    background-color:#f5deb3;
  }
//-->
</style>

Diese Klassen werden dann abwechselnd angewendet.

<table>
<tr><td class="ungerade">R1.1</td><td class="gerade">R2.1</td><td class="ungerade">R3.1</td></tr>
<tr><td class="ungerade">R1.2</td><td class="gerade">R2.2</td><td class="ungerade">R3.2</td></tr>
<tr><td class="ungerade">R1.3</td><td class="gerade">R2.3</td><td class="ungerade">R3.3</td></tr>
</table>

Weiteres zum Thema td finden Sie in Tabellen in HTML. Möglichkeiten des HTML-Tag td sind in der HTML Referenz unter <td> genau gezeigt.