Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray143 und Farbwert #ababab

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 gray143			Schriftfarbwert #ababab
Detail	:	Hintergrund gray143	Detail	:	Schrift #ababab
Farbe	:	gray143	Farbwert	:	#ababab
Farbwert	:	#8f8f8f	Farbe	:	gray171
HTML	:	gray143	HTML	:	#ababab
HTML (Wert)	:	#8f8f8f	HTML (Wert)	:	#ababab
CSS	:	gray143	CSS	:	#ababab
CSS (Wert)	:	#8f8f8f	CSS (Wert)	:	#ababab
CSS (kürzest)	:	#8f8f8f	CSS (kürzest)	:	#ababab
CSS (RGB)	:	rgb(143,143,143)	CSS (RGB)	:	rgb(171,171,171)
CSS (%RGB)	:	rgb(56%,56%,56%)	CSS (%RGB)	:	rgb(67%,67%,67%)

Verlauf Hintergrundfarbe gray143 nach Schriftfarbwert #ababab
#8f8f8f	#939393	#979797	#9b9b9b	#9f9f9f	#a3a3a3	#a7a7a7	#ababab
#8f8f8f	#939393	#979797	#9b9b9b	#9f9f9f	#a3a3a3	#a7a7a7	#ababab

Kombination von gray143 und #ababab
Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna.				Die Ähnlichkeit von #ababab und gray143 ergibt sich zu 93.29%. Die Lesbarkeit dieser Farbkombination liegt damit bei 6.71%. #ababab eignet sich nicht als Schriftfarbe auf Hintergrund gray143, weil weder der Helligkeitsunterschied noch der Farbunterschied geeignet sind.

Hintergrundfarbe gray143				Schriftfarbwert #ababab
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#8f8f8f	#8f8f8f	#8f8f8f	#8f8f8f	#ababab	#ababab	#ababab	#ababab
#9f9f9f	#9f9f9f	#7a7a7a	#7a7a7a	#b7b7b7	#b7b7b7	#929292	#929292
#afafaf	#afafaf	#666666	#666666	#c3c3c3	#c3c3c3	#7a7a7a	#7a7a7a
#bfbfbf	#bfbfbf	#515151	#515151	#cfcfcf	#cfcfcf	#616161	#616161
#cfcfcf	#cfcfcf	#3d3d3d	#3d3d3d	#dbdbdb	#dbdbdb	#494949	#494949
#dfdfdf	#dfdfdf	#282828	#282828	#e7e7e7	#e7e7e7	#303030	#303030
#efefef	#efefef	#141414	#141414	#f3f3f3	#f3f3f3	#181818	#181818
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray143 und Farbwert #ababab

Hintergrund/Text-Kombination mit HTML-Tag h5

Mit HTML-Tag <h5> wird eine Überschrift erzeugt. Diese kann hervorgehoben und farblich gestaltet werden.

Wir ändern für dieses Beispiel die Textfarbe von <h5> auf Farbwert #ababab und die Hintergrundfarbe von <h5> auf Farbe gray143. Die Schriftart ändern wir auf sans-serif. Als Schriftgröße wählen wir 115%.

<style type="text/css"><!--
  h5 { 
    color:#ababab; 
    background-color:gray143; 
    font-size:115%; 
    font-family:sans-serif;
  }
//-->
</style>

Mehr zu h5 lesen Sie in Grundlegende Gestaltungselemente in HTML. Mehr zum hier genutzten Tag h5 finden Sie in der HTML Referenz unter <h5>.

Wechsel der Hintergrundfarbe bei Hover mit HTML-Tag li

Die Hintergrundfarbe soll sich von Farbe gray143 auf Farbwert #ababab ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Darstellung von <li> in Farbe gray143 vor.

Zum Beispiel legen wir bei <li> die Hintergrundfarbe auf Farbe gray143 fest. Zwar lassen wir die Textfarbe unverändert, setzen jedoch die Schriftart auf arial.

<style type="text/css"><!--
  li { 
    background-color:gray143; 
    font-family:arial;
  }
//-->
</style>

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

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

Mehr zum Thema li können Sie in Listen und Glossare in HTML nachlesen. Einzelheiten des HTML-Tag li finden Sie in der HTML Referenz unter <li>.