Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #c2c2c2 und Farbe gray69

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 #c2c2c2			Schriftfarbe gray69
Detail	:	Hintergrund #c2c2c2	Detail	:	Schrift gray69
Farbwert	:	#c2c2c2	Farbe	:	gray69
Farbe	:	gray194	Farbwert	:	#454545
HTML	:	#c2c2c2	HTML	:	gray69
HTML (Wert)	:	#c2c2c2	HTML (Wert)	:	#454545
CSS	:	#c2c2c2	CSS	:	gray69
CSS (Wert)	:	#c2c2c2	CSS (Wert)	:	#454545
CSS (kürzest)	:	#c2c2c2	CSS (kürzest)	:	#454545
CSS (RGB)	:	rgb(194,194,194)	CSS (RGB)	:	rgb(69,69,69)
CSS (%RGB)	:	rgb(76%,76%,76%)	CSS (%RGB)	:	rgb(27%,27%,27%)

Verlauf Hintergrundfarbwert #c2c2c2 nach Schriftfarbe gray69
#c2c2c2	#b0b0b0	#9e9e9e	#8c8c8c	#7a7a7a	#686868	#565656	#454545
#c2c2c2	#b0b0b0	#9e9e9e	#8c8c8c	#7a7a7a	#686868	#565656	#454545

Kombination von #c2c2c2 und gray69
Cras vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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.				gray69 ist nicht als Schriftfarbe auf Hintergrund #c2c2c2 geeignet, weil sich die Helligkeit und Farben zu ähnlich sind. Die Ähnlichkeit von gray69 und #c2c2c2 beträgt 74.37%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 25.63%.

Hintergrundfarbwert #c2c2c2				Schriftfarbe gray69
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#c2c2c2	#c2c2c2	#c2c2c2	#c2c2c2	#454545	#454545	#454545	#454545
#cacaca	#cacaca	#a6a6a6	#a6a6a6	#5f5f5f	#5f5f5f	#3b3b3b	#3b3b3b
#d3d3d3	#d3d3d3	#8a8a8a	#8a8a8a	#7a7a7a	#7a7a7a	#313131	#313131
#dcdcdc	#dcdcdc	#6e6e6e	#6e6e6e	#949494	#949494	#272727	#272727
#e4e4e4	#e4e4e4	#535353	#535353	#afafaf	#afafaf	#1d1d1d	#1d1d1d
#ededed	#ededed	#373737	#373737	#c9c9c9	#c9c9c9	#131313	#131313
#f6f6f6	#f6f6f6	#1b1b1b	#1b1b1b	#e4e4e4	#e4e4e4	#090909	#090909
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #c2c2c2 und Farbe gray69

Wechsel der Textfarbe bei Hover bei HTML-Befehl address

Die Textfarbe soll sich von Farbwert #c2c2c2 auf Farbe gray69 ändern, wenn man mit der Maus auf <address> zeigt. Bereiten wir zunächst eine Darstellung von <address> in Farbwert #c2c2c2 vor.

Als Beispiel legen wir bei <address> die Textfarbe auf Farbwert #c2c2c2 fest. Zwar lassen wir die Hintergrundfarbe unverändert, setzen jedoch die Schriftart auf sans-serif. Die Schriftgröße setzen wir auf 14px.

<style type="text/css"><!--
  address { 
    color: #c2c2c2; 
    font-size: 14px; 
    font-family: sans-serif;
  }
//-->
</style>

Nun fordern wir, dass bei Hover die Textfarbe auf gray69 geändert wird.

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

Weiteres zum Thema address erfahren Sie in Blockorientierte Elemente in HTML. Die Beschreibung vom HTML-Tag address erfahren Sie in der HTML Referenz unter <address>.

Hintergrund/Text-Kombination mit Tag h1

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

Wir ändern hier die Textfarbe von <h1> auf Farbe gray69 und die Hintergrundfarbe von <h1> auf Farbwert #c2c2c2. Die Schriftart ändern wir auf courier new und setzen die Schriftgröße auf 113%.

<style type="text/css"><!--
  h1 { 
    color: gray69; 
    font-family: courier new; 
    font-size: 113%; 
    background-color: #c2c2c2;
  }
//-->
</style>

Mehr zum Thema h1 erfahren Sie in Grundlegende Gestaltungselemente in HTML. Die Beschreibung des hier verwendeten HTML-Tag h1 lesen Sie in der HTML Referenz unter <h1>.