Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #f9f9f9 und Farbe gray122

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 #f9f9f9			Schriftfarbe gray122
Detail	:	Hintergrund #f9f9f9	Detail	:	Schrift gray122
Farbwert	:	#f9f9f9	Farbe	:	gray122
Farbe	:	gray249	Farbwert	:	#7a7a7a
HTML	:	#f9f9f9	HTML	:	gray122
HTML (Wert)	:	#f9f9f9	HTML (Wert)	:	#7a7a7a
CSS	:	#f9f9f9	CSS	:	gray122
CSS (Wert)	:	#f9f9f9	CSS (Wert)	:	#7a7a7a
CSS (kürzest)	:	#f9f9f9	CSS (kürzest)	:	#7a7a7a
CSS (RGB)	:	rgb(249,249,249)	CSS (RGB)	:	rgb(122,122,122)
CSS (%RGB)	:	rgb(97%,97%,97%)	CSS (%RGB)	:	rgb(47%,47%,47%)

Verlauf Hintergrundfarbwert #f9f9f9 nach Schriftfarbe gray122
#f9f9f9	#e6e6e6	#d4d4d4	#c2c2c2	#b0b0b0	#9e9e9e	#8c8c8c	#7a7a7a
#f9f9f9	#e6e6e6	#d4d4d4	#c2c2c2	#b0b0b0	#9e9e9e	#8c8c8c	#7a7a7a

Kombination von #f9f9f9 und gray122
Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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.				gray122 ist nicht als Schriftfarbe auf Hintergrund #f9f9f9 geeignet, da die Farben zu ähnlich sind. Die Ähnlichkeit der Farben gray122 und #f9f9f9 ergibt sich zu 80.59%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 19.41%.

Hintergrundfarbwert #f9f9f9				Schriftfarbe gray122
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#f9f9f9	#f9f9f9	#f9f9f9	#f9f9f9	#7a7a7a	#7a7a7a	#7a7a7a	#7a7a7a
#f9f9f9	#f9f9f9	#d5d5d5	#d5d5d5	#8d8d8d	#8d8d8d	#686868	#686868
#fafafa	#fafafa	#b1b1b1	#b1b1b1	#a0a0a0	#a0a0a0	#575757	#575757
#fbfbfb	#fbfbfb	#8e8e8e	#8e8e8e	#b3b3b3	#b3b3b3	#454545	#454545
#fcfcfc	#fcfcfc	#6a6a6a	#6a6a6a	#c6c6c6	#c6c6c6	#343434	#343434
#fdfdfd	#fdfdfd	#474747	#474747	#d9d9d9	#d9d9d9	#222222	#222222
#fefefe	#fefefe	#232323	#232323	#ececec	#ececec	#111111	#111111
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #f9f9f9 und Farbe gray122

Wechsel der Textfarbe bei Hover mit Tag a

Einen Hyperlink erzeugen Sie mit Befehl <a>. Dieser kann farblich gestaltet und hervorgehoben werden.

Die Textfarbe soll sich von Farbwert #f9f9f9 auf Farbe gray122 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Darstellung von <a> in Farbwert #f9f9f9 vor.

Wir legen zum Beispiel bei <a> die Textfarbe auf Farbwert #f9f9f9 fest:

<style type="text/css"><!--
  a { 
    color: #f9f9f9;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Hover die Textfarbe auf gray122 ändert.

<style type="text/css"><!--
  a:hover { 
    color:gray122;
  }
//-->
</style>

Mehr zu a finden Sie in Verweise und Protokolle in HTML. Einzelheiten des hier gezeigten Tag a sind in der HTML Referenz unter <a> genau beschrieben.

Hintergrund/Text-Kombination bei Befehl li

In diesem Beispiel ändern wir die Textfarbe von <li> auf Farbe gray122 und die Hintergrundfarbe von <li> auf Farbwert #f9f9f9. Die Schriftart ändern wir auf courier new. Die Schriftgröße vergrößern wir auf 126%.

<style type="text/css"><!--
  li { 
    color:gray122; 
    background-color:#f9f9f9; 
    font-family:courier new; 
    font-size:126%;
  }
//-->
</style>

Mehr zu li können Sie in Listen und Glossare in HTML erfahren. Der Tag li ist in der HTML Referenz bei <li> ausführlich beschrieben.