Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #c4c4c4 und Farbwert #202020

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 #c4c4c4			Schriftfarbwert #202020
Detail	:	Hintergrund #c4c4c4	Detail	:	Schrift #202020
Farbwert	:	#c4c4c4	Farbwert	:	#202020
Farbe	:	gray196	Farbe	:	gray32
HTML	:	#c4c4c4	HTML	:	#202020
HTML (Wert)	:	#c4c4c4	HTML (Wert)	:	#202020
CSS	:	#c4c4c4	CSS	:	#202020
CSS (Wert)	:	#c4c4c4	CSS (Wert)	:	#202020
CSS (kürzest)	:	#c4c4c4	CSS (kürzest)	:	#202020
CSS (RGB)	:	rgb(196,196,196)	CSS (RGB)	:	rgb(32,32,32)
CSS (%RGB)	:	rgb(76%,76%,76%)	CSS (%RGB)	:	rgb(12%,12%,12%)

Verlauf Hintergrundfarbwert #c4c4c4 nach Schriftfarbwert #202020
#c4c4c4	#acacac	#959595	#7d7d7d	#666666	#4e4e4e	#373737	#202020
#c4c4c4	#acacac	#959595	#7d7d7d	#666666	#4e4e4e	#373737	#202020

Kombination von #c4c4c4 und #202020
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. 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.				Die Ähnlichkeit von #202020 und #c4c4c4 beträgt 55.52%. Die Lesbarkeit dieser Kombination liegt damit bei 44.48%. #202020 ist nicht als Schriftfarbe auf Hintergrund #c4c4c4 geeignet. Zwar ist der Helligkeitsunterschied in Ordnung, die Farben selbst sind sich zu ähnlich.

Hintergrundfarbwert #c4c4c4				Schriftfarbwert #202020
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#c4c4c4	#c4c4c4	#c4c4c4	#c4c4c4	#202020	#202020	#202020	#202020
#cccccc	#cccccc	#a8a8a8	#a8a8a8	#3f3f3f	#3f3f3f	#1b1b1b	#1b1b1b
#d4d4d4	#d4d4d4	#8c8c8c	#8c8c8c	#5f5f5f	#5f5f5f	#161616	#161616
#dddddd	#dddddd	#707070	#707070	#7f7f7f	#7f7f7f	#121212	#121212
#e5e5e5	#e5e5e5	#545454	#545454	#9f9f9f	#9f9f9f	#0d0d0d	#0d0d0d
#eeeeee	#eeeeee	#383838	#383838	#bfbfbf	#bfbfbf	#090909	#090909
#f6f6f6	#f6f6f6	#1c1c1c	#1c1c1c	#dfdfdf	#dfdfdf	#040404	#040404
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #c4c4c4 und Farbwert #202020

Füllen und Umranden von HTML-Tag kbd

Hier umranden wir <kbd> mit einem . Den Hintergrund von <kbd> färben wir mit Farbwert #c4c4c4. In HTML ist das kaum machbar. Wir verwenden deshalb CSS.

<style type="text/css"><!--
  kbd { border:5px ridge #202020; background-color:#c4c4c4; }
//-->
</style>

Weiteres zu kbd können Sie in Text in HTML nachlesen. Beschreibung vom Tag <kbd>.

Wechsel der Umrandung bei Hover von Tag samp

Die Rahmenfarbe soll sich von Farbwert #c4c4c4 auf Farbwert #202020 ändern, wenn man mit der Maus auf <samp> zeigt. Bereiten wir zunächst eine Darstellung von <samp> in Farbwert #c4c4c4 vor.

In diesem Beispiel umranden wir <samp> mit einem 2 Pixel dicken, herausstehenden Rahmen in Farbwert #c4c4c4.

<style type="text/css"><!--
  samp { 
    border-width: 2px; 
    border-style: outset; 
    border-color: #c4c4c4;
  }
//-->
</style>

Nun fordern wir, dass bei Mausberührung die Rahmenfarbe auf #202020 geändert wird.

<style type="text/css"><!--
  samp: hover { 
    border-color: #202020;
  }
//-->
</style>

Weiteres zu samp können Sie in Text in HTML nachsehen. Weiteres zum HTML-Tag samp erfahren Sie in der HTML Referenz unter <samp>.