Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #f1f1f1 und Farbe gray40

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 #f1f1f1			Schriftfarbe gray40
Detail	:	Hintergrund #f1f1f1	Detail	:	Schrift gray40
Farbwert	:	#f1f1f1	Farbe	:	gray40
Farbe	:	gray241	Farbwert	:	#282828
HTML	:	#f1f1f1	HTML	:	gray40
HTML (Wert)	:	#f1f1f1	HTML (Wert)	:	#282828
CSS	:	#f1f1f1	CSS	:	gray40
CSS (Wert)	:	#f1f1f1	CSS (Wert)	:	#282828
CSS (kürzest)	:	#f1f1f1	CSS (kürzest)	:	#282828
CSS (RGB)	:	rgb(241,241,241)	CSS (RGB)	:	rgb(40,40,40)
CSS (%RGB)	:	rgb(94%,94%,94%)	CSS (%RGB)	:	rgb(15%,15%,15%)

Verlauf Hintergrundfarbwert #f1f1f1 nach Schriftfarbe gray40
#f1f1f1	#d4d4d4	#b7b7b7	#9a9a9a	#7e7e7e	#616161	#444444	#282828
#f1f1f1	#d4d4d4	#b7b7b7	#9a9a9a	#7e7e7e	#616161	#444444	#282828

Kombination von #f1f1f1 und gray40
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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Die Ähnlichkeit von gray40 und #f1f1f1 ergibt sich zu 37.84%. Die Lesbarkeit dieser Farbkombination liegt damit bei 62.16%. gray40 eignet sich als Schriftfarbe auf Hintergrund #f1f1f1. Die Unterschiede in Helligkeit und Farbe sind gut.

Hintergrundfarbwert #f1f1f1				Schriftfarbe gray40
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#f1f1f1	#f1f1f1	#f1f1f1	#f1f1f1	#282828	#282828	#282828	#282828
#f3f3f3	#f3f3f3	#cecece	#cecece	#464646	#464646	#222222	#222222
#f5f5f5	#f5f5f5	#acacac	#acacac	#656565	#656565	#1c1c1c	#1c1c1c
#f7f7f7	#f7f7f7	#898989	#898989	#848484	#848484	#161616	#161616
#f9f9f9	#f9f9f9	#676767	#676767	#a2a2a2	#a2a2a2	#111111	#111111
#fbfbfb	#fbfbfb	#444444	#444444	#c1c1c1	#c1c1c1	#0b0b0b	#0b0b0b
#fdfdfd	#fdfdfd	#222222	#222222	#e0e0e0	#e0e0e0	#050505	#050505
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #f1f1f1 und Farbe gray40

Füllen und Umranden bei HTML-Tag dd

Für dieses Beispiel umranden wir <dd> mit einem herausstehenden, 3 Punkte dicken Rahmen in Farbe gray40 . Den Hintergrund von <dd> setzen wir auf Farbwert #f1f1f1. Das ist in HTML so kaum möglich. Deshalb nutzen wir CSS zur Formatierung.

<style type="text/css"><!--
  dd { 
    border-style: outset; 
    background-color: #f1f1f1; 
    border-width: 3pt; 
    border-color: gray40;
  }
//-->
</style>

Mehr zu dd erfahren Sie in Listen und Glossare in HTML. Einzelheiten des hier gezeigten HTML-Befehl <dd>.

Wechsel der Hintergrundfarbe bei Hover von HTML-Tag h4

Eine Überschrift erzeugen Sie mit HTML-Befehl <h4>. Diese kann farblich gestaltet und hervorgehoben werden.

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

Wir legen z.B. Farbwert #f1f1f1 als Hintergrundfarbe von <h4> fest. Die Textfarbe behalten wir bei. Die Schriftart ändern wir auf monospace.

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

Nun stellen wir ein, dass sich bei Berührung mit der Maus die Hintergrundfarbe auf gray40 ändert.

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

Weiteres zum Thema h4 können Sie in Grundlegende Gestaltungselemente in HTML erfahren. Der hier verwendete HTML-Befehl h4 ist in der HTML Referenz bei <h4> ausführlich beschrieben.