Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #7f7f7f und Farbwert #c8c8c8

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 #7f7f7f			Schriftfarbwert #c8c8c8
Detail	:	Hintergrund #7f7f7f	Detail	:	Schrift #c8c8c8
Farbwert	:	#7f7f7f	Farbwert	:	#c8c8c8
Farbe	:	gray127	Farbe	:	gray200
HTML	:	#7f7f7f	HTML	:	#c8c8c8
HTML (Wert)	:	#7f7f7f	HTML (Wert)	:	#c8c8c8
CSS	:	#7f7f7f	CSS	:	#c8c8c8
CSS (Wert)	:	#7f7f7f	CSS (Wert)	:	#c8c8c8
CSS (kürzest)	:	#7f7f7f	CSS (kürzest)	:	#c8c8c8
CSS (RGB)	:	rgb(127,127,127)	CSS (RGB)	:	rgb(200,200,200)
CSS (%RGB)	:	rgb(49%,49%,49%)	CSS (%RGB)	:	rgb(78%,78%,78%)

Verlauf Hintergrundfarbwert #7f7f7f nach Schriftfarbwert #c8c8c8
#7f7f7f	#898989	#939393	#9e9e9e	#a8a8a8	#b3b3b3	#bdbdbd	#c8c8c8
#7f7f7f	#898989	#939393	#9e9e9e	#a8a8a8	#b3b3b3	#bdbdbd	#c8c8c8

Kombination von #7f7f7f und #c8c8c8
Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				#c8c8c8 ist nicht als Schriftfarbe auf Hintergrund #7f7f7f geeignet. Weder der Helligkeitsunterschied noch der Farbunterschied sind gross genug. Die Ähnlichkeit von #c8c8c8 und #7f7f7f beträgt 88.60%. Die Lesbarkeit dieser Farbkombination liegt damit bei 11.40%.

Hintergrundfarbwert #7f7f7f				Schriftfarbwert #c8c8c8
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#7f7f7f	#7f7f7f	#7f7f7f	#7f7f7f	#c8c8c8	#c8c8c8	#c8c8c8	#c8c8c8
#919191	#919191	#6c6c6c	#6c6c6c	#cfcfcf	#cfcfcf	#ababab	#ababab
#a3a3a3	#a3a3a3	#5a5a5a	#5a5a5a	#d7d7d7	#d7d7d7	#8e8e8e	#8e8e8e
#b5b5b5	#b5b5b5	#484848	#484848	#dfdfdf	#dfdfdf	#727272	#727272
#c8c8c8	#c8c8c8	#363636	#363636	#e7e7e7	#e7e7e7	#555555	#555555
#dadada	#dadada	#242424	#242424	#efefef	#efefef	#393939	#393939
#ececec	#ececec	#121212	#121212	#f7f7f7	#f7f7f7	#1c1c1c	#1c1c1c
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #7f7f7f und Farbwert #c8c8c8

Füllen und Umranden von Tag pre

Für dieses Beispiel umranden wir <pre> mit einem . Die Hintergrundfarbe für <pre> setzen wir entsprechend auf Farbwert #7f7f7f. Das geht mit HTML nicht. Wir verwenden daher CSS zur Formatierung.

<style type="text/css"><!--
  pre { border:3pt dotted #c8c8c8; background-color:#7f7f7f; }
//-->
</style>

Mehr zu pre können Sie in Blockorientierte Elemente in HTML finden. Mehr zum hier gezeigten HTML-Tag pre finden Sie in der HTML Referenz unter <pre>.

Wechsel der Hintergrundfarbe bei Hover bei Tag dt

Die Hintergrundfarbe soll sich von Farbwert #7f7f7f auf Farbwert #c8c8c8 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <dt> in Farbwert #7f7f7f vor.

Zum Beispiel legen wir bei <dt> die Hintergrundfarbe auf Farbwert #7f7f7f fest. Zwar verändern wir die Textfarbe nicht, setzen jedoch die Schriftart auf monospace und setzen die Schriftgröße auf 13px:

<style type="text/css"><!--
  dt { 
    background-color: #7f7f7f; 
    font-size: 13px; 
    font-family: monospace;
  }
//-->
</style>

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

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

Weiteres zum Thema dt erfahren Sie in Listen und Glossare in HTML. Der Tag dt ist in der HTML Referenz unter <dt> genau beschrieben.