Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray47 und Farbe gray194

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 gray47			Schriftfarbe gray194
Detail	:	Hintergrund gray47	Detail	:	Schrift gray194
Farbe	:	gray47	Farbe	:	gray194
Farbwert	:	#2f2f2f	Farbwert	:	#c2c2c2
HTML	:	gray47	HTML	:	gray194
HTML (Wert)	:	#2f2f2f	HTML (Wert)	:	#c2c2c2
CSS	:	gray47	CSS	:	gray194
CSS (Wert)	:	#2f2f2f	CSS (Wert)	:	#c2c2c2
CSS (kürzest)	:	#2f2f2f	CSS (kürzest)	:	#c2c2c2
CSS (RGB)	:	rgb(47,47,47)	CSS (RGB)	:	rgb(194,194,194)
CSS (%RGB)	:	rgb(18%,18%,18%)	CSS (%RGB)	:	rgb(76%,76%,76%)

Verlauf Hintergrundfarbe gray47 nach Schriftfarbe gray194
#2f2f2f	#444444	#595959	#6e6e6e	#838383	#989898	#adadad	#c2c2c2
#2f2f2f	#444444	#595959	#6e6e6e	#838383	#989898	#adadad	#c2c2c2

Kombination von gray47 und gray194
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. 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.				Die Ähnlichkeit der Farben gray194 und gray47 beträgt 64.21%. Die Lesbarkeit dieser Farbkombination liegt damit bei 35.79%. Auf Hintergrund gray47 ist gray194 ungeeignet. Zwar ist der Helligkeitsunterschied gut, die Farben selbst sind sich jedoch zu ähnlich.

Hintergrundfarbe gray47				Schriftfarbe gray194
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#2f2f2f	#2f2f2f	#2f2f2f	#2f2f2f	#c2c2c2	#c2c2c2	#c2c2c2	#c2c2c2
#4c4c4c	#4c4c4c	#282828	#282828	#cacaca	#cacaca	#a6a6a6	#a6a6a6
#6a6a6a	#6a6a6a	#212121	#212121	#d3d3d3	#d3d3d3	#8a8a8a	#8a8a8a
#888888	#888888	#1a1a1a	#1a1a1a	#dcdcdc	#dcdcdc	#6e6e6e	#6e6e6e
#a5a5a5	#a5a5a5	#141414	#141414	#e4e4e4	#e4e4e4	#535353	#535353
#c3c3c3	#c3c3c3	#0d0d0d	#0d0d0d	#ededed	#ededed	#373737	#373737
#e1e1e1	#e1e1e1	#060606	#060606	#f6f6f6	#f6f6f6	#1b1b1b	#1b1b1b
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiel zur Kombination von Farbe gray47 und Farbe gray194

Wechsel der Textfarbe bei Hover mit Befehl pre

Die Textfarbe soll sich von Farbe gray47 auf Farbe gray194 ändern, wenn man mit der Maus auf <pre> zeigt. Wir bereiten zunächst die Darstellung von <pre> in Farbe gray47 vor.

Als Beispiel legen wir Farbe gray47 als Textfarbe von <pre> fest. Die Hintergrundfarbe lassen wir unverändert, ändern jedoch die Schriftart auf sans-serif. Die Schriftgröße ändern wir auf 11px:

<style type="text/css"><!--
  pre { 
    font-family:sans-serif; 
    color:gray47; 
    font-size:11px;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Berührung mit der Maus die Textfarbe zu gray194 ändert.

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

Mehr zum Thema lesen Sie in Blockorientierte Elemente in HTML. Der HTML-Tag pre ist in der HTML Referenz bei <pre> ausführlich gezeigt.