Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray97 und Farbwert #262626

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 gray97			Schriftfarbwert #262626
Detail	:	Hintergrund gray97	Detail	:	Schrift #262626
Farbe	:	gray97	Farbwert	:	#262626
Farbwert	:	#616161	Farbe	:	gray38
HTML	:	gray97	HTML	:	#262626
HTML (Wert)	:	#616161	HTML (Wert)	:	#262626
CSS	:	gray97	CSS	:	#262626
CSS (Wert)	:	#616161	CSS (Wert)	:	#262626
CSS (kürzest)	:	#616161	CSS (kürzest)	:	#262626
CSS (RGB)	:	rgb(97,97,97)	CSS (RGB)	:	rgb(38,38,38)
CSS (%RGB)	:	rgb(38%,38%,38%)	CSS (%RGB)	:	rgb(14%,14%,14%)

Verlauf Hintergrundfarbe gray97 nach Schriftfarbwert #262626
#616161	#585858	#505050	#474747	#3f3f3f	#363636	#2e2e2e	#262626
#616161	#585858	#505050	#474747	#3f3f3f	#363636	#2e2e2e	#262626

Kombination von gray97 und #262626
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante.				Die Ähnlichkeit der Farben #262626 und gray97 ergibt sich zu 88.36%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 11.64%. Auf Hintergrund gray97 ist #262626 ungeeignet. Sowohl Helligkeit als auch die Farben sind zu ähnlich.

Hintergrundfarbe gray97				Schriftfarbwert #262626
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#616161	#616161	#616161	#616161	#262626	#262626	#262626	#262626
#777777	#777777	#535353	#535353	#454545	#454545	#202020	#202020
#8e8e8e	#8e8e8e	#454545	#454545	#646464	#646464	#1b1b1b	#1b1b1b
#a4a4a4	#a4a4a4	#373737	#373737	#838383	#838383	#151515	#151515
#bbbbbb	#bbbbbb	#292929	#292929	#a2a2a2	#a2a2a2	#101010	#101010
#d1d1d1	#d1d1d1	#1b1b1b	#1b1b1b	#c1c1c1	#c1c1c1	#0a0a0a	#0a0a0a
#e8e8e8	#e8e8e8	#0d0d0d	#0d0d0d	#e0e0e0	#e0e0e0	#050505	#050505
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray97 und Farbwert #262626

Wechsel der Hintergrundfarbe bei Hover von HTML-Befehl li

Die Hintergrundfarbe soll sich von Farbe gray97 auf Farbwert #262626 ändern, wenn man mit der Maus auf <li> zeigt. Wir bereiten zunächst eine Darstellung von <li> in Farbe gray97 vor.

In diesem Beispiel ändern wir die Hintergrundfarbe von <li> auf Farbe gray97:

<style type="text/css"><!--
  li { 
    background-color:gray97;
  }
//-->
</style>

Jetzt fordern wir, dass bei Hover die Hintergrundfarbe auf #262626 gesetzt wird.

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

Weiteres zu li können Sie in Listen und Glossare in HTML finden. Die Beschreibung vom hier verwendeten HTML-Tag li erfahren Sie in der HTML Referenz unter <li>.

Wechsel der Unterstreichung bei Hover mit HTML-Tag s

Die Farbe der Unterstreichung soll sich von Farbe gray97 auf Farbwert #262626 ändern, wenn man mit der Maus auf <s> zeigt. Bereiten wir zunächst die Formatierung von <s> in Farbe gray97 vor.

In diesem Beispiel unterstreichen wir <s> mit Hilfe eines gefurchten Rahmens mit 4 Pixel Dicke in Farbe gray97.

<style type="text/css"><!--
  s { 
    border-bottom-color:gray97; 
    border-bottom-width:4px; 
    border-bottom-style:groove;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Berührung mit der Maus die Farbe der Unterstreichung zu #262626 ändert.

<style type="text/css"><!--
  s: hover { 
    border-bottom-color: #262626;
  }
//-->
</style>

Die Idee ist dabei, voneinander unabhängige Formatierungen für Inhalt und Unterstreichung zu nutzen. Öfter sehen Sie dies bei Links. Der Text wird in einer Farbe dargestellt. Und die Unterstreichung in einer anderen. Das ist jedoch keine normale Unterstreichung, der Text hat keine Unterstreichung. Die Unterstreichung wird mit einem Rahmen simuliert und dieser Rahmen ist unabhängig vom Text.

Weiteres zu s erfahren Sie in Text in HTML. Möglichkeiten des hier genutzten Tag s lesen Sie in der HTML Referenz unter <s>.