Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #00ff7f und Farbwert #ba55d3

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 #00ff7f			Schriftfarbwert #ba55d3
Detail	:	Hintergrund #00ff7f	Detail	:	Schrift #ba55d3
Farbwert	:	#00ff7f	Farbwert	:	#ba55d3
Farbe	:	springgreen	Farbe	:	mediumorchid
HTML	:	#00ff7f	HTML	:	#ba55d3
HTML (Wert)	:	#00ff7f	HTML (Wert)	:	#ba55d3
CSS	:	#00ff7f	CSS	:	#ba55d3
CSS (Wert)	:	#00ff7f	CSS (Wert)	:	#ba55d3
CSS (kürzest)	:	#00ff7f	CSS (kürzest)	:	#ba55d3
CSS (RGB)	:	rgb(0,255,127)	CSS (RGB)	:	rgb(186,85,211)
CSS (%RGB)	:	rgb(0%,100%,49%)	CSS (%RGB)	:	rgb(72%,33%,82%)

Verlauf Hintergrundfarbwert #00ff7f nach Schriftfarbwert #ba55d3
#00ff7f	#1ae68b	#35ce97	#4fb6a3	#6a9daf	#8485bb	#9f6dc7	#ba55d3
#00ff7f	#1ae68b	#35ce97	#4fb6a3	#6a9daf	#8485bb	#9f6dc7	#ba55d3

Kombination von #00ff7f und #ba55d3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante.				Die Ähnlichkeit von #ba55d3 und #00ff7f beträgt 86.05%. Die Lesbarkeit dieser Farbkombination liegt damit bei 13.95%. #ba55d3 eignet sich nicht als Schriftfarbe auf Hintergrund #00ff7f. Weder der Helligkeitsunterschied noch der Farbunterschied sind gross genug.

Hintergrundfarbwert #00ff7f				Schriftfarbwert #ba55d3
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#00ff7f	#00ff7f	#00ff7f	#00ff7f	#ba55d3	#ba55d3	#ba55d3	#ba55d3
#24ff91	#24ff91	#00da6c	#00da6c	#c36dd9	#c36dd9	#9f48b4	#9f48b4
#48ffa3	#48ffa3	#00b65a	#00b65a	#cd85df	#cd85df	#843c96	#843c96
#6dffb5	#6dffb5	#009148	#009148	#d79de5	#d79de5	#6a3078	#6a3078
#91ffc8	#91ffc8	#006d36	#006d36	#e1b6ec	#e1b6ec	#4f245a	#4f245a
#b6ffda	#b6ffda	#004824	#004824	#ebcef2	#ebcef2	#35183c	#35183c
#daffec	#daffec	#002412	#002412	#f5e6f8	#f5e6f8	#1a0c1e	#1a0c1e
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #00ff7f und Farbwert #ba55d3

Wechsel der Hintergrundfarbe bei Hover mit HTML-Tag s

Die Hintergrundfarbe soll sich von Farbwert #00ff7f auf Farbwert #ba55d3 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Darstellung von <s> in Farbwert #00ff7f vor.

Wir legen zum Beispiel bei <s> die Hintergrundfarbe auf Farbwert #00ff7f fest. Die Textfarbe ändern wir nicht. Die Schriftart ändern wir auf courier new. Die Schriftgröße verkleinern wir auf 93%:

<style type="text/css"><!--
  s { 
    font-family:courier new; 
    font-size:93%; 
    background-color:#00ff7f;
  }
//-->
</style>

Jetzt fordern wir, dass bei Mausberührung die Hintergrundfarbe auf #ba55d3 gesetzt wird.

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

Weiteres zum Thema s können Sie in Text in HTML erfahren. Möglichkeiten vom hier gezeigten HTML-Tag <s>.

Wechsel der Umrandung bei Hover mit HTML-Tag img

Die Rahmenfarbe soll sich von Farbwert #00ff7f auf Farbwert #ba55d3 ändern, wenn man mit der Maus auf <img> zeigt. Bereiten wir zunächst die Darstellung von <img> in Farbwert #00ff7f vor.

In diesem Beispiel umranden wir <img> mit einem 1 Pixel dicken, herausstehenden Rahmen in Farbwert #00ff7f.

<style type="text/css"><!--
  img { 
    border-style:outset; 
    border-width:1px; 
    border-color:#00ff7f;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Mausberührung die Rahmenfarbe auf #ba55d3 ändert.

<style type="text/css"><!--
  img:hover { 
    border-color:#ba55d3;
  }
//-->
</style>

Mehr zu img können Sie in Grafik in HTML nachsehen. Möglichkeiten des Tag <img>.