Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray90 und Farbe gray31

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 gray90			Schriftfarbe gray31
Detail	:	Hintergrund gray90	Detail	:	Schrift gray31
Farbe	:	gray90	Farbe	:	gray31
Farbwert	:	#5a5a5a	Farbwert	:	#1f1f1f
HTML	:	gray90	HTML	:	gray31
HTML (Wert)	:	#5a5a5a	HTML (Wert)	:	#1f1f1f
CSS	:	gray90	CSS	:	gray31
CSS (Wert)	:	#5a5a5a	CSS (Wert)	:	#1f1f1f
CSS (kürzest)	:	#5a5a5a	CSS (kürzest)	:	#1f1f1f
CSS (RGB)	:	rgb(90,90,90)	CSS (RGB)	:	rgb(31,31,31)
CSS (%RGB)	:	rgb(35%,35%,35%)	CSS (%RGB)	:	rgb(12%,12%,12%)

Verlauf Hintergrundfarbe gray90 nach Schriftfarbe gray31
#5a5a5a	#515151	#494949	#404040	#383838	#2f2f2f	#272727	#1f1f1f
#5a5a5a	#515151	#494949	#404040	#383838	#2f2f2f	#272727	#1f1f1f

Kombination von gray90 und gray31
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna.				Die Ähnlichkeit der Farben gray31 und gray90 beträgt 88.62%. Die Lesbarkeit dieser Farbkombination liegt damit bei 11.38%. Auf Hintergrund gray90 ist gray31 ungeeignet. Die Unterschiede in der Helligkeit und Farbe sind nicht ausreichend.

Hintergrundfarbe gray90				Schriftfarbe gray31
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#5a5a5a	#5a5a5a	#5a5a5a	#5a5a5a	#1f1f1f	#1f1f1f	#1f1f1f	#1f1f1f
#717171	#717171	#4d4d4d	#4d4d4d	#3f3f3f	#3f3f3f	#1a1a1a	#1a1a1a
#898989	#898989	#404040	#404040	#5f5f5f	#5f5f5f	#161616	#161616
#a0a0a0	#a0a0a0	#333333	#333333	#7f7f7f	#7f7f7f	#111111	#111111
#b8b8b8	#b8b8b8	#262626	#262626	#9f9f9f	#9f9f9f	#0d0d0d	#0d0d0d
#cfcfcf	#cfcfcf	#191919	#191919	#bfbfbf	#bfbfbf	#080808	#080808
#e7e7e7	#e7e7e7	#0c0c0c	#0c0c0c	#dfdfdf	#dfdfdf	#040404	#040404
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray90 und Farbe gray31

Füllen und Umranden mit HTML-Tag pre

Hier umranden wir <pre> mit einem . Den Hintergrund von <pre> färben wir mit Farbe gray90. Das ist mit HTML kaum möglich. Deshalb formatieren wir mit CSS.

<style type="text/css"><!--
  pre { border:1px ridge gray31; background-color:gray90; }
//-->
</style>

Weiteres zum Thema können Sie in Blockorientierte Elemente in HTML lesen. Einzelheiten des hier genutzten HTML-Tag pre sind in der HTML Referenz bei <pre> genau beschrieben.

Wechsel der Textfarbe bei Hover bei Befehl option

Die Textfarbe soll sich von Farbe gray90 auf Farbe gray31 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Formatierung von <option> in Farbe gray90 vor.

Wir legen als Beispiel bei <option> die Textfarbe auf Farbe gray90 fest. Zwar verändern wir die Hintergrundfarbe nicht, setzen jedoch die Schriftart auf arial:

<style type="text/css"><!--
  option { 
    color: gray90; 
    font-family: arial;
  }
//-->
</style>

Nun stellen wir ein, dass bei Berührung mit der Maus die Textfarbe auf gray31 gesetzt wird.

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

Mehr zu option können Sie in Formulare in HTML lesen. Weiteres zum Befehl option ist in der HTML Referenz bei <option> genau zusammengestellt.