Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray175 und Farbe gray252

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 gray175			Schriftfarbe gray252
Detail	:	Hintergrund gray175	Detail	:	Schrift gray252
Farbe	:	gray175	Farbe	:	gray252
Farbwert	:	#afafaf	Farbwert	:	#fcfcfc
HTML	:	gray175	HTML	:	gray252
HTML (Wert)	:	#afafaf	HTML (Wert)	:	#fcfcfc
CSS	:	gray175	CSS	:	gray252
CSS (Wert)	:	#afafaf	CSS (Wert)	:	#fcfcfc
CSS (kürzest)	:	#afafaf	CSS (kürzest)	:	#fcfcfc
CSS (RGB)	:	rgb(175,175,175)	CSS (RGB)	:	rgb(252,252,252)
CSS (%RGB)	:	rgb(68%,68%,68%)	CSS (%RGB)	:	rgb(98%,98%,98%)

Verlauf Hintergrundfarbe gray175 nach Schriftfarbe gray252
#afafaf	#bababa	#c5c5c5	#d0d0d0	#dbdbdb	#e6e6e6	#f1f1f1	#fcfcfc
#afafaf	#bababa	#c5c5c5	#d0d0d0	#dbdbdb	#e6e6e6	#f1f1f1	#fcfcfc

Kombination von gray175 und gray252
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna.				gray252 eignet sich nicht als Schriftfarbe auf Hintergrund gray175, da sowohl Helligkeit als auch die Farben zu ähnlich sind. Die Ähnlichkeit von gray252 und gray175 ergibt sich zu 89.82%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 10.18%.

Hintergrundfarbe gray175				Schriftfarbe gray252
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#afafaf	#afafaf	#afafaf	#afafaf	#fcfcfc	#fcfcfc	#fcfcfc	#fcfcfc
#bababa	#bababa	#969696	#969696	#fcfcfc	#fcfcfc	#d8d8d8	#d8d8d8
#c5c5c5	#c5c5c5	#7d7d7d	#7d7d7d	#fcfcfc	#fcfcfc	#b4b4b4	#b4b4b4
#d1d1d1	#d1d1d1	#646464	#646464	#fdfdfd	#fdfdfd	#909090	#909090
#dcdcdc	#dcdcdc	#4b4b4b	#4b4b4b	#fdfdfd	#fdfdfd	#6c6c6c	#6c6c6c
#e8e8e8	#e8e8e8	#323232	#323232	#fefefe	#fefefe	#484848	#484848
#f3f3f3	#f3f3f3	#191919	#191919	#fefefe	#fefefe	#242424	#242424
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray175 und Farbe gray252

Text- und Unterstreichungsfarben von Befehl label

Hier ändern wir die Textfarbe von <label> auf Farbe gray252. Die Schriftart setzen wir auf arial und setzen die Schriftgröße auf 13px. Wir unterstreichen den Inhalt von <label> mit Hilfe eines doppelten Rahmens mit 3 Punkte Dicke in Farbe gray175. In HTML geht dies kaum. Wir nutzen daher CSS.

<style type="text/css"><!--
  label { 
    font-size:13px; 
    border-bottom:3pt double gray175; 
    font-family:arial; 
    color:gray252;
  }
//-->
</style>

Die Idee ist, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben.

Mehr zum Thema label erfahren Sie in Formulare in HTML. Mehr zum HTML-Befehl label finden Sie in der HTML Referenz unter <label>.

Wechsel der Hintergrundfarbe bei Hover bei HTML-Tag address

Die Hintergrundfarbe soll sich von Farbe gray175 auf Farbe gray252 ändern, wenn man mit der Maus auf <address> zeigt. Bereiten wir zunächst die Formatierung von <address> in Farbe gray175 vor.

Wir setzen z.B. die Hintergrundfarbe von <address> auf Farbe gray175. Die Textfarbe lassen wir unverändert. Die Schriftart setzen wir auf sans-serif und setzen die Größe der Schrift auf 13px:

<style type="text/css"><!--
  address { 
    font-family:sans-serif; 
    background-color:gray175; 
    font-size:13px;
  }
//-->
</style>

Jetzt fordern wir, dass bei Hover die Hintergrundfarbe auf gray252 geändert wird.

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

Weiteres zum Thema lesen Sie in Blockorientierte Elemente in HTML. Mehr zum Tag address lesen Sie in der HTML Referenz unter <address>.