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

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

Verlauf Hintergrundfarbwert #202020 nach Schriftfarbwert #373737
#202020	#232323	#262626	#292929	#2d2d2d	#303030	#333333	#373737
#202020	#232323	#262626	#292929	#2d2d2d	#303030	#333333	#373737

Kombination von #202020 und #373737
Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in.				#373737 ist nicht als Schriftfarbe auf Hintergrund #202020 geeignet. Weder der Helligkeitsunterschied noch der Farbunterschied sind geeignet. Die Ähnlichkeit der Farben #373737 und #202020 beträgt 93.48%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 6.52%.

Hintergrundfarbwert #202020				Schriftfarbwert #373737
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#202020	#202020	#202020	#202020	#373737	#373737	#373737	#373737
#3f3f3f	#3f3f3f	#1b1b1b	#1b1b1b	#535353	#535353	#2f2f2f	#2f2f2f
#5f5f5f	#5f5f5f	#161616	#161616	#707070	#707070	#272727	#272727
#7f7f7f	#7f7f7f	#121212	#121212	#8c8c8c	#8c8c8c	#1f1f1f	#1f1f1f
#9f9f9f	#9f9f9f	#0d0d0d	#0d0d0d	#a9a9a9	#a9a9a9	#171717	#171717
#bfbfbf	#bfbfbf	#090909	#090909	#c5c5c5	#c5c5c5	#0f0f0f	#0f0f0f
#dfdfdf	#dfdfdf	#040404	#040404	#e2e2e2	#e2e2e2	#070707	#070707
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #202020 und Farbwert #373737

Text- und Unterstreichungsfarben von Befehl abbr

Wir ändern Hher die Textfarbe von <abbr> auf Farbwert #373737. Die Schriftart ändern wir auf sans-serif. Die Schriftgröße ändern wir auf 9pt. Wir unterstreichen den Inhalt von <abbr> mit Hilfe eines gepunkteten Rahmens mit 1 Pixel Dicke in Farbwert #202020. Dies geht mit HTML nicht. Daher formatieren wir mit CSS.

<style type="text/css"><!--
  abbr { 
    font-family: sans-serif; 
    color: #373737; 
    border-bottom: 1px dotted #202020; 
    font-size: 9pt;
  }
//-->
</style>

Die Idee ist, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben.

Der HTML-Befehl abbr ist in der HTML Referenz unter <abbr> genau gezeigt.

Wechsel der Hintergrundfarbe bei Hover bei Tag a

Ein Hyperlink wird mit Tag <a> gesetzt. Diesen können Sie farblich gestalten.

Die Hintergrundfarbe soll sich von Farbwert #202020 auf Farbwert #373737 ändern, wenn man mit der Maus auf <a> zeigt. Bereiten wir zunächst die Formatierung von <a> in Farbwert #202020 vor.

Hier legen wir Farbwert #202020 als Hintergrundfarbe von <a> fest. Zwar behalten wir die Textfarbe bei, setzen jedoch die Schriftart auf verdana.

<style type="text/css"><!--
  a { 
    background-color: #202020; 
    font-family: verdana;
  }
//-->
</style>

Jetzt stellen wir ein, dass bei Mausberührung die Hintergrundfarbe auf #373737 geändert wird.

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

Weiteres zum Thema können Sie in Verweise und Protokolle in HTML erfahren. Der hier verwendete Befehl a ist in der HTML Referenz unter <a> genau zusammengestellt.