Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray216 und Farbe gray72

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 gray216			Schriftfarbe gray72
Detail	:	Hintergrund gray216	Detail	:	Schrift gray72
Farbe	:	gray216	Farbe	:	gray72
Farbwert	:	#d8d8d8	Farbwert	:	#484848
HTML	:	gray216	HTML	:	gray72
HTML (Wert)	:	#d8d8d8	HTML (Wert)	:	#484848
CSS	:	gray216	CSS	:	gray72
CSS (Wert)	:	#d8d8d8	CSS (Wert)	:	#484848
CSS (kürzest)	:	#d8d8d8	CSS (kürzest)	:	#484848
CSS (RGB)	:	rgb(216,216,216)	CSS (RGB)	:	rgb(72,72,72)
CSS (%RGB)	:	rgb(84%,84%,84%)	CSS (%RGB)	:	rgb(28%,28%,28%)

Verlauf Hintergrundfarbe gray216 nach Schriftfarbe gray72
#d8d8d8	#c3c3c3	#aeaeae	#9a9a9a	#858585	#717171	#5c5c5c	#484848
#d8d8d8	#c3c3c3	#aeaeae	#9a9a9a	#858585	#717171	#5c5c5c	#484848

Kombination von gray216 und gray72
Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna.				Die Ähnlichkeit der Farben gray72 und gray216 beträgt 69.44%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 30.56%. Auf Hintergrund gray216 ist gray72 ungeeignet. Zwar ist der Helligkeitsunterschied ausreichend, doch die Farben selbst sind zu ähnlich.

Hintergrundfarbe gray216				Schriftfarbe gray72
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#d8d8d8	#d8d8d8	#d8d8d8	#d8d8d8	#484848	#484848	#484848	#484848
#dddddd	#dddddd	#b9b9b9	#b9b9b9	#626262	#626262	#3d3d3d	#3d3d3d
#e3e3e3	#e3e3e3	#9a9a9a	#9a9a9a	#7c7c7c	#7c7c7c	#333333	#333333
#e8e8e8	#e8e8e8	#7b7b7b	#7b7b7b	#969696	#969696	#292929	#292929
#eeeeee	#eeeeee	#5c5c5c	#5c5c5c	#b0b0b0	#b0b0b0	#1e1e1e	#1e1e1e
#f3f3f3	#f3f3f3	#3d3d3d	#3d3d3d	#cacaca	#cacaca	#141414	#141414
#f9f9f9	#f9f9f9	#1e1e1e	#1e1e1e	#e4e4e4	#e4e4e4	#0a0a0a	#0a0a0a
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray216 und Farbe gray72

Wechsel der Unterstreichung bei Hover mit Befehl span

Die Unterstreichungsfarbe soll sich von Farbe gray216 auf Farbe gray72 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Formatierung von <span> in Farbe gray216 vor.

Beispielsweise unterstreichen wir <span> mit einem gestrichelten Rahmen mit 1 Pixel Dicke in Farbe gray216.

<style type="text/css"><!--
  span { 
    border-bottom-style: dashed; 
    border-bottom-color: gray216; 
    border-bottom-width: 1px;
  }
//-->
</style>

Nun fordern wir, dass sich bei Mausberührung die Farbe der Unterstreichung auf gray72 ändert.

<style type="text/css"><!--
  span: hover { 
    border-bottom-color: gray72;
  }
//-->
</style>

Die Idee ist hierbei, unabhängige Formatierungen für Inhalt und Unterstreichung zu nutzen. Öfter sehen Sie das bei Hyperlinks. Der Text wird in einer Farbe dargestellt. Die Unterstreichung in einer anderen. Es ist jedoch keine "wirkliche" Unterstreichung, der Text selbst hat überhaupt keine Unterstreichung. Sie wird mit einem Rahmen simuliert und dieser ist unabhängig vom Text.

Mehr zum HTML-Befehl span ist in der HTML Referenz bei <span> genau beschrieben.

Wechsel der Hintergrundfarbe bei Hover bei Tag a

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

Die Hintergrundfarbe soll sich von Farbe gray216 auf Farbe gray72 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Darstellung von <a> in Farbe gray216 vor.

Hier legen wir bei <a> die Hintergrundfarbe auf Farbe gray216 fest. Zwar verändern wir die Textfarbe nicht, ändern jedoch die Schriftart auf arial. Die Schriftgröße verkleinern wir auf 90%.

<style type="text/css"><!--
  a { 
    font-family:arial; 
    background-color:gray216; 
    font-size:90%;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Mausberührung die Hintergrundfarbe auf gray72 ändert.

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

Mehr zum Thema a können Sie in Verweise und Protokolle in HTML nachlesen. Möglichkeiten des Tag a erfahren Sie in der HTML Referenz unter <a>.