Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #f8f8f8 und Farbwert #373737

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).

Hintergrundfarbwert #f8f8f8			Schriftfarbwert #373737
Detail	:	Hintergrund #f8f8f8	Detail	:	Schrift #373737
Farbwert	:	#f8f8f8	Farbwert	:	#373737
Farbe	:	gray248	Farbe	:	gray55
HTML	:	#f8f8f8	HTML	:	#373737
HTML (Wert)	:	#f8f8f8	HTML (Wert)	:	#373737
CSS	:	#f8f8f8	CSS	:	#373737
CSS (Wert)	:	#f8f8f8	CSS (Wert)	:	#373737
CSS (kürzest)	:	#f8f8f8	CSS (kürzest)	:	#373737
CSS (RGB)	:	rgb(248,248,248)	CSS (RGB)	:	rgb(55,55,55)
CSS (%RGB)	:	rgb(97%,97%,97%)	CSS (%RGB)	:	rgb(21%,21%,21%)

Verlauf Hintergrundfarbwert #f8f8f8 nach Schriftfarbwert #373737
#f8f8f8	#dcdcdc	#c0c0c0	#a5a5a5	#898989	#6e6e6e	#525252	#373737
#f8f8f8	#dcdcdc	#c0c0c0	#a5a5a5	#898989	#6e6e6e	#525252	#373737

Kombination von #f8f8f8 und #373737
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Cras id velit ante.				#373737 eignet sich als Schriftfarbe auf Hintergrund #f8f8f8. Die Unterschiede in Helligkeit und Farbe sind ok. Die Ähnlichkeit der Farben #373737 und #f8f8f8 ergibt sich zu 46.62%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 53.38%.

Hintergrundfarbwert #f8f8f8				Schriftfarbwert #373737
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#f8f8f8	#f8f8f8	#f8f8f8	#f8f8f8	#373737	#373737	#373737	#373737
#f9f9f9	#f9f9f9	#d4d4d4	#d4d4d4	#535353	#535353	#2f2f2f	#2f2f2f
#fafafa	#fafafa	#b1b1b1	#b1b1b1	#707070	#707070	#272727	#272727
#fbfbfb	#fbfbfb	#8d8d8d	#8d8d8d	#8c8c8c	#8c8c8c	#1f1f1f	#1f1f1f
#fcfcfc	#fcfcfc	#6a6a6a	#6a6a6a	#a9a9a9	#a9a9a9	#171717	#171717
#fdfdfd	#fdfdfd	#464646	#464646	#c5c5c5	#c5c5c5	#0f0f0f	#0f0f0f
#fefefe	#fefefe	#232323	#232323	#e2e2e2	#e2e2e2	#070707	#070707
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #f8f8f8 und Farbwert #373737

Wechsel der Hintergrundfarbe bei Hover von HTML-Tag del

Die Hintergrundfarbe soll sich von Farbwert #f8f8f8 auf Farbwert #373737 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Formatierung von <del> in Farbwert #f8f8f8 vor.

Zum Beispiel legen wir Farbwert #f8f8f8 als Hintergrundfarbe von <del> fest. Die Textfarbe behalten wir bei. Die Schriftart ändern wir auf sans-serif.

<style type="text/css"><!--
  del { 
    font-family:sans-serif; 
    background-color:#f8f8f8;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Hover die Hintergrundfarbe auf #373737 ändert.

<style type="text/css"><!--
  del:hover { 
    background-color:#373737;
  }
//-->
</style>

Der hier gezeigte HTML-Befehl del ist in der HTML Referenz bei <del> gezeigt.

Füllen und Umranden bei Tag h6

Mit HTML-Tag <h6> wird eine Überschrift gesetzt und kann hervorgehoben und farblich gestaltet werden.

Hier umranden wir <h6> mit einem . Die Hintergrundfarbe für <h6> setzen wir auf Farbwert #f8f8f8. Mit HTML ist dies kaum möglich. Deshalb nutzen wir hierfür CSS.

<style type="text/css"><!--
  h6 { 
    border-color:#373737; 
    background-color:#f8f8f8; 
    border-style:ridge; 
    border-width:3pt;
  }
//-->
</style>

Mehr zu h6 lesen Sie in Grundlegende Gestaltungselemente in HTML. Der hier genutzte HTML-Tag h6 ist in der HTML Referenz bei <h6> genau zusammengestellt.