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

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 #919191
Detail	:	Hintergrund #202020	Detail	:	Schrift #919191
Farbwert	:	#202020	Farbwert	:	#919191
Farbe	:	gray32	Farbe	:	gray145
HTML	:	#202020	HTML	:	#919191
HTML (Wert)	:	#202020	HTML (Wert)	:	#919191
CSS	:	#202020	CSS	:	#919191
CSS (Wert)	:	#202020	CSS (Wert)	:	#919191
CSS (kürzest)	:	#202020	CSS (kürzest)	:	#919191
CSS (RGB)	:	rgb(32,32,32)	CSS (RGB)	:	rgb(145,145,145)
CSS (%RGB)	:	rgb(12%,12%,12%)	CSS (%RGB)	:	rgb(56%,56%,56%)

Verlauf Hintergrundfarbwert #202020 nach Schriftfarbwert #919191
#202020	#303030	#404040	#505050	#606060	#707070	#808080	#919191
#202020	#303030	#404040	#505050	#606060	#707070	#808080	#919191

Kombination von #202020 und #919191
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. 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. Cras vestibulum tristique erat, ac interdum justo cursus in.				Auf Hintergrund #202020 ist #919191 ungeeignet, da die Unterschiede in der Helligkeit und Farbe unzureichend sind. Die Ähnlichkeit der Farben #919191 und #202020 ergibt sich zu 75.38%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 24.62%.

Hintergrundfarbwert #202020				Schriftfarbwert #919191
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#202020	#202020	#202020	#202020	#919191	#919191	#919191	#919191
#3f3f3f	#3f3f3f	#1b1b1b	#1b1b1b	#a0a0a0	#a0a0a0	#7c7c7c	#7c7c7c
#5f5f5f	#5f5f5f	#161616	#161616	#b0b0b0	#b0b0b0	#676767	#676767
#7f7f7f	#7f7f7f	#121212	#121212	#c0c0c0	#c0c0c0	#525252	#525252
#9f9f9f	#9f9f9f	#0d0d0d	#0d0d0d	#cfcfcf	#cfcfcf	#3e3e3e	#3e3e3e
#bfbfbf	#bfbfbf	#090909	#090909	#dfdfdf	#dfdfdf	#292929	#292929
#dfdfdf	#dfdfdf	#040404	#040404	#efefef	#efefef	#141414	#141414
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #202020 und Farbwert #919191

Wechsel der Textfarbe bei Hover mit HTML-Tag tbody

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

Wir legen für dieses Beispiel Farbwert #202020 als Textfarbe von <tbody> fest. Zwar behalten wir die Hintergrundfarbe bei, setzen jedoch die Schriftart auf monospace. Die Schriftgröße ändern wir auf 11px.

<style type="text/css"><!--
  tbody { 
    font-size: 11px; 
    color: #202020; 
    font-family: monospace;
  }
//-->
</style>

Jetzt fordern wir, dass bei Berührung mit der Maus die Textfarbe auf #919191 gesetzt wird.

<style type="text/css"><!--
  tbody: hover { 
    color: #919191;
  }
//-->
</style>

Mehr zum Thema lesen Sie in Tabellen in HTML. Die Beschreibung vom HTML-Tag tbody finden Sie in der HTML Referenz unter <tbody>.

Text- und Unterstreichungsfarben bei HTML-Tag a

Einen Hyperlink setzen Sie mit Befehl <a>. Diesen kann man farblich gestalten und hervorheben.

Wir ändern in diesem Beispiel die Textfarbe von <a> auf Farbwert #919191. Die Schriftart ändern wir auf arial und setzen die Schriftgröße auf 13px. Wir unterstreichen den Inhalt von <a> mit Hilfe eines herausstehenden Rahmens mit 1 Punkte Dicke in Farbwert #202020. Dies geht mit HTML nicht. Wir nutzen daher CSS.

<style type="text/css"><!--
  a { 
    color:#919191; 
    font-size:13px; 
    font-family:arial; 
    border-bottom:1pt outset #202020;
  }
//-->
</style>

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

Weiteres zum Thema können Sie in Verweise und Protokolle in HTML lesen. Möglichkeiten des hier gezeigten Befehl a sind in der HTML Referenz bei <a> genau zusammengestellt.