Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #f7f7f7 und Farbe gray75

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 #f7f7f7			Schriftfarbe gray75
Detail	:	Hintergrund #f7f7f7	Detail	:	Schrift gray75
Farbwert	:	#f7f7f7	Farbe	:	gray75
Farbe	:	gray247	Farbwert	:	#4b4b4b
HTML	:	#f7f7f7	HTML	:	gray75
HTML (Wert)	:	#f7f7f7	HTML (Wert)	:	#4b4b4b
CSS	:	#f7f7f7	CSS	:	gray75
CSS (Wert)	:	#f7f7f7	CSS (Wert)	:	#4b4b4b
CSS (kürzest)	:	#f7f7f7	CSS (kürzest)	:	#4b4b4b
CSS (RGB)	:	rgb(247,247,247)	CSS (RGB)	:	rgb(75,75,75)
CSS (%RGB)	:	rgb(96%,96%,96%)	CSS (%RGB)	:	rgb(29%,29%,29%)

Verlauf Hintergrundfarbwert #f7f7f7 nach Schriftfarbe gray75
#f7f7f7	#dedede	#c5c5c5	#adadad	#949494	#7c7c7c	#636363	#4b4b4b
#f7f7f7	#dedede	#c5c5c5	#adadad	#949494	#7c7c7c	#636363	#4b4b4b

Kombination von #f7f7f7 und gray75
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna.				gray75 eignet sich als Schriftfarbe auf Hintergrund #f7f7f7, da Helligkeitsunterschied und Farbenunterschied in Ordnung sind. Die Ähnlichkeit von gray75 und #f7f7f7 ergibt sich zu 61.22%. Die Lesbarkeit dieser Kombination ergibt sich zu 38.78%.

Hintergrundfarbwert #f7f7f7				Schriftfarbe gray75
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#f7f7f7	#f7f7f7	#f7f7f7	#f7f7f7	#4b4b4b	#4b4b4b	#4b4b4b	#4b4b4b
#f8f8f8	#f8f8f8	#d3d3d3	#d3d3d3	#646464	#646464	#404040	#404040
#f9f9f9	#f9f9f9	#b0b0b0	#b0b0b0	#7e7e7e	#7e7e7e	#353535	#353535
#fafafa	#fafafa	#8d8d8d	#8d8d8d	#989898	#989898	#2a2a2a	#2a2a2a
#fbfbfb	#fbfbfb	#696969	#696969	#b1b1b1	#b1b1b1	#202020	#202020
#fcfcfc	#fcfcfc	#464646	#464646	#cbcbcb	#cbcbcb	#151515	#151515
#fdfdfd	#fdfdfd	#232323	#232323	#e5e5e5	#e5e5e5	#0a0a0a	#0a0a0a
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #f7f7f7 und Farbe gray75

Wechsel der Textfarbe bei Hover mit Tag h4

Mit Befehl <h4> wird eine Überschrift der 4. Stufe erzeugt. Diese kann man farblich gestalten und hervorheben.

Die Textfarbe soll sich von Farbwert #f7f7f7 auf Farbe gray75 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Darstellung von <h4> in Farbwert #f7f7f7 vor.

Als Beispiel legen wir die Textfarbe von <h4> auf Farbwert #f7f7f7 fest. Zwar lassen wir die Hintergrundfarbe unverändert, setzen jedoch die Schriftart auf verdana:

<style type="text/css"><!--
  h4 { 
    color:#f7f7f7; 
    font-family:verdana;
  }
//-->
</style>

Nun stellen wir ein, dass bei Hover die Textfarbe auf gray75 geändert wird.

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

Weiteres zum Thema h4 können Sie in Grundlegende Gestaltungselemente in HTML erfahren. Einzelheiten des HTML-Tag h4 erfahren Sie in der HTML Referenz unter <h4>.

Hintergrund/Text-Kombination bei Befehl dd

Hier ändern wir die Textfarbe von <dd> auf Farbe gray75 und die Hintergrundfarbe von <dd> auf Farbwert #f7f7f7. Als Schriftart setzen wir arial. Als Schriftgröße entscheiden wir uns für 13px.

<style type="text/css"><!--
  dd { 
    color:gray75; 
    font-family:arial; 
    font-size:13px; 
    background-color:#f7f7f7;
  }
//-->
</style>

Mehr zum Thema dd lesen Sie in Listen und Glossare in HTML. Beschreibung vom HTML-Befehl <dd>.