Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #e1e1e1 und Farbwert #030303

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 #e1e1e1			Schriftfarbwert #030303
Detail	:	Hintergrund #e1e1e1	Detail	:	Schrift #030303
Farbwert	:	#e1e1e1	Farbwert	:	#030303
Farbe	:	gray225	Farbe	:	gray3
HTML	:	#e1e1e1	HTML	:	#030303
HTML (Wert)	:	#e1e1e1	HTML (Wert)	:	#030303
CSS	:	#e1e1e1	CSS	:	#030303
CSS (Wert)	:	#e1e1e1	CSS (Wert)	:	#030303
CSS (kürzest)	:	#e1e1e1	CSS (kürzest)	:	#030303
CSS (RGB)	:	rgb(225,225,225)	CSS (RGB)	:	rgb(3,3,3)
CSS (%RGB)	:	rgb(88%,88%,88%)	CSS (%RGB)	:	rgb(1%,1%,1%)

Verlauf Hintergrundfarbwert #e1e1e1 nach Schriftfarbwert #030303
#e1e1e1	#c1c1c1	#a1a1a1	#818181	#626262	#424242	#222222	#030303
#e1e1e1	#c1c1c1	#a1a1a1	#818181	#626262	#424242	#222222	#030303

Kombination von #e1e1e1 und #030303
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in. 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.				#030303 eignet sich als Schriftfarbe auf Hintergrund #e1e1e1. Der Unterschied in den Farben ist ok, der Unterschied in den Helligkeiten ebenso. Die Ähnlichkeit der Farben #030303 und #e1e1e1 ergibt sich zu 24.90%. Die Lesbarkeit dieser Kombination liegt damit bei 75.10%.

Hintergrundfarbwert #e1e1e1				Schriftfarbwert #030303
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#e1e1e1	#e1e1e1	#e1e1e1	#e1e1e1	#030303	#030303	#030303	#030303
#e5e5e5	#e5e5e5	#c0c0c0	#c0c0c0	#272727	#272727	#020202	#020202
#e9e9e9	#e9e9e9	#a0a0a0	#a0a0a0	#4b4b4b	#4b4b4b	#020202	#020202
#ededed	#ededed	#808080	#808080	#6f6f6f	#6f6f6f	#010101	#010101
#f2f2f2	#f2f2f2	#606060	#606060	#939393	#939393	#010101	#010101
#f6f6f6	#f6f6f6	#404040	#404040	#b7b7b7	#b7b7b7	#000000	#000000
#fafafa	#fafafa	#202020	#202020	#dbdbdb	#dbdbdb	#000000	#000000
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #e1e1e1 und Farbwert #030303

Füllen und Umranden von HTML-Befehl abbr

Hier umranden wir <abbr> mit einem herausstehenden, 4 Pixel dicken Rahmen in Farbwert #030303 . Die Hintergrundfarbe für <abbr> setzen wir entsprechend auf Farbwert #e1e1e1. Das geht in HTML kaum. Daher nutzen wir hier CSS.

<style type="text/css"><!--
  abbr { 
    background-color:#e1e1e1; 
    border-style:outset; 
    border-width:4px; 
    border-color:#030303;
  }
//-->
</style>

Einzelheiten vom HTML-Befehl abbr finden Sie in der HTML Referenz unter <abbr>.

Wechsel der Hintergrundfarbe bei Hover von Befehl address

Die Hintergrundfarbe soll sich von Farbwert #e1e1e1 auf Farbwert #030303 ändern, wenn man mit der Maus auf <address> zeigt. Wir bereiten zunächst die Darstellung von <address> in Farbwert #e1e1e1 vor.

Wir ändern hier bei <address> die Hintergrundfarbe auf Farbwert #e1e1e1. Die Textfarbe ändern wir nicht, setzen jedoch die Schriftart auf monospace und verkleinern die Schriftgröße auf 96%.

<style type="text/css"><!--
  address { 
    background-color: #e1e1e1; 
    font-size: 96%; 
    font-family: monospace;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Hover die Hintergrundfarbe auf #030303 ändert.

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

Weiteres zu address erfahren Sie in Blockorientierte Elemente in HTML. Einzelheiten des HTML-Befehl <address>.