Ressourcen: 16 Graustufen in HTML - Kombination von Farbwert #eeeeee und Farbwert #555555

Graustufen enthalten insbesondere die unbunten Grundfarben Schwarz und Weiß.

Um 16 Graustufen in HTML bzw. CSS zu erzeugen, wählen wir Farbwerte rr, gg und bb mit Werten von 0 bis 15 (d.h. hexadezimal 0 bis f) für r, g und b.

Hintergrundfarbwert #eeeeee			Schriftfarbwert #555555
Detail	:	Hintergrund #eeeeee	Detail	:	Schrift #555555
Farbwert	:	#eeeeee	Farbwert	:	#555555
Farbe	:	gray238	Farbe	:	gray85
HTML	:	#eeeeee	HTML	:	#555555
HTML (Wert)	:	#eeeeee	HTML (Wert)	:	#555555
CSS	:	#eeeeee	CSS	:	#555555
CSS (Wert)	:	#eeeeee	CSS (Wert)	:	#555555
CSS (kürzest)	:	#eee	CSS (kürzest)	:	#555
CSS (RGB)	:	rgb(238,238,238)	CSS (RGB)	:	rgb(85,85,85)
CSS (%RGB)	:	rgb(93%,93%,93%)	CSS (%RGB)	:	rgb(33%,33%,33%)

Verlauf Hintergrundfarbwert #eeeeee nach Schriftfarbwert #555555
#eeeeee	#d8d8d8	#c2c2c2	#acacac	#969696	#808080	#6a6a6a	#555555
#eeeeee	#d8d8d8	#c2c2c2	#acacac	#969696	#808080	#6a6a6a	#555555

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

Hintergrundfarbwert #eeeeee				Schriftfarbwert #555555
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#eeeeee	#eeeeee	#eeeeee	#eeeeee	#555555	#555555	#555555	#555555
#f0f0f0	#f0f0f0	#cccccc	#cccccc	#6d6d6d	#6d6d6d	#484848	#484848
#f2f2f2	#f2f2f2	#aaaaaa	#aaaaaa	#858585	#858585	#3c3c3c	#3c3c3c
#f5f5f5	#f5f5f5	#888888	#888888	#9d9d9d	#9d9d9d	#303030	#303030
#f7f7f7	#f7f7f7	#666666	#666666	#b6b6b6	#b6b6b6	#242424	#242424
#fafafa	#fafafa	#444444	#444444	#cecece	#cecece	#181818	#181818
#fcfcfc	#fcfcfc	#222222	#222222	#e6e6e6	#e6e6e6	#0c0c0c	#0c0c0c
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #eeeeee und Farbwert #555555

Füllen und Umranden bei Tag h6

Eine Überschrift der 6. Stufe erzeugen Sie mit Tag <h6>. Diese können Sie farblich gestalten.

Für dieses Beispiel umranden wir <h6> mit einem gezahnten, 5 Pixel dicken Rahmen in Farbwert #555555 . Den Hintergrund von <h6> färben wir entsprechend mit Farbwert #eeeeee. In HTML geht das kaum. Wir nutzen deshalb CSS zur Formatierung.

<style type="text/css"><!--
  h6 { border:5px ridge #555; background-color:#eeeeee; }
//-->
</style>

Mehr zum Thema erfahren Sie in Grundlegende Gestaltungselemente in HTML. Die Beschreibung vom HTML-Befehl h6 lesen Sie in der HTML Referenz unter <h6>.

Wechsel der Textfarbe bei Hover von HTML-Tag tr

Die Textfarbe soll sich von Farbwert #eeeeee auf Farbwert #555555 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Darstellung von <tr> in Farbwert #eeeeee vor.

Für dieses Beispiel setzen wir die Textfarbe von <tr> auf Farbwert #eeeeee. Die Hintergrundfarbe lassen wir unverändert. Die Schriftart ändern wir auf arial:

<style type="text/css"><!--
  tr { 
    color: #eeeeee; 
    font-family: arial;
  }
//-->
</style>

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

<style type="text/css"><!--
  tr: hover { 
    color: #555;
  }
//-->
</style>

Mehr zum Thema tr können Sie in Tabellen in HTML erfahren. Die Beschreibung des HTML-Befehl tr finden Sie in der HTML Referenz unter <tr>.