Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray31 und Farbwert #3d3d3d

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 gray31			Schriftfarbwert #3d3d3d
Detail	:	Hintergrund gray31	Detail	:	Schrift #3d3d3d
Farbe	:	gray31	Farbwert	:	#3d3d3d
Farbwert	:	#1f1f1f	Farbe	:	gray61
HTML	:	gray31	HTML	:	#3d3d3d
HTML (Wert)	:	#1f1f1f	HTML (Wert)	:	#3d3d3d
CSS	:	gray31	CSS	:	#3d3d3d
CSS (Wert)	:	#1f1f1f	CSS (Wert)	:	#3d3d3d
CSS (kürzest)	:	#1f1f1f	CSS (kürzest)	:	#3d3d3d
CSS (RGB)	:	rgb(31,31,31)	CSS (RGB)	:	rgb(61,61,61)
CSS (%RGB)	:	rgb(12%,12%,12%)	CSS (%RGB)	:	rgb(23%,23%,23%)

Verlauf Hintergrundfarbe gray31 nach Schriftfarbwert #3d3d3d
#1f1f1f	#232323	#272727	#2b2b2b	#303030	#343434	#383838	#3d3d3d
#1f1f1f	#232323	#272727	#2b2b2b	#303030	#343434	#383838	#3d3d3d

Kombination von gray31 und #3d3d3d
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. Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Die Ähnlichkeit von #3d3d3d und gray31 ergibt sich zu 92.77%. Die Lesbarkeit dieser Kombination liegt damit bei 7.23%. Auf Hintergrund gray31 ist #3d3d3d ungeeignet, weil weder der Helligkeitsunterschied noch der Farbunterschied ausreichend sind.

Hintergrundfarbe gray31				Schriftfarbwert #3d3d3d
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#1f1f1f	#1f1f1f	#1f1f1f	#1f1f1f	#3d3d3d	#3d3d3d	#3d3d3d	#3d3d3d
#3f3f3f	#3f3f3f	#1a1a1a	#1a1a1a	#585858	#585858	#343434	#343434
#5f5f5f	#5f5f5f	#161616	#161616	#747474	#747474	#2b2b2b	#2b2b2b
#7f7f7f	#7f7f7f	#111111	#111111	#909090	#909090	#222222	#222222
#9f9f9f	#9f9f9f	#0d0d0d	#0d0d0d	#ababab	#ababab	#1a1a1a	#1a1a1a
#bfbfbf	#bfbfbf	#080808	#080808	#c7c7c7	#c7c7c7	#111111	#111111
#dfdfdf	#dfdfdf	#040404	#040404	#e3e3e3	#e3e3e3	#080808	#080808
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray31 und Farbwert #3d3d3d

Wechsel der Textfarbe bei Hover bei Tag legend

Die Textfarbe soll sich von Farbe gray31 auf Farbwert #3d3d3d ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Formatierung von <legend> in Farbe gray31 vor.

Wir legen in diesem Beispiel bei <legend> die Textfarbe auf Farbe gray31 fest:

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

Nun fordern wir, dass sich bei Hover die Textfarbe auf #3d3d3d ändert.

<style type="text/css"><!--
  legend: hover { 
    color: #3d3d3d;
  }
//-->
</style>

Mehr zum Thema finden Sie in Formulare in HTML. Der hier verwendete HTML-Tag legend ist in der HTML Referenz bei <legend> genau zusammengestellt.

Wechsel der Hintergrundfarbe bei Hover von HTML-Tag h4

Eine Überschrift der 4. Stufe wird mit Tag <h4> gesetzt. Diese können Sie farblich gestalten und hervorheben.

Die Hintergrundfarbe soll sich von Farbe gray31 auf Farbwert #3d3d3d ändern, wenn man mit der Maus auf <h4> zeigt. Wir bereiten zunächst eine Formatierung von <h4> in Farbe gray31 vor.

Hier legen wir bei <h4> die Hintergrundfarbe auf Farbe gray31 fest. Zwar behalten wir die Textfarbe bei, setzen jedoch die Schriftart auf sans-serif. Die Schriftgröße verringern wir auf 94%.

<style type="text/css"><!--
  h4 { 
    background-color: gray31; 
    font-family: sans-serif; 
    font-size: 94%;
  }
//-->
</style>

Jetzt fordern wir, dass bei Mausberührung die Hintergrundfarbe auf #3d3d3d gesetzt wird.

<style type="text/css"><!--
  h4: hover { 
    background-color: #3d3d3d;
  }
//-->
</style>

Weiteres zum Thema h4 erfahren Sie in Grundlegende Gestaltungselemente in HTML. Mehr zum hier verwendeten Tag h4 ist in der HTML Referenz unter <h4> beschrieben.