Ressourcen: 17 HTML Standard Farbnamen - Kombination von Farbe grey und Farbwert #ff00ff

HTML verfügt seit jeher über 17 Standard Farbnamen.

Sie entstehen dadurch, dass die 8 Grundfarben jeweils maximal und zu 50% enthalten sind.

Zu diesen 16 Farben kommt mit grey eine alternative Schreibweise für gray.

Hintergrundfarbe grey			Schriftfarbwert #ff00ff
Detail	:	Hintergrund grey	Detail	:	Schrift #ff00ff
Farbe	:	grey	Farbwert	:	#ff00ff
Farbwert	:	#808080	Farbe	:	fuchsia
HTML	:	grey	HTML	:	#ff00ff
HTML (Wert)	:	#808080	HTML (Wert)	:	#ff00ff
CSS	:	grey	CSS	:	#ff00ff
CSS (Wert)	:	#808080	CSS (Wert)	:	#ff00ff
CSS (kürzest)	:	#808080	CSS (kürzest)	:	#f0f
CSS (RGB)	:	rgb(128,128,128)	CSS (RGB)	:	rgb(255,0,255)
CSS (%RGB)	:	rgb(50%,50%,50%)	CSS (%RGB)	:	rgb(100%,0%,100%)

Verlauf Hintergrundfarbe grey nach Schriftfarbwert #ff00ff
#808080	#926d92	#a45ba4	#b649b6	#c836c8	#da24da	#ec12ec	#ff00ff
#808080	#926d92	#a45ba4	#b649b6	#c836c8	#da24da	#ec12ec	#ff00ff

Kombination von grey und #ff00ff
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.				#ff00ff eignet sich nicht als Schriftfarbe auf Hintergrund grey. Sowohl Helligkeit als auch die Farben sind sich zu ähnlich. Die Ähnlichkeit von #ff00ff und grey ergibt sich zu 94.00%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 6.00%.

Hintergrundfarbe grey				Schriftfarbwert #ff00ff
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#808080	#808080	#808080	#808080	#ff00ff	#ff00ff	#ff00ff	#ff00ff
#929292	#929292	#6d6d6d	#6d6d6d	#ff24ff	#ff24ff	#da00da	#da00da
#a4a4a4	#a4a4a4	#5b5b5b	#5b5b5b	#ff48ff	#ff48ff	#b600b6	#b600b6
#b6b6b6	#b6b6b6	#494949	#494949	#ff6dff	#ff6dff	#910091	#910091
#c8c8c8	#c8c8c8	#363636	#363636	#ff91ff	#ff91ff	#6d006d	#6d006d
#dadada	#dadada	#242424	#242424	#ffb6ff	#ffb6ff	#480048	#480048
#ececec	#ececec	#121212	#121212	#ffdaff	#ffdaff	#240024	#240024
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe grey und Farbwert #ff00ff

Zebra-Effekt mit Befehl tr

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, spricht man vom so genannten Zebra-Effekt. Er unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ung und .ger für <tr> mit den Hintergrundfarben Farbe grey und Farbwert #ff00ff.

<style type="text/css"><!--
  tr.ung { 
    background-color:grey;
  }
  tr.ger { 
    background-color:#f0f;
  }
//-->
</style>

Diese werden abwechselnd genutzt.

<table>
<tr class="ung"><td>O1~1</td><td>O2~1</td><td>O3~1</td></tr>
<tr class="ger"><td>O1~2</td><td>O2~2</td><td>O3~2</td></tr>
<tr class="ung"><td>O1~3</td><td>O2~3</td><td>O3~3</td></tr>
</table>

Mehr zum Thema tr finden Sie in Tabellen in HTML. Mehr zum hier gezeigten Tag <tr>.

Wechsel der Hintergrundfarbe bei Hover von Tag blockquote

Die Hintergrundfarbe soll sich von Farbe grey auf Farbwert #ff00ff ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Darstellung von <blockquote> in Farbe grey vor.

Wir legen in diesem Beispiel bei <blockquote> die Hintergrundfarbe auf Farbe grey fest. Zwar ändern wir die Textfarbe nicht, ändern jedoch die Schriftart auf monospace.

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

Nun stellen wir ein, dass sich bei Hover die Hintergrundfarbe auf #ff00ff ändert.

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

Mehr zu blockquote können Sie in Blockorientierte Elemente in HTML finden. Mehr zum hier verwendeten HTML-Tag blockquote finden Sie in der HTML Referenz unter <blockquote>.