Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #6c6c6c und Farbe gray139

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 #6c6c6c			Schriftfarbe gray139
Detail	:	Hintergrund #6c6c6c	Detail	:	Schrift gray139
Farbwert	:	#6c6c6c	Farbe	:	gray139
Farbe	:	gray108	Farbwert	:	#8b8b8b
HTML	:	#6c6c6c	HTML	:	gray139
HTML (Wert)	:	#6c6c6c	HTML (Wert)	:	#8b8b8b
CSS	:	#6c6c6c	CSS	:	gray139
CSS (Wert)	:	#6c6c6c	CSS (Wert)	:	#8b8b8b
CSS (kürzest)	:	#6c6c6c	CSS (kürzest)	:	#8b8b8b
CSS (RGB)	:	rgb(108,108,108)	CSS (RGB)	:	rgb(139,139,139)
CSS (%RGB)	:	rgb(42%,42%,42%)	CSS (%RGB)	:	rgb(54%,54%,54%)

Verlauf Hintergrundfarbwert #6c6c6c nach Schriftfarbe gray139
#6c6c6c	#707070	#747474	#797979	#7d7d7d	#828282	#868686	#8b8b8b
#6c6c6c	#707070	#747474	#797979	#7d7d7d	#828282	#868686	#8b8b8b

Kombination von #6c6c6c und gray139
Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna.				gray139 ist nicht als Schriftfarbe auf Hintergrund #6c6c6c geeignet. Die Helligkeit und Farben sind sich zu ähnlich. Die Ähnlichkeit der Farben gray139 und #6c6c6c ergibt sich zu 92.66%. Die Lesbarkeit dieser Kombination liegt damit bei 7.34%.

Hintergrundfarbwert #6c6c6c				Schriftfarbe gray139
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#6c6c6c	#6c6c6c	#6c6c6c	#6c6c6c	#8b8b8b	#8b8b8b	#8b8b8b	#8b8b8b
#818181	#818181	#5c5c5c	#5c5c5c	#9b9b9b	#9b9b9b	#777777	#777777
#969696	#969696	#4d4d4d	#4d4d4d	#acacac	#acacac	#636363	#636363
#ababab	#ababab	#3d3d3d	#3d3d3d	#bcbcbc	#bcbcbc	#4f4f4f	#4f4f4f
#c0c0c0	#c0c0c0	#2e2e2e	#2e2e2e	#cdcdcd	#cdcdcd	#3b3b3b	#3b3b3b
#d5d5d5	#d5d5d5	#1e1e1e	#1e1e1e	#dddddd	#dddddd	#272727	#272727
#eaeaea	#eaeaea	#0f0f0f	#0f0f0f	#eeeeee	#eeeeee	#131313	#131313
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiel zur Kombination von Farbwert #6c6c6c und Farbe gray139

Wechsel der Unterstreichung bei Hover von Tag address

Die Farbe der Unterstreichung soll sich von Farbwert #6c6c6c auf Farbe gray139 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Darstellung von <address> in Farbwert #6c6c6c vor.

In diesem Beispiel unterstreichen wir <address> mit Hilfe eines herausstehenden Rahmens mit 2 Pixel Dicke in Farbwert #6c6c6c.

<style type="text/css"><!--
  address { 
    border-bottom-style: outset; 
    border-bottom-color: #6c6c6c; 
    border-bottom-width: 2px;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Mausberührung die Unterstreichungsfarbe zu gray139 ändert.

<style type="text/css"><!--
  address: hover { 
    border-bottom-color: gray139;
  }
//-->
</style>

Die Idee ist, voneinander unabhängige Formatierungen für Inhalt und Unterstreichung zu verwenden. Öfter sieht man dies bei Hyperlinks. Der Text ist in einer Farbe. Und die Unterstreichung in einer anderen. Das ist aber keine wirkliche Unterstreichung, der Text selbst ist nicht unterstrichen. Sie wird mit einem Rahmen simuliert und dieser ist unabhängig vom Text.

Weiteres zu address können Sie in Blockorientierte Elemente in HTML lesen. Der HTML-Tag address ist in der HTML Referenz bei <address> genau gezeigt.