Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #979797 und Farbe gray244

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 #979797			Schriftfarbe gray244
Detail	:	Hintergrund #979797	Detail	:	Schrift gray244
Farbwert	:	#979797	Farbe	:	gray244
Farbe	:	gray151	Farbwert	:	#f4f4f4
HTML	:	#979797	HTML	:	gray244
HTML (Wert)	:	#979797	HTML (Wert)	:	#f4f4f4
CSS	:	#979797	CSS	:	gray244
CSS (Wert)	:	#979797	CSS (Wert)	:	#f4f4f4
CSS (kürzest)	:	#979797	CSS (kürzest)	:	#f4f4f4
CSS (RGB)	:	rgb(151,151,151)	CSS (RGB)	:	rgb(244,244,244)
CSS (%RGB)	:	rgb(59%,59%,59%)	CSS (%RGB)	:	rgb(95%,95%,95%)

Verlauf Hintergrundfarbwert #979797 nach Schriftfarbe gray244
#979797	#a4a4a4	#b1b1b1	#bebebe	#cccccc	#d9d9d9	#e6e6e6	#f4f4f4
#979797	#a4a4a4	#b1b1b1	#bebebe	#cccccc	#d9d9d9	#e6e6e6	#f4f4f4

Kombination von #979797 und gray244
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna.				gray244 eignet sich nicht als Schriftfarbe auf Hintergrund #979797, da sich sowohl Helligkeit als auch die Farben zu ähnlich sind. Die Ähnlichkeit der Farben gray244 und #979797 beträgt 87.35%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 12.65%.

Hintergrundfarbwert #979797				Schriftfarbe gray244
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#979797	#979797	#979797	#979797	#f4f4f4	#f4f4f4	#f4f4f4	#f4f4f4
#a5a5a5	#a5a5a5	#818181	#818181	#f5f5f5	#f5f5f5	#d1d1d1	#d1d1d1
#b4b4b4	#b4b4b4	#6b6b6b	#6b6b6b	#f7f7f7	#f7f7f7	#aeaeae	#aeaeae
#c3c3c3	#c3c3c3	#565656	#565656	#f8f8f8	#f8f8f8	#8b8b8b	#8b8b8b
#d2d2d2	#d2d2d2	#404040	#404040	#fafafa	#fafafa	#686868	#686868
#e1e1e1	#e1e1e1	#2b2b2b	#2b2b2b	#fbfbfb	#fbfbfb	#454545	#454545
#f0f0f0	#f0f0f0	#151515	#151515	#fdfdfd	#fdfdfd	#222222	#222222
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #979797 und Farbe gray244

Wechsel der Textfarbe bei Hover bei Tag acronym

Die Textfarbe soll sich von Farbwert #979797 auf Farbe gray244 ändern, wenn man mit der Maus auf <acronym> zeigt. Wir bereiten zunächst eine Formatierung von <acronym> in Farbwert #979797 vor.

Als Beispiel legen wir Farbwert #979797 als Textfarbe von <acronym> fest und verkleinern die Größe der Schrift auf 86%:

<style type="text/css"><!--
  acronym { 
    font-size: 86%; 
    color: #979797;
  }
//-->
</style>

Nun fordern wir, dass bei Mausberührung die Textfarbe auf gray244 gesetzt wird.

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

Einzelheiten des Befehl acronym erfahren Sie in der HTML Referenz unter <acronym>.

Hintergrund/Text-Kombination bei HTML-Tag h1

Eine Überschrift der 1. Stufe setzt man mit HTML-Tag <h1>. Diese kann hervorgehoben und farblich gestaltet werden.

Hier ändern wir die Textfarbe von <h1> auf Farbe gray244 und die Hintergrundfarbe von <h1> auf Farbwert #979797. Als Schriftart setzen wir verdana. Die Schriftgröße vergrößern wir auf 115%.

<style type="text/css"><!--
  h1 { 
    font-family:verdana; 
    color:gray244; 
    background-color:#979797; 
    font-size:115%;
  }
//-->
</style>

Mehr zu h1 können Sie in Grundlegende Gestaltungselemente in HTML nachlesen. Einzelheiten des hier verwendeten HTML-Tag <h1>.