Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray92 und Farbwert #b7b7b7

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).

Hintergrundfarbe gray92			Schriftfarbwert #b7b7b7
Detail	:	Hintergrund gray92	Detail	:	Schrift #b7b7b7
Farbe	:	gray92	Farbwert	:	#b7b7b7
Farbwert	:	#5c5c5c	Farbe	:	gray183
HTML	:	gray92	HTML	:	#b7b7b7
HTML (Wert)	:	#5c5c5c	HTML (Wert)	:	#b7b7b7
CSS	:	gray92	CSS	:	#b7b7b7
CSS (Wert)	:	#5c5c5c	CSS (Wert)	:	#b7b7b7
CSS (kürzest)	:	#5c5c5c	CSS (kürzest)	:	#b7b7b7
CSS (RGB)	:	rgb(92,92,92)	CSS (RGB)	:	rgb(183,183,183)
CSS (%RGB)	:	rgb(36%,36%,36%)	CSS (%RGB)	:	rgb(71%,71%,71%)

Verlauf Hintergrundfarbe gray92 nach Schriftfarbwert #b7b7b7
#5c5c5c	#696969	#767676	#838383	#909090	#9d9d9d	#aaaaaa	#b7b7b7
#5c5c5c	#696969	#767676	#838383	#909090	#9d9d9d	#aaaaaa	#b7b7b7

Kombination von gray92 und #b7b7b7
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante. 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.				Die Ähnlichkeit der Farben #b7b7b7 und gray92 beträgt 84.12%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 15.88%. Auf Hintergrund gray92 ist #b7b7b7 ungeeignet, weil die Unterschiede in der Helligkeit und Farbe unzureichend sind.

Hintergrundfarbe gray92				Schriftfarbwert #b7b7b7
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#5c5c5c	#5c5c5c	#5c5c5c	#5c5c5c	#b7b7b7	#b7b7b7	#b7b7b7	#b7b7b7
#737373	#737373	#4e4e4e	#4e4e4e	#c1c1c1	#c1c1c1	#9c9c9c	#9c9c9c
#8a8a8a	#8a8a8a	#414141	#414141	#cbcbcb	#cbcbcb	#828282	#828282
#a1a1a1	#a1a1a1	#343434	#343434	#d5d5d5	#d5d5d5	#686868	#686868
#b9b9b9	#b9b9b9	#272727	#272727	#e0e0e0	#e0e0e0	#4e4e4e	#4e4e4e
#d0d0d0	#d0d0d0	#1a1a1a	#1a1a1a	#eaeaea	#eaeaea	#343434	#343434
#e7e7e7	#e7e7e7	#0d0d0d	#0d0d0d	#f4f4f4	#f4f4f4	#1a1a1a	#1a1a1a
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray92 und Farbwert #b7b7b7

Text- und Unterstreichungsfarben bei Befehl a

Einen Link setzt man mit HTML-Befehl <a>. Er kann hervorgehoben und farblich gestaltet werden.

Hier ändern wir die Textfarbe von <a> auf Farbwert #b7b7b7. Die Schriftart ändern wir auf verdana. Die Schriftgröße setzen wir auf 116%. Wir unterstreichen den Inhalt von <a> mit Hilfe eines gestrichelten Rahmens mit 5 Pixel Dicke in Farbe gray92. Dies geht in HTML nicht. Wir verwenden deshalb CSS zur Formatierung.

<style type="text/css"><!--
  a { 
    border-bottom-style:dashed; 
    border-bottom-width:5px; 
    font-family:verdana; 
    color:#b7b7b7; 
    font-size:116%; 
    border-bottom-color:gray92;
  }
//-->
</style>

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

Weiteres zum Thema a finden Sie in Verweise und Protokolle in HTML. Einzelheiten vom hier verwendeten HTML-Tag a sind in der HTML Referenz bei <a> genau zusammengestellt.

Wechsel der Hintergrundfarbe bei Hover mit Tag dt

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

Zum Beispiel legen wir Farbe gray92 als Hintergrundfarbe von <dt> fest. Zwar behalten wir die Textfarbe bei, setzen jedoch die Schriftart auf courier new und verringern die Schriftgröße auf 90%.

<style type="text/css"><!--
  dt { 
    background-color:gray92; 
    font-family:courier new; 
    font-size:90%;
  }
//-->
</style>

Nun fordern wir, dass sich bei Mausberührung die Hintergrundfarbe zu #b7b7b7 ändert.

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

Mehr zu dt erfahren Sie in Listen und Glossare in HTML. Weiteres zum Tag <dt>.