Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #e3e3e3 und Farbe gray168

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 #e3e3e3			Schriftfarbe gray168
Detail	:	Hintergrund #e3e3e3	Detail	:	Schrift gray168
Farbwert	:	#e3e3e3	Farbe	:	gray168
Farbe	:	gray227	Farbwert	:	#a8a8a8
HTML	:	#e3e3e3	HTML	:	gray168
HTML (Wert)	:	#e3e3e3	HTML (Wert)	:	#a8a8a8
CSS	:	#e3e3e3	CSS	:	gray168
CSS (Wert)	:	#e3e3e3	CSS (Wert)	:	#a8a8a8
CSS (kürzest)	:	#e3e3e3	CSS (kürzest)	:	#a8a8a8
CSS (RGB)	:	rgb(227,227,227)	CSS (RGB)	:	rgb(168,168,168)
CSS (%RGB)	:	rgb(89%,89%,89%)	CSS (%RGB)	:	rgb(65%,65%,65%)

Verlauf Hintergrundfarbwert #e3e3e3 nach Schriftfarbe gray168
#e3e3e3	#dadada	#d2d2d2	#c9c9c9	#c1c1c1	#b8b8b8	#b0b0b0	#a8a8a8
#e3e3e3	#dadada	#d2d2d2	#c9c9c9	#c1c1c1	#b8b8b8	#b0b0b0	#a8a8a8

Kombination von #e3e3e3 und gray168
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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				Auf Hintergrund #e3e3e3 ist gray168 ungeeignet. Sowohl Helligkeit als auch die Farben sind sich zu ähnlich. Die Ähnlichkeit von gray168 und #e3e3e3 beträgt 91.18%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 8.82%.

Hintergrundfarbwert #e3e3e3				Schriftfarbe gray168
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#e3e3e3	#e3e3e3	#e3e3e3	#e3e3e3	#a8a8a8	#a8a8a8	#a8a8a8	#a8a8a8
#e7e7e7	#e7e7e7	#c2c2c2	#c2c2c2	#b4b4b4	#b4b4b4	#909090	#909090
#ebebeb	#ebebeb	#a2a2a2	#a2a2a2	#c0c0c0	#c0c0c0	#787878	#787878
#efefef	#efefef	#818181	#818181	#cdcdcd	#cdcdcd	#606060	#606060
#f3f3f3	#f3f3f3	#616161	#616161	#d9d9d9	#d9d9d9	#484848	#484848
#f7f7f7	#f7f7f7	#404040	#404040	#e6e6e6	#e6e6e6	#303030	#303030
#fbfbfb	#fbfbfb	#202020	#202020	#f2f2f2	#f2f2f2	#181818	#181818
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #e3e3e3 und Farbe gray168

Wechsel der Unterstreichung bei Hover mit Tag blockquote

Die Farbe der Unterstreichung soll sich von Farbwert #e3e3e3 auf Farbe gray168 ändern, wenn man mit der Maus auf <blockquote> zeigt. Wir bereiten zunächst eine Formatierung von <blockquote> in Farbwert #e3e3e3 vor.

Hier unterstreichen wir <blockquote> mit einem gestrichelten Rahmen mit 4 Pixel Dicke in Farbwert #e3e3e3.

<style type="text/css"><!--
  blockquote { border-bottom:4px dashed #e3e3e3; }
//-->
</style>

Nun fordern wir, dass bei Hover die Unterstreichungsfarbe auf gray168 geändert wird.

<style type="text/css"><!--
  blockquote: hover { 
    border-bottom-color: gray168;
  }
//-->
</style>

Die Idee ist hierbei, voneinander unabhängige Formatierungen für Inhalt und Unterstreichung zu nutzen. Manchmal sehen Sie dies bei Links. Der Text wird in einer Farbe dargestellt. Die Unterstreichung in einer anderen. Hierbei handelt es sich jedoch nicht um eine normale Unterstreichung, der Text selbst ist überhaupt nicht unterstrichen. Sie wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Mehr zum Thema blockquote können Sie in Blockorientierte Elemente in HTML finden. Die Beschreibung des Befehl blockquote lesen Sie in der HTML Referenz unter <blockquote>.

Wechsel der Hintergrundfarbe bei Hover von Tag dt

Die Hintergrundfarbe soll sich von Farbwert #e3e3e3 auf Farbe gray168 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Darstellung von <dt> in Farbwert #e3e3e3 vor.

Wir legen hier Farbwert #e3e3e3 als Hintergrundfarbe von <dt> fest. Zwar lassen wir die Textfarbe unverändert, setzen jedoch die Schriftart auf verdana. Die Schriftgröße ändern wir auf 14pt:

<style type="text/css"><!--
  dt { 
    background-color: #e3e3e3; 
    font-family: verdana; 
    font-size: 14pt;
  }
//-->
</style>

Nun fordern wir, dass bei Berührung mit der Maus die Hintergrundfarbe auf gray168 geändert wird.

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

Mehr zum Thema dt erfahren Sie in Listen und Glossare in HTML. Einzelheiten des HTML-Befehl dt lesen Sie in der HTML Referenz unter <dt>.