Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray88 und Farbe gray232

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).

Hintergrundfarbe gray88			Schriftfarbe gray232
Detail	:	Hintergrund gray88	Detail	:	Schrift gray232
Farbe	:	gray88	Farbe	:	gray232
Farbwert	:	#585858	Farbwert	:	#e8e8e8
HTML	:	gray88	HTML	:	gray232
HTML (Wert)	:	#585858	HTML (Wert)	:	#e8e8e8
CSS	:	gray88	CSS	:	gray232
CSS (Wert)	:	#585858	CSS (Wert)	:	#e8e8e8
CSS (kürzest)	:	#585858	CSS (kürzest)	:	#e8e8e8
CSS (RGB)	:	rgb(88,88,88)	CSS (RGB)	:	rgb(232,232,232)
CSS (%RGB)	:	rgb(34%,34%,34%)	CSS (%RGB)	:	rgb(90%,90%,90%)

Verlauf Hintergrundfarbe gray88 nach Schriftfarbe gray232
#585858	#6c6c6c	#818181	#959595	#aaaaaa	#bebebe	#d3d3d3	#e8e8e8
#585858	#6c6c6c	#818181	#959595	#aaaaaa	#bebebe	#d3d3d3	#e8e8e8

Kombination von gray88 und gray232
Cras vestibulum tristique erat, ac interdum justo cursus in. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante.				gray232 eignet sich nicht als Schriftfarbe auf Hintergrund gray88, da der Unterschied in den Farben nicht ausreichend ist Die Ähnlichkeit von gray232 und gray88 beträgt 72.35%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 27.65%.

Hintergrundfarbe gray88				Schriftfarbe gray232
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#585858	#585858	#585858	#585858	#e8e8e8	#e8e8e8	#e8e8e8	#e8e8e8
#6f6f6f	#6f6f6f	#4b4b4b	#4b4b4b	#ebebeb	#ebebeb	#c6c6c6	#c6c6c6
#878787	#878787	#3e3e3e	#3e3e3e	#eeeeee	#eeeeee	#a5a5a5	#a5a5a5
#9f9f9f	#9f9f9f	#323232	#323232	#f1f1f1	#f1f1f1	#848484	#848484
#b7b7b7	#b7b7b7	#252525	#252525	#f5f5f5	#f5f5f5	#636363	#636363
#cfcfcf	#cfcfcf	#191919	#191919	#f8f8f8	#f8f8f8	#424242	#424242
#e7e7e7	#e7e7e7	#0c0c0c	#0c0c0c	#fbfbfb	#fbfbfb	#212121	#212121
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray88 und Farbe gray232

Wechsel der Hintergrundfarbe bei Hover mit HTML-Befehl p

Die Hintergrundfarbe soll sich von Farbe gray88 auf Farbe gray232 ändern, wenn man mit der Maus auf <p> zeigt. Wir bereiten zunächst eine Darstellung von <p> in Farbe gray88 vor.

Für dieses Beispiel setzen wir bei <p> die Hintergrundfarbe auf Farbe gray88. Zwar lassen wir die Textfarbe unverändert, setzen jedoch die Schriftart auf monospace:

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

Nun fordern wir, dass sich bei Berührung mit der Maus die Hintergrundfarbe auf gray232 ändert.

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

Mehr zum Thema erfahren Sie in Grundlegende Gestaltungselemente in HTML. Möglichkeiten des hier verwendeten HTML-Tag p erfahren Sie in der HTML Referenz unter <p>.

Wechsel der Umrandung bei Hover von Tag center

Die Rahmenfarbe soll sich von Farbe gray88 auf Farbe gray232 ändern, wenn man mit der Maus auf <center> zeigt. Wir bereiten zunächst eine Darstellung von <center> in Farbe gray88 vor.

In diesem Beispiel umranden wir <center> mit einem 1 Pixel dicken, doppelten Rahmen in Farbe gray88.

<style type="text/css"><!--
  center { border:1px double gray88; }
//-->
</style>

Jetzt fordern wir, dass sich bei Mausberührung die Rahmenfarbe auf gray232 ändert.

<style type="text/css"><!--
  center:hover { 
    border-color:gray232;
  }
//-->
</style>

Mehr zum Thema center können Sie in Grundlegende Gestaltungselemente in HTML erfahren. Beschreibung des hier verwendeten HTML-Befehl <center>.