Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #aaaaaa und Farbe gray218

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).

Hintergrundfarbwert #aaaaaa			Schriftfarbe gray218
Detail	:	Hintergrund #aaaaaa	Detail	:	Schrift gray218
Farbwert	:	#aaaaaa	Farbe	:	gray218
Farbe	:	gray170	Farbwert	:	#dadada
HTML	:	#aaaaaa	HTML	:	gray218
HTML (Wert)	:	#aaaaaa	HTML (Wert)	:	#dadada
CSS	:	#aaaaaa	CSS	:	gray218
CSS (Wert)	:	#aaaaaa	CSS (Wert)	:	#dadada
CSS (kürzest)	:	#aaa	CSS (kürzest)	:	#dadada
CSS (RGB)	:	rgb(170,170,170)	CSS (RGB)	:	rgb(218,218,218)
CSS (%RGB)	:	rgb(66%,66%,66%)	CSS (%RGB)	:	rgb(85%,85%,85%)

Verlauf Hintergrundfarbwert #aaaaaa nach Schriftfarbe gray218
#aaaaaa	#b0b0b0	#b7b7b7	#bebebe	#c5c5c5	#cccccc	#d3d3d3	#dadada
#aaaaaa	#b0b0b0	#b7b7b7	#bebebe	#c5c5c5	#cccccc	#d3d3d3	#dadada

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

Hintergrundfarbwert #aaaaaa				Schriftfarbe gray218
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#aaaaaa	#aaaaaa	#aaaaaa	#aaaaaa	#dadada	#dadada	#dadada	#dadada
#b6b6b6	#b6b6b6	#919191	#919191	#dfdfdf	#dfdfdf	#bababa	#bababa
#c2c2c2	#c2c2c2	#797979	#797979	#e4e4e4	#e4e4e4	#9b9b9b	#9b9b9b
#cecece	#cecece	#616161	#616161	#e9e9e9	#e9e9e9	#7c7c7c	#7c7c7c
#dadada	#dadada	#484848	#484848	#efefef	#efefef	#5d5d5d	#5d5d5d
#e6e6e6	#e6e6e6	#303030	#303030	#f4f4f4	#f4f4f4	#3e3e3e	#3e3e3e
#f2f2f2	#f2f2f2	#181818	#181818	#f9f9f9	#f9f9f9	#1f1f1f	#1f1f1f
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #aaaaaa und Farbe gray218

Wechsel der Umrandung bei Hover von Befehl a

Mit Tag <a> wird ein Hyperlink gesetzt. Dieser kann farblich gestaltet und hervorgehoben werden.

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

In diesem Beispiel umranden wir <a> mit einem 4 Pixel dicken, doppelten Rahmen in Farbwert #aaaaaa.

<style type="text/css"><!--
  a { border:4px double #aaa; }
//-->
</style>

Nun stellen wir ein, dass bei Mausberührung die Rahmenfarbe auf gray218 gesetzt wird.

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

Weiteres zum Thema lesen Sie in Verweise und Protokolle in HTML. Möglichkeiten vom hier genutzten Befehl <a>.

Wechsel der Textfarbe bei Hover bei HTML-Tag dfn

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

Für dieses Beispiel legen wir bei <dfn> die Textfarbe auf Farbwert #aaaaaa fest. Zwar verändern wir die Hintergrundfarbe nicht, ändern jedoch die Schriftart auf sans-serif:

<style type="text/css"><!--
  dfn { 
    font-family: sans-serif; 
    color: #aaaaaa;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Mausberührung die Textfarbe auf gray218 ändert.

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

Mehr zum Thema können Sie in Text in HTML lesen. Weiteres zum hier genutzten HTML-Tag dfn ist in der HTML Referenz unter <dfn> genau gezeigt.