Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray8 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 gray8			Schriftfarbe gray72
Detail	:	Hintergrund gray8	Detail	:	Schrift gray72
Farbe	:	gray8	Farbe	:	gray72
Farbwert	:	#080808	Farbwert	:	#484848
HTML	:	gray8	HTML	:	gray72
HTML (Wert)	:	#080808	HTML (Wert)	:	#484848
CSS	:	gray8	CSS	:	gray72
CSS (Wert)	:	#080808	CSS (Wert)	:	#484848
CSS (kürzest)	:	#080808	CSS (kürzest)	:	#484848
CSS (RGB)	:	rgb(8,8,8)	CSS (RGB)	:	rgb(72,72,72)
CSS (%RGB)	:	rgb(3%,3%,3%)	CSS (%RGB)	:	rgb(28%,28%,28%)

Verlauf Hintergrundfarbe gray8 nach Schriftfarbe gray72
#080808	#111111	#1a1a1a	#232323	#2c2c2c	#353535	#3e3e3e	#484848
#080808	#111111	#1a1a1a	#232323	#2c2c2c	#353535	#3e3e3e	#484848

Kombination von gray8 und gray72
Cras vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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.				Die Ähnlichkeit von gray72 und gray8 ergibt sich zu 89.57%. Die Lesbarkeit dieser Kombination ergibt sich zu 10.43%. Auf Hintergrund gray8 ist gray72 ungeeignet. Weder der Helligkeitsunterschied noch der Farbunterschied sind gross genug.

Hintergrundfarbe gray8				Schriftfarbe gray72
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#080808	#080808	#080808	#080808	#484848	#484848	#484848	#484848
#2b2b2b	#2b2b2b	#060606	#060606	#626262	#626262	#3d3d3d	#3d3d3d
#4e4e4e	#4e4e4e	#050505	#050505	#7c7c7c	#7c7c7c	#333333	#333333
#717171	#717171	#040404	#040404	#969696	#969696	#292929	#292929
#959595	#959595	#030303	#030303	#b0b0b0	#b0b0b0	#1e1e1e	#1e1e1e
#b8b8b8	#b8b8b8	#020202	#020202	#cacaca	#cacaca	#141414	#141414
#dbdbdb	#dbdbdb	#010101	#010101	#e4e4e4	#e4e4e4	#0a0a0a	#0a0a0a
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray8 und Farbe gray72

Wechsel der Unterstreichung bei Hover mit Tag a

Mit HTML-Befehl <a> erzeugen Sie einen Verweis. Dieser kann farblich gestaltet werden.

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

In diesem Beispiel unterstreichen wir <a> mit Hilfe eines gestrichelten Rahmens mit 1 Pixel Dicke in Farbe gray8.

<style type="text/css"><!--
  a { border-bottom:1px dashed gray8; }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Berührung mit der Maus die Unterstreichungsfarbe auf gray72 ändert.

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

Die Idee ist hierbei, unabhängige Formatierungen für Inhalt und Unterstreichung zu verwenden. Manchmal sehen Sie dies bei Verweisen. Der Text wird in einer Farbe dargestellt. Die Unterstreichung in einer anderen. Hierbei handelt es sich aber nicht um eine "wirkliche" Unterstreichung, der Text selbst hat überhaupt keine Unterstreichung. Sie wird mit einem Rahmen simuliert und dieser ist unabhängig vom Text.

Mehr zu a können Sie in Verweise und Protokolle in HTML lesen. Einzelheiten vom HTML-Tag a sind in der HTML Referenz bei <a> zusammengestellt.

Hintergrund/Text-Kombination mit HTML-Tag q

Wir ändern für dieses Beispiel die Textfarbe von <q> auf Farbe gray72 und die Hintergrundfarbe von <q> auf Farbe gray8. Als Schriftart setzen wir verdana. Als Schriftgröße wählen wir 13px.

<style type="text/css"><!--
  q { 
    font-size: 13px; 
    background-color: gray8; 
    color: gray72; 
    font-family: verdana;
  }
//-->
</style>

Die Beschreibung vom hier gezeigten HTML-Befehl q lesen Sie in der HTML Referenz unter <q>.