Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #f0f0f0 und Farbwert #8d8d8d

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 #f0f0f0			Schriftfarbwert #8d8d8d
Detail	:	Hintergrund #f0f0f0	Detail	:	Schrift #8d8d8d
Farbwert	:	#f0f0f0	Farbwert	:	#8d8d8d
Farbe	:	gray240	Farbe	:	gray141
HTML	:	#f0f0f0	HTML	:	#8d8d8d
HTML (Wert)	:	#f0f0f0	HTML (Wert)	:	#8d8d8d
CSS	:	#f0f0f0	CSS	:	#8d8d8d
CSS (Wert)	:	#f0f0f0	CSS (Wert)	:	#8d8d8d
CSS (kürzest)	:	#f0f0f0	CSS (kürzest)	:	#8d8d8d
CSS (RGB)	:	rgb(240,240,240)	CSS (RGB)	:	rgb(141,141,141)
CSS (%RGB)	:	rgb(94%,94%,94%)	CSS (%RGB)	:	rgb(55%,55%,55%)

Verlauf Hintergrundfarbwert #f0f0f0 nach Schriftfarbwert #8d8d8d
#f0f0f0	#e1e1e1	#d3d3d3	#c5c5c5	#b7b7b7	#a9a9a9	#9b9b9b	#8d8d8d
#f0f0f0	#e1e1e1	#d3d3d3	#c5c5c5	#b7b7b7	#a9a9a9	#9b9b9b	#8d8d8d

Kombination von #f0f0f0 und #8d8d8d
Cras vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. 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.				Die Ähnlichkeit der Farben #8d8d8d und #f0f0f0 beträgt 86.13%. Die Lesbarkeit dieser Kombination bewerte ich mit 13.87%. #8d8d8d ist nicht als Schriftfarbe auf Hintergrund #f0f0f0 geeignet, weil die Helligkeit und Farben zu ähnlich sind.

Hintergrundfarbwert #f0f0f0				Schriftfarbwert #8d8d8d
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#f0f0f0	#f0f0f0	#f0f0f0	#f0f0f0	#8d8d8d	#8d8d8d	#8d8d8d	#8d8d8d
#f2f2f2	#f2f2f2	#cdcdcd	#cdcdcd	#9d9d9d	#9d9d9d	#787878	#787878
#f4f4f4	#f4f4f4	#ababab	#ababab	#adadad	#adadad	#646464	#646464
#f6f6f6	#f6f6f6	#898989	#898989	#bdbdbd	#bdbdbd	#505050	#505050
#f8f8f8	#f8f8f8	#666666	#666666	#cecece	#cecece	#3c3c3c	#3c3c3c
#fafafa	#fafafa	#444444	#444444	#dedede	#dedede	#282828	#282828
#fcfcfc	#fcfcfc	#222222	#222222	#eeeeee	#eeeeee	#141414	#141414
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #f0f0f0 und Farbwert #8d8d8d

Hintergrund/Text-Kombination von Befehl em

Hier ändern wir die Textfarbe von <em> auf Farbwert #8d8d8d und die Hintergrundfarbe von <em> auf Farbwert #f0f0f0. Die Schriftart ändern wir auf courier new. Als Schriftgröße setzen wir 13px.

<style type="text/css"><!--
  em { 
    font-family: courier new; 
    background-color: #f0f0f0; 
    color: #8d8d8d; 
    font-size: 13px;
  }
//-->
</style>

Mehr zu em erfahren Sie in Text in HTML. Die Beschreibung des HTML-Befehl em lesen Sie in der HTML Referenz unter <em>.

Wechsel der Umrandung bei Hover bei Tag a

Ein Link wird mit Befehl <a> gesetzt. Diesen können Sie farblich gestalten.

Die Rahmenfarbe soll sich von Farbwert #f0f0f0 auf Farbwert #8d8d8d ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Formatierung von <a> in Farbwert #f0f0f0 vor.

In diesem Beispiel umranden wir <a> mit einem 5 Pixel dicken, gepunkteten Rahmen in Farbwert #f0f0f0.

<style type="text/css"><!--
  a { border:5px dotted #f0f0f0; }
//-->
</style>

Nun fordern wir, dass bei Hover die Rahmenfarbe auf #8d8d8d gesetzt wird.

<style type="text/css"><!--
  a:hover { 
    border-color:#8d8d8d;
  }
//-->
</style>

Mehr zum Thema erfahren Sie in Verweise und Protokolle in HTML. Weiteres zum HTML-Befehl a finden Sie in der HTML Referenz unter <a>.