Ressourcen: 16 Graustufen in HTML - Kombination von Farbwert #aaaaaa und Farbwert #ffffff

Graustufen enthalten insbesondere die unbunten Grundfarben Schwarz und Weiß.

Um 16 Graustufen in HTML bzw. CSS zu erzeugen, wählen wir Farbwerte rr, gg und bb mit Werten von 0 bis 15 (d.h. hexadezimal 0 bis f) für r, g und b.

Hintergrundfarbwert #aaaaaa			Schriftfarbwert #ffffff
Detail	:	Hintergrund #aaaaaa	Detail	:	Schrift #ffffff
Farbwert	:	#aaaaaa	Farbwert	:	#ffffff
Farbe	:	gray170	Farbe	:	white
HTML	:	#aaaaaa	HTML	:	#ffffff
HTML (Wert)	:	#aaaaaa	HTML (Wert)	:	#ffffff
CSS	:	#aaaaaa	CSS	:	#ffffff
CSS (Wert)	:	#aaaaaa	CSS (Wert)	:	#ffffff
CSS (kürzest)	:	#aaa	CSS (kürzest)	:	#fff
CSS (RGB)	:	rgb(170,170,170)	CSS (RGB)	:	rgb(255,255,255)
CSS (%RGB)	:	rgb(66%,66%,66%)	CSS (%RGB)	:	rgb(100%,100%,100%)

Verlauf Hintergrundfarbwert #aaaaaa nach Schriftfarbwert #ffffff
#aaaaaa	#b6b6b6	#c2c2c2	#cecece	#dadada	#e6e6e6	#f2f2f2	#ffffff
#aaaaaa	#b6b6b6	#c2c2c2	#cecece	#dadada	#e6e6e6	#f2f2f2	#ffffff

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

Hintergrundfarbwert #aaaaaa				Schriftfarbwert #ffffff
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#aaaaaa	#aaaaaa	#aaaaaa	#aaaaaa	#ffffff	#ffffff	#ffffff	#ffffff
#b6b6b6	#b6b6b6	#919191	#919191	#ffffff	#ffffff	#dadada	#dadada
#c2c2c2	#c2c2c2	#797979	#797979	#ffffff	#ffffff	#b6b6b6	#b6b6b6
#cecece	#cecece	#616161	#616161	#ffffff	#ffffff	#919191	#919191
#dadada	#dadada	#484848	#484848	#ffffff	#ffffff	#6d6d6d	#6d6d6d
#e6e6e6	#e6e6e6	#303030	#303030	#ffffff	#ffffff	#484848	#484848
#f2f2f2	#f2f2f2	#181818	#181818	#ffffff	#ffffff	#242424	#242424
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #aaaaaa und Farbwert #ffffff

Wechsel der Textfarbe bei Hover bei HTML-Tag li

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

Für dieses Beispiel legen wir Farbwert #aaaaaa als Textfarbe von <li> fest. Zwar behalten wir die Hintergrundfarbe bei, ändern jedoch die Schriftart auf verdana und erhöhen die Schriftgröße auf 115%.

<style type="text/css"><!--
  li { 
    color:#aaaaaa; 
    font-size:115%; 
    font-family:verdana;
  }
//-->
</style>

Jetzt fordern wir, dass bei Mausberührung die Textfarbe auf #ffffff geändert wird.

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

Mehr zum Thema li finden Sie in Listen und Glossare in HTML. Einzelheiten vom hier gezeigten Befehl li sind in der HTML Referenz unter <li> genau beschrieben.

Text- und Unterstreichungsfarben mit Tag a

Einen Link erzeugt man mit HTML-Befehl <a>. Diesen können Sie farblich gestalten.

Hier ändern wir die Textfarbe von <a> auf Farbwert #ffffff. Die Schriftart setzen wir auf verdana und vergrößern die Schriftgröße auf 121%. Wir unterstreichen den Inhalt von <a> mit Hilfe eines gezahnten Rahmens mit 1 Punkte Dicke in Farbwert #aaaaaa. Mit HTML geht das nicht. Wir nutzen deshalb CSS.

<style type="text/css"><!--
  a { 
    border-bottom:1pt ridge #aaa; 
    color:#ffffff; 
    font-family:verdana; 
    font-size:121%;
  }
//-->
</style>

Die Idee ist, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben.

Weiteres zum Thema a können Sie in Verweise und Protokolle in HTML lesen. Mehr zum Tag a ist in der HTML Referenz unter <a> genau zusammengestellt.