Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray30 und Farbe gray16

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 gray30			Schriftfarbe gray16
Detail	:	Hintergrund gray30	Detail	:	Schrift gray16
Farbe	:	gray30	Farbe	:	gray16
Farbwert	:	#1e1e1e	Farbwert	:	#101010
HTML	:	gray30	HTML	:	gray16
HTML (Wert)	:	#1e1e1e	HTML (Wert)	:	#101010
CSS	:	gray30	CSS	:	gray16
CSS (Wert)	:	#1e1e1e	CSS (Wert)	:	#101010
CSS (kürzest)	:	#1e1e1e	CSS (kürzest)	:	#101010
CSS (RGB)	:	rgb(30,30,30)	CSS (RGB)	:	rgb(16,16,16)
CSS (%RGB)	:	rgb(11%,11%,11%)	CSS (%RGB)	:	rgb(6%,6%,6%)

Verlauf Hintergrundfarbe gray30 nach Schriftfarbe gray16
#1e1e1e	#1c1c1c	#1a1a1a	#181818	#161616	#141414	#121212	#101010
#1e1e1e	#1c1c1c	#1a1a1a	#181818	#161616	#141414	#121212	#101010

Kombination von gray30 und gray16
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 vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante.				Die Ähnlichkeit von gray16 und gray30 beträgt 94.56%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 5.44%. Auf Hintergrund gray30 ist gray16 ungeeignet, da sowohl Helligkeit als auch die Farben zu ähnlich sind.

Hintergrundfarbe gray30				Schriftfarbe gray16
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#1e1e1e	#1e1e1e	#1e1e1e	#1e1e1e	#101010	#101010	#101010	#101010
#3e3e3e	#3e3e3e	#191919	#191919	#323232	#323232	#0d0d0d	#0d0d0d
#5e5e5e	#5e5e5e	#151515	#151515	#545454	#545454	#0b0b0b	#0b0b0b
#7e7e7e	#7e7e7e	#111111	#111111	#767676	#767676	#090909	#090909
#9e9e9e	#9e9e9e	#0c0c0c	#0c0c0c	#989898	#989898	#060606	#060606
#bebebe	#bebebe	#080808	#080808	#bababa	#bababa	#040404	#040404
#dedede	#dedede	#040404	#040404	#dcdcdc	#dcdcdc	#020202	#020202
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray30 und Farbe gray16

Füllen und Umranden bei Befehl div

Einen Universalkontainer erzeugen Sie mit HTML-Tag <div>. Dieser kann farblich gestaltet und hervorgehoben werden.

Hier umranden wir <div> mit einem 5 Pixel dicken, doppelten Rahmen in Farbe gray16 . Den Hintergrund von <div> setzen wir entsprechend auf Farbe gray30. Mit HTML ist dies nicht machbar. Wir verwenden daher CSS zur Formatierung.

<style type="text/css"><!--
  div { border:5px double gray16; background-color:gray30; }
//-->
</style>

Die Beschreibung des hier genutzten Tag div lesen Sie in der HTML Referenz unter <div>.

Wechsel der Textfarbe bei Hover bei Befehl a

Mit Befehl <a> wird ein Verweis erzeugt. Dieser kann farblich gestaltet und hervorgehoben werden.

Die Textfarbe soll sich von Farbe gray30 auf Farbe gray16 ändern, wenn man mit der Maus auf <a> zeigt. Bereiten wir zunächst eine Darstellung von <a> in Farbe gray30 vor.

Als Beispiel setzen wir die Textfarbe von <a> auf Farbe gray30. Die Hintergrundfarbe behalten wir bei, ändern jedoch die Schriftart auf verdana:

<style type="text/css"><!--
  a { 
    font-family: verdana; 
    color: gray30;
  }
//-->
</style>

Jetzt fordern wir, dass bei Hover die Textfarbe auf gray16 geändert wird.

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

Mehr zum Thema können Sie in Verweise und Protokolle in HTML lesen. Weiteres zum HTML-Tag <a>.