Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #adff2f und Farbwert #f8f8ff

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 #adff2f			Schriftfarbwert #f8f8ff
Detail	:	Hintergrund #adff2f	Detail	:	Schrift #f8f8ff
Farbwert	:	#adff2f	Farbwert	:	#f8f8ff
Farbe	:	greenyellow	Farbe	:	ghostwhite
HTML	:	#adff2f	HTML	:	#f8f8ff
HTML (Wert)	:	#adff2f	HTML (Wert)	:	#f8f8ff
CSS	:	#adff2f	CSS	:	#f8f8ff
CSS (Wert)	:	#adff2f	CSS (Wert)	:	#f8f8ff
CSS (kürzest)	:	#adff2f	CSS (kürzest)	:	#f8f8ff
CSS (RGB)	:	rgb(173,255,47)	CSS (RGB)	:	rgb(248,248,255)
CSS (%RGB)	:	rgb(67%,100%,18%)	CSS (%RGB)	:	rgb(97%,97%,100%)

Verlauf Hintergrundfarbwert #adff2f nach Schriftfarbwert #f8f8ff
#adff2f	#b7fe4c	#c2fd6a	#cdfc88	#d7fba5	#e2fac3	#edf9e1	#f8f8ff
#adff2f	#b7fe4c	#c2fd6a	#cdfc88	#d7fba5	#e2fac3	#edf9e1	#f8f8ff

Kombination von #adff2f und #f8f8ff
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 vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante.				#f8f8ff eignet sich nicht als Schriftfarbe auf Hintergrund #adff2f, da sowohl Helligkeit als auch die Farben zu ähnlich sind. Die Ähnlichkeit der Farben #f8f8ff und #adff2f ergibt sich zu 94.48%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 5.52%.

Hintergrundfarbwert #adff2f				Schriftfarbwert #f8f8ff
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#adff2f	#adff2f	#adff2f	#adff2f	#f8f8ff	#f8f8ff	#f8f8ff	#f8f8ff
#b8ff4c	#b8ff4c	#94da28	#94da28	#f9f9ff	#f9f9ff	#d4d4da	#d4d4da
#c4ff6a	#c4ff6a	#7bb621	#7bb621	#fafaff	#fafaff	#b1b1b6	#b1b1b6
#d0ff88	#d0ff88	#62911a	#62911a	#fbfbff	#fbfbff	#8d8d91	#8d8d91
#dbffa5	#dbffa5	#4a6d14	#4a6d14	#fcfcff	#fcfcff	#6a6a6d	#6a6a6d
#e7ffc3	#e7ffc3	#31480d	#31480d	#fdfdff	#fdfdff	#464648	#464648
#f3ffe1	#f3ffe1	#182406	#182406	#fefeff	#fefeff	#232324	#232324
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #adff2f und Farbwert #f8f8ff

Zebra-Effekt mit HTML-Tag td

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, spricht man vom Zebra-Effekt. Dieser Effekt unterstützt das Auge, etwa die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .yang und .ying für <td> mit unterschiedlichen Hintergrundfarben Farbwert #adff2f und Farbwert #f8f8ff.

<style type="text/css"><!--
  td.yang { 
    background-color:#adff2f;
  }
  td.ying { 
    background-color:#f8f8ff;
  }
//-->
</style>

Diese Klassen werden dann abwechselnd genutzt.

<table>
<tr><td class="yang">J1:1</td><td class="ying">J2:1</td><td class="yang">J3:1</td></tr>
<tr><td class="yang">J1:2</td><td class="ying">J2:2</td><td class="yang">J3:2</td></tr>
<tr><td class="yang">J1:3</td><td class="ying">J2:3</td><td class="yang">J3:3</td></tr>
</table>

Mehr zu td können Sie in Tabellen in HTML erfahren. Die Beschreibung des hier verwendeten Befehl td lesen Sie in der HTML Referenz unter <td>.

Wechsel der Textfarbe bei Hover von HTML-Tag center

Die Textfarbe soll sich von Farbwert #adff2f auf Farbwert #f8f8ff ändern, wenn man mit der Maus auf <center> zeigt. Bereiten wir zunächst eine Darstellung von <center> in Farbwert #adff2f vor.

Wir legen als Beispiel die Textfarbe von <center> auf Farbwert #adff2f fest. Zwar behalten wir die Hintergrundfarbe bei, ändern jedoch die Schriftart auf verdana und setzen die Schriftgröße auf 13px:

<style type="text/css"><!--
  center { 
    color:#adff2f; 
    font-family:verdana; 
    font-size:13px;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Mausberührung die Textfarbe zu #f8f8ff ändert.

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

Mehr zum Thema center lesen Sie in Grundlegende Gestaltungselemente in HTML. Der HTML-Tag center ist in der HTML Referenz bei <center> ausführlich beschrieben.