Ressourcen: 137 HTML Farbnamen - Kombination von Farbe lawngreen und Farbwert #ffd700

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.

Hintergrundfarbe lawngreen			Schriftfarbwert #ffd700
Detail	:	Hintergrund lawngreen	Detail	:	Schrift #ffd700
Farbe	:	lawngreen	Farbwert	:	#ffd700
Farbwert	:	#7cfc00	Farbe	:	gold
HTML	:	lawngreen	HTML	:	#ffd700
HTML (Wert)	:	#7cfc00	HTML (Wert)	:	#ffd700
CSS	:	lawngreen	CSS	:	#ffd700
CSS (Wert)	:	#7cfc00	CSS (Wert)	:	#ffd700
CSS (kürzest)	:	#7cfc00	CSS (kürzest)	:	#ffd700
CSS (RGB)	:	rgb(124,252,0)	CSS (RGB)	:	rgb(255,215,0)
CSS (%RGB)	:	rgb(48%,98%,0%)	CSS (%RGB)	:	rgb(100%,84%,0%)

Verlauf Hintergrundfarbe lawngreen nach Schriftfarbwert #ffd700
#7cfc00	#8ef600	#a1f100	#b4ec00	#c6e600	#d9e100	#ecdc00	#ffd700
#7cfc00	#8ef600	#a1f100	#b4ec00	#c6e600	#d9e100	#ecdc00	#ffd700

Kombination von lawngreen und #ffd700
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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in.				Auf Hintergrund lawngreen ist #ffd700 ungeeignet, da sowohl Helligkeit als auch die Farben zu ähnlich sind. Die Ähnlichkeit von #ffd700 und lawngreen beträgt 94.98%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 5.02%.

Hintergrundfarbe lawngreen				Schriftfarbwert #ffd700
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#7cfc00	#7cfc00	#7cfc00	#7cfc00	#ffd700	#ffd700	#ffd700	#ffd700
#8efc24	#8efc24	#6ad800	#6ad800	#ffdc24	#ffdc24	#dab800	#dab800
#a1fc48	#a1fc48	#58b400	#58b400	#ffe248	#ffe248	#b69900	#b69900
#b4fd6d	#b4fd6d	#469000	#469000	#ffe86d	#ffe86d	#917a00	#917a00
#c6fd91	#c6fd91	#356c00	#356c00	#ffed91	#ffed91	#6d5c00	#6d5c00
#d9feb6	#d9feb6	#234800	#234800	#fff3b6	#fff3b6	#483d00	#483d00
#ecfeda	#ecfeda	#112400	#112400	#fff9da	#fff9da	#241e00	#241e00
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe lawngreen und Farbwert #ffd700

Wechsel der Hintergrundfarbe bei Hover von HTML-Tag strike

Die Hintergrundfarbe soll sich von Farbe lawngreen auf Farbwert #ffd700 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <strike> in Farbe lawngreen vor.

Wir ändern als Beispiel die Hintergrundfarbe von <strike> auf Farbe lawngreen. Zwar behalten wir die Textfarbe bei, setzen jedoch die Schriftart auf monospace:

<style type="text/css"><!--
  strike { 
    font-family: monospace; 
    background-color: lawngreen;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Berührung mit der Maus die Hintergrundfarbe zu #ffd700 ändert.

<style type="text/css"><!--
  strike: hover { 
    background-color: #ffd700;
  }
//-->
</style>

Weiteres zum Thema lesen Sie in Text in HTML. Möglichkeiten des HTML-Befehl strike erfahren Sie in der HTML Referenz unter <strike>.

Zebra-Effekt mit Tag th

Man redet vom so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Der Effekt unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ger und .ung für <th> mit den Hintergrundfarben Farbe lawngreen und Farbwert #ffd700.

<style type="text/css"><!--
  th.ger { 
    background-color: lawngreen;
  }
  th.ung { 
    background-color:#ffd700;
  }
//-->
</style>

Diese CSS-Klassen werden abwechselnd verwendet.

<table>
<tr><td class="ger">AA:A</td><td class="ung">AB:A</td><td class="ger">AC:A</td></tr>
<tr><td class="ger">AA:B</td><td class="ung">AB:B</td><td class="ger">AC:B</td></tr>
<tr><td class="ger">AA:C</td><td class="ung">AB:C</td><td class="ger">AC:C</td></tr>
</table>

Mehr zum Thema erfahren Sie in Tabellen in HTML. Mehr zum hier genutzten HTML-Befehl th erfahren Sie in der HTML Referenz unter <th>.