Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #adff2f und Farbe linen

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 #adff2f			Schriftfarbe linen
Detail	:	Hintergrund #adff2f	Detail	:	Schrift linen
Farbwert	:	#adff2f	Farbe	:	linen
Farbe	:	greenyellow	Farbwert	:	#faf0e6
HTML	:	#adff2f	HTML	:	linen
HTML (Wert)	:	#adff2f	HTML (Wert)	:	#faf0e6
CSS	:	#adff2f	CSS	:	linen
CSS (Wert)	:	#adff2f	CSS (Wert)	:	#faf0e6
CSS (kürzest)	:	#adff2f	CSS (kürzest)	:	#faf0e6
CSS (RGB)	:	rgb(173,255,47)	CSS (RGB)	:	rgb(250,240,230)
CSS (%RGB)	:	rgb(67%,100%,18%)	CSS (%RGB)	:	rgb(98%,94%,90%)

Verlauf Hintergrundfarbwert #adff2f nach Schriftfarbe linen
#adff2f	#b8fc49	#c3fa63	#cef87d	#d9f697	#e4f4b1	#eff2cb	#faf0e6
#adff2f	#b8fc49	#c3fa63	#cef87d	#d9f697	#e4f4b1	#eff2cb	#faf0e6

Kombination von #adff2f und linen
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 #adff2f ist linen ungeeignet, weil weder der Helligkeitsunterschied noch der Farbunterschied gross genug sind. Die Ähnlichkeit der Farben linen und #adff2f beträgt 94.81%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 5.19%.

Hintergrundfarbwert #adff2f				Schriftfarbe linen
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#adff2f	#adff2f	#adff2f	#adff2f	#faf0e6	#faf0e6	#faf0e6	#faf0e6
#b8ff4c	#b8ff4c	#94da28	#94da28	#faf2e9	#faf2e9	#d6cdc5	#d6cdc5
#c4ff6a	#c4ff6a	#7bb621	#7bb621	#fbf4ed	#fbf4ed	#b2aba4	#b2aba4
#d0ff88	#d0ff88	#62911a	#62911a	#fcf6f0	#fcf6f0	#8e8983	#8e8983
#dbffa5	#dbffa5	#4a6d14	#4a6d14	#fcf8f4	#fcf8f4	#6b6662	#6b6662
#e7ffc3	#e7ffc3	#31480d	#31480d	#fdfaf7	#fdfaf7	#474441	#474441
#f3ffe1	#f3ffe1	#182406	#182406	#fefcfb	#fefcfb	#232220	#232220
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #adff2f und Farbe linen

Wechsel der Umrandung bei Hover bei HTML-Befehl p

Die Rahmenfarbe soll sich von Farbwert #adff2f auf Farbe linen ändern, wenn man mit der Maus auf <p> zeigt. Bereiten wir zunächst eine Formatierung von <p> in Farbwert #adff2f vor.

In diesem Beispiel umranden wir <p> mit einem 1 Pixel dicken, doppelten Rahmen in Farbwert #adff2f.

<style type="text/css"><!--
  p { 
    border-width: 1px; 
    border-color: #adff2f; 
    border-style: double;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Hover die Rahmenfarbe zu linen ändert.

<style type="text/css"><!--
  p:hover { 
    border-color:linen;
  }
//-->
</style>

Mehr zum Thema können Sie in Grundlegende Gestaltungselemente in HTML finden. Die Beschreibung des HTML-Befehl p lesen Sie in der HTML Referenz unter <p>.

Zebra-Effekt von Tag td

Man redet von einem Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Der Effekt unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ungerade und .gerade für <td> mit den Hintergrundfarben Farbwert #adff2f und Farbe linen.

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

Diese werden dann abwechselnd genutzt.

<table>
<tr><td class="ungerade">KA:A</td><td class="gerade">KB:A</td><td class="ungerade">KC:A</td></tr>
<tr><td class="ungerade">KA:B</td><td class="gerade">KB:B</td><td class="ungerade">KC:B</td></tr>
<tr><td class="ungerade">KA:C</td><td class="gerade">KB:C</td><td class="ungerade">KC:C</td></tr>
</table>

Weiteres zum Thema td lesen Sie in Tabellen in HTML. Möglichkeiten des hier gezeigten HTML-Tag <td>.