Ressourcen: 17 HTML Standard Farbnamen - Kombination von Farbe grey und Farbe yellow

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			Schriftfarbe yellow
Detail	:	Hintergrund grey	Detail	:	Schrift yellow
Farbe	:	grey	Farbe	:	yellow
Farbwert	:	#808080	Farbwert	:	#ffff00
HTML	:	grey	HTML	:	yellow
HTML (Wert)	:	#808080	HTML (Wert)	:	#ffff00
CSS	:	grey	CSS	:	yellow
CSS (Wert)	:	#808080	CSS (Wert)	:	#ffff00
CSS (kürzest)	:	#808080	CSS (kürzest)	:	#ff0
CSS (RGB)	:	rgb(128,128,128)	CSS (RGB)	:	rgb(255,255,0)
CSS (%RGB)	:	rgb(50%,50%,50%)	CSS (%RGB)	:	rgb(100%,100%,0%)

Verlauf Hintergrundfarbe grey nach Schriftfarbe yellow
#808080	#92926d	#a4a45b	#b6b649	#c8c836	#dada24	#ecec12	#ffff00
#808080	#92926d	#a4a45b	#b6b649	#c8c836	#dada24	#ecec12	#ffff00

Kombination von grey und yellow
Cras vestibulum tristique erat, ac interdum justo cursus in. 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 id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				Auf Hintergrund grey ist yellow ungeeignet. Sowohl Helligkeit als auch die Farben sind zu ähnlich. Die Ähnlichkeit der Farben yellow und grey ergibt sich zu 82.49%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 17.51%.

Hintergrundfarbe grey				Schriftfarbe yellow
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#808080	#808080	#808080	#808080	#ffff00	#ffff00	#ffff00	#ffff00
#929292	#929292	#6d6d6d	#6d6d6d	#ffff24	#ffff24	#dada00	#dada00
#a4a4a4	#a4a4a4	#5b5b5b	#5b5b5b	#ffff48	#ffff48	#b6b600	#b6b600
#b6b6b6	#b6b6b6	#494949	#494949	#ffff6d	#ffff6d	#919100	#919100
#c8c8c8	#c8c8c8	#363636	#363636	#ffff91	#ffff91	#6d6d00	#6d6d00
#dadada	#dadada	#242424	#242424	#ffffb6	#ffffb6	#484800	#484800
#ececec	#ececec	#121212	#121212	#ffffda	#ffffda	#242400	#242400
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe grey und Farbe yellow

Wechsel der Textfarbe bei Hover von Befehl a

Mit Befehl <a> wird ein Link erzeugt. Diesen kann man hervorheben und farblich gestalten.

Die Textfarbe soll sich von Farbe grey auf Farbe yellow ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Formatierung von <a> in Farbe grey vor.

Z.B. legen wir bei <a> die Textfarbe auf Farbe grey fest. Die Hintergrundfarbe lassen wir unverändert. Die Schriftart setzen wir auf sans-serif und setzen die Schriftgröße auf 13px:

<style type="text/css"><!--
  a { 
    color:grey; 
    font-size:13px; 
    font-family:sans-serif;
  }
//-->
</style>

Jetzt stellen wir ein, dass bei Berührung mit der Maus die Textfarbe auf yellow geändert wird.

<style type="text/css"><!--
  a:hover { 
    color:yellow;
  }
//-->
</style>

Mehr zum Thema a erfahren Sie in Verweise und Protokolle in HTML. Mehr zum HTML-Tag a lesen Sie in der HTML Referenz unter <a>.

Wechsel der Umrandung bei Hover mit HTML-Befehl img

Die Rahmenfarbe soll sich von Farbe grey auf Farbe yellow ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Darstellung von <img> in Farbe grey vor.

In diesem Beispiel umranden wir <img> mit einem 2 Pixel dicken, gestrichelten Rahmen in Farbe grey.

<style type="text/css"><!--
  img { border:2px dashed grey; }
//-->
</style>

Jetzt fordern wir, dass bei Hover die Rahmenfarbe auf yellow gesetzt wird.

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

Weiteres zum Thema finden Sie in Grafik in HTML. Mehr zum HTML-Befehl <img>.