Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #eee8aa und Farbwert #228b22

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 #eee8aa			Schriftfarbwert #228b22
Detail	:	Hintergrund #eee8aa	Detail	:	Schrift #228b22
Farbwert	:	#eee8aa	Farbwert	:	#228b22
Farbe	:	palegoldenrod	Farbe	:	forestgreen
HTML	:	#eee8aa	HTML	:	#228b22
HTML (Wert)	:	#eee8aa	HTML (Wert)	:	#228b22
CSS	:	#eee8aa	CSS	:	#228b22
CSS (Wert)	:	#eee8aa	CSS (Wert)	:	#228b22
CSS (kürzest)	:	#eee8aa	CSS (kürzest)	:	#228b22
CSS (RGB)	:	rgb(238,232,170)	CSS (RGB)	:	rgb(34,139,34)
CSS (%RGB)	:	rgb(93%,90%,66%)	CSS (%RGB)	:	rgb(13%,54%,13%)

Verlauf Hintergrundfarbwert #eee8aa nach Schriftfarbwert #228b22
#eee8aa	#d0da96	#b3cd83	#96c06f	#79b25c	#5ca548	#3f9835	#228b22
#eee8aa	#d0da96	#b3cd83	#96c06f	#79b25c	#5ca548	#3f9835	#228b22

Kombination von #eee8aa und #228b22
Cras vestibulum tristique erat, ac interdum justo cursus in. 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.				Die Ähnlichkeit der Farben #228b22 und #eee8aa beträgt 83.32%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 16.68%. #228b22 eignet sich nicht als Schriftfarbe auf Hintergrund #eee8aa. Zwar ist der Helligkeitsunterschied ausreichend, doch die Farben selbst sind zu ähnlich.

Hintergrundfarbwert #eee8aa				Schriftfarbwert #228b22
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#eee8aa	#eee8aa	#eee8aa	#eee8aa	#228b22	#228b22	#228b22	#228b22
#f0ebb6	#f0ebb6	#ccc691	#ccc691	#419b41	#419b41	#1d771d	#1d771d
#f2eec2	#f2eec2	#aaa579	#aaa579	#61ac61	#61ac61	#186318	#186318
#f5f1ce	#f5f1ce	#888461	#888461	#80bc80	#80bc80	#134f13	#134f13
#f7f5da	#f7f5da	#666348	#666348	#a0cda0	#a0cda0	#0e3b0e	#0e3b0e
#faf8e6	#faf8e6	#444230	#444230	#bfddbf	#bfddbf	#092709	#092709
#fcfbf2	#fcfbf2	#222118	#222118	#dfeedf	#dfeedf	#041304	#041304
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #eee8aa und Farbwert #228b22

Zebra-Effekt bei Befehl td

Man redet von einem Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Dieser Effekt unterstützt das Auge, etwa die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .gerade und .ungerade für <td> mit den Hintergrundfarben Farbwert #eee8aa und Farbwert #228b22.

<style type="text/css"><!--
  td.gerade { 
    background-color:#eee8aa;
  }
  td.ungerade { 
    background-color:#228b22;
  }
//-->
</style>

Diese werden abwechselnd genutzt.

<table>
<tr><td class="gerade">Ca-a</td><td class="ungerade">Cb-a</td><td class="gerade">Cc-a</td></tr>
<tr><td class="gerade">Ca-b</td><td class="ungerade">Cb-b</td><td class="gerade">Cc-b</td></tr>
<tr><td class="gerade">Ca-c</td><td class="ungerade">Cb-c</td><td class="gerade">Cc-c</td></tr>
</table>

Mehr zu td können Sie in Tabellen in HTML nachlesen. Der Befehl td ist in der HTML Referenz bei <td> gezeigt.

Wechsel der Hintergrundfarbe bei Hover von Befehl center

Die Hintergrundfarbe soll sich von Farbwert #eee8aa auf Farbwert #228b22 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Formatierung von <center> in Farbwert #eee8aa vor.

Wir legen hier Farbwert #eee8aa als Hintergrundfarbe von <center> fest und ändern die Größe der Schrift auf 14px.

<style type="text/css"><!--
  center { 
    background-color: #eee8aa; 
    font-size: 14px;
  }
//-->
</style>

Nun fordern wir, dass sich bei Mausberührung die Hintergrundfarbe zu #228b22 ändert.

<style type="text/css"><!--
  center: hover { 
    background-color: #228b22;
  }
//-->
</style>

Weiteres zum Thema center können Sie in Grundlegende Gestaltungselemente in HTML erfahren. Möglichkeiten vom HTML-Tag center erfahren Sie in der HTML Referenz unter <center>.