Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray116 und Farbwert #aeaeae

Graustufen enthalten natürlich alle 16 Graustufen und insbesondere die unbunten Grundfarben Schwarz und Weiß.

Um 256 Graustufen in HTML bzw. CSS zu erzeugen, wählen wir Farbwerte rr, gg und bb mit Werten von 0 bis 255 (d.h. hexadezimal 00 bis ff).

Hintergrundfarbe gray116			Schriftfarbwert #aeaeae
Detail	:	Hintergrund gray116	Detail	:	Schrift #aeaeae
Farbe	:	gray116	Farbwert	:	#aeaeae
Farbwert	:	#747474	Farbe	:	gray174
HTML	:	gray116	HTML	:	#aeaeae
HTML (Wert)	:	#747474	HTML (Wert)	:	#aeaeae
CSS	:	gray116	CSS	:	#aeaeae
CSS (Wert)	:	#747474	CSS (Wert)	:	#aeaeae
CSS (kürzest)	:	#747474	CSS (kürzest)	:	#aeaeae
CSS (RGB)	:	rgb(116,116,116)	CSS (RGB)	:	rgb(174,174,174)
CSS (%RGB)	:	rgb(45%,45%,45%)	CSS (%RGB)	:	rgb(68%,68%,68%)

Verlauf Hintergrundfarbe gray116 nach Schriftfarbwert #aeaeae
#747474	#7c7c7c	#848484	#8c8c8c	#959595	#9d9d9d	#a5a5a5	#aeaeae
#747474	#7c7c7c	#848484	#8c8c8c	#959595	#9d9d9d	#a5a5a5	#aeaeae

Kombination von gray116 und #aeaeae
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. 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.				Die Ähnlichkeit der Farben #aeaeae und gray116 beträgt 89.97%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 10.03%. Auf Hintergrund gray116 ist #aeaeae ungeeignet, weil die Unterschiede in der Helligkeit und Farbe zu gering sind.

Hintergrundfarbe gray116				Schriftfarbwert #aeaeae
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#747474	#747474	#747474	#747474	#aeaeae	#aeaeae	#aeaeae	#aeaeae
#878787	#878787	#636363	#636363	#b9b9b9	#b9b9b9	#959595	#959595
#9b9b9b	#9b9b9b	#525252	#525252	#c5c5c5	#c5c5c5	#7c7c7c	#7c7c7c
#afafaf	#afafaf	#424242	#424242	#d0d0d0	#d0d0d0	#636363	#636363
#c3c3c3	#c3c3c3	#313131	#313131	#dcdcdc	#dcdcdc	#4a4a4a	#4a4a4a
#d7d7d7	#d7d7d7	#212121	#212121	#e7e7e7	#e7e7e7	#313131	#313131
#ebebeb	#ebebeb	#101010	#101010	#f3f3f3	#f3f3f3	#181818	#181818
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray116 und Farbwert #aeaeae

Wechsel der Umrandung bei Hover mit Tag p

Die Rahmenfarbe soll sich von Farbe gray116 auf Farbwert #aeaeae ändern, wenn man mit der Maus auf <p> zeigt. Wir bereiten zunächst eine Darstellung von <p> in Farbe gray116 vor.

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

<style type="text/css"><!--
  p { 
    border-width:2px; 
    border-style:dashed; 
    border-color:gray116;
  }
//-->
</style>

Nun fordern wir, dass sich bei Berührung mit der Maus die Rahmenfarbe auf #aeaeae ändert.

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

Mehr zum Thema können Sie in Grundlegende Gestaltungselemente in HTML erfahren. Weiteres zum hier gezeigten Tag p lesen Sie in der HTML Referenz unter <p>.

Wechsel der Textfarbe bei Hover von Tag a

Ein Link wird mit HTML-Tag <a> gesetzt. Dieser kann farblich gestaltet werden.

Die Textfarbe soll sich von Farbe gray116 auf Farbwert #aeaeae ändern, wenn man mit der Maus auf <a> zeigt. Wir bereiten zunächst die Darstellung von <a> in Farbe gray116 vor.

Zum Beispiel legen wir die Textfarbe von <a> auf Farbe gray116 fest. Zwar lassen wir die Hintergrundfarbe unverändert, setzen jedoch die Schriftart auf arial. Die Größe der Schrift ändern wir auf 11px:

<style type="text/css"><!--
  a { 
    color: gray116; 
    font-family: arial; 
    font-size: 11px;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Mausberührung die Textfarbe zu #aeaeae ändert.

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

Weiteres zu a erfahren Sie in Verweise und Protokolle in HTML. Möglichkeiten des HTML-Tag a sind in der HTML Referenz unter <a> ausführlich zusammengestellt.