Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #8b4513 und Farbwert #00ff00

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 #8b4513			Schriftfarbwert #00ff00
Detail	:	Hintergrund #8b4513	Detail	:	Schrift #00ff00
Farbwert	:	#8b4513	Farbwert	:	#00ff00
Farbe	:	saddlebrown	Farbe	:	lime
HTML	:	#8b4513	HTML	:	#00ff00
HTML (Wert)	:	#8b4513	HTML (Wert)	:	#00ff00
CSS	:	#8b4513	CSS	:	#00ff00
CSS (Wert)	:	#8b4513	CSS (Wert)	:	#00ff00
CSS (kürzest)	:	#8b4513	CSS (kürzest)	:	#0f0
CSS (RGB)	:	rgb(139,69,19)	CSS (RGB)	:	rgb(0,255,0)
CSS (%RGB)	:	rgb(54%,27%,7%)	CSS (%RGB)	:	rgb(0%,100%,0%)

Verlauf Hintergrundfarbwert #8b4513 nach Schriftfarbwert #00ff00
#8b4513	#775f10	#637a0d	#4f940a	#3baf08	#27c905	#13e402	#00ff00
#8b4513	#775f10	#637a0d	#4f940a	#3baf08	#27c905	#13e402	#00ff00

Kombination von #8b4513 und #00ff00
Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante.				Die Ähnlichkeit der Farben #00ff00 und #8b4513 ergibt sich zu 75.37%. Die Lesbarkeit dieser Kombination ergibt sich zu 24.63%. #00ff00 eignet sich nicht als Schriftfarbe auf Hintergrund #8b4513. Weder der Helligkeitsunterschied noch der Farbunterschied sind ausreichend.

Hintergrundfarbwert #8b4513				Schriftfarbwert #00ff00
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#8b4513	#8b4513	#8b4513	#8b4513	#00ff00	#00ff00	#00ff00	#00ff00
#9b5f34	#9b5f34	#773b10	#773b10	#24ff24	#24ff24	#00da00	#00da00
#ac7a56	#ac7a56	#63310d	#63310d	#48ff48	#48ff48	#00b600	#00b600
#bc9478	#bc9478	#4f270a	#4f270a	#6dff6d	#6dff6d	#009100	#009100
#cdaf99	#cdaf99	#3b1d08	#3b1d08	#91ff91	#91ff91	#006d00	#006d00
#ddc9bb	#ddc9bb	#271305	#271305	#b6ffb6	#b6ffb6	#004800	#004800
#eee4dd	#eee4dd	#130902	#130902	#daffda	#daffda	#002400	#002400
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #8b4513 und Farbwert #00ff00

Wechsel der Textfarbe bei Hover von Tag p

Die Textfarbe soll sich von Farbwert #8b4513 auf Farbwert #00ff00 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Darstellung von <p> in Farbwert #8b4513 vor.

Wir ändern als Beispiel die Textfarbe von <p> auf Farbwert #8b4513.

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

Nun stellen wir ein, dass bei Mausberührung die Textfarbe auf #00ff00 gesetzt wird.

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

Weiteres zum Thema können Sie in Grundlegende Gestaltungselemente in HTML lesen. Beschreibung des HTML-Befehl <p>.

Zebra-Effekt mit HTML-Tag td

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, redet man vom so genannten Zebra-Effekt. Der Effekt unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .yang und .ying für <td> mit den Hintergrundfarben Farbwert #8b4513 und Farbwert #00ff00.

<style type="text/css"><!--
  td.yang { 
    background-color: #8b4513;
  }
  td.ying { 
    background-color: #00ff00;
  }
//-->
</style>

Diese werden dann abwechselnd genutzt.

<table>
<tr><td class="yang">Va,a</td><td class="ying">Vb,a</td><td class="yang">Vc,a</td></tr>
<tr><td class="yang">Va,b</td><td class="ying">Vb,b</td><td class="yang">Vc,b</td></tr>
<tr><td class="yang">Va,c</td><td class="ying">Vb,c</td><td class="yang">Vc,c</td></tr>
</table>

Mehr zu td können Sie in Tabellen in HTML erfahren. Beschreibung vom hier genutzten HTML-Befehl <td>.