Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray58 und Farbwert #c1c1c1

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 gray58			Schriftfarbwert #c1c1c1
Detail	:	Hintergrund gray58	Detail	:	Schrift #c1c1c1
Farbe	:	gray58	Farbwert	:	#c1c1c1
Farbwert	:	#3a3a3a	Farbe	:	gray193
HTML	:	gray58	HTML	:	#c1c1c1
HTML (Wert)	:	#3a3a3a	HTML (Wert)	:	#c1c1c1
CSS	:	gray58	CSS	:	#c1c1c1
CSS (Wert)	:	#3a3a3a	CSS (Wert)	:	#c1c1c1
CSS (kürzest)	:	#3a3a3a	CSS (kürzest)	:	#c1c1c1
CSS (RGB)	:	rgb(58,58,58)	CSS (RGB)	:	rgb(193,193,193)
CSS (%RGB)	:	rgb(22%,22%,22%)	CSS (%RGB)	:	rgb(75%,75%,75%)

Verlauf Hintergrundfarbe gray58 nach Schriftfarbwert #c1c1c1
#3a3a3a	#4d4d4d	#606060	#737373	#878787	#9a9a9a	#adadad	#c1c1c1
#3a3a3a	#4d4d4d	#606060	#737373	#878787	#9a9a9a	#adadad	#c1c1c1

Kombination von gray58 und #c1c1c1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna.				Auf Hintergrund gray58 ist #c1c1c1 ungeeignet, da der Farbunterschied nicht ausreichend ist Die Ähnlichkeit von #c1c1c1 und gray58 ergibt sich zu 69.91%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 30.09%.

Hintergrundfarbe gray58				Schriftfarbwert #c1c1c1
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#3a3a3a	#3a3a3a	#3a3a3a	#3a3a3a	#c1c1c1	#c1c1c1	#c1c1c1	#c1c1c1
#565656	#565656	#313131	#313131	#c9c9c9	#c9c9c9	#a5a5a5	#a5a5a5
#727272	#727272	#292929	#292929	#d2d2d2	#d2d2d2	#898989	#898989
#8e8e8e	#8e8e8e	#212121	#212121	#dbdbdb	#dbdbdb	#6e6e6e	#6e6e6e
#aaaaaa	#aaaaaa	#181818	#181818	#e4e4e4	#e4e4e4	#525252	#525252
#c6c6c6	#c6c6c6	#101010	#101010	#ededed	#ededed	#373737	#373737
#e2e2e2	#e2e2e2	#080808	#080808	#f6f6f6	#f6f6f6	#1b1b1b	#1b1b1b
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray58 und Farbwert #c1c1c1

Wechsel der Unterstreichung bei Hover mit HTML-Tag address

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

Hier unterstreichen wir <address> mit Hilfe eines gepunkteten Rahmens mit 4 Pixel Dicke in Farbe gray58.

<style type="text/css"><!--
  address { 
    border-bottom-style:dotted; 
    border-bottom-color:gray58; 
    border-bottom-width:4px;
  }
//-->
</style>

Nun fordern wir, dass bei Mausberührung die Farbe der Unterstreichung auf #c1c1c1 geändert wird.

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

Die Idee ist hierbei, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu nutzen. Manchmal sehen Sie das bei Verweisen. Der Text wird in einer Farbe dargestellt. Die Unterstreichung in einer anderen. Dies ist jedoch keine "normale" Unterstreichung, der Text ist gar nicht unterstrichen. Sie wird mit einem Rahmen simuliert und dieser ist unabhängig vom Text.

Weiteres zum Thema finden Sie in Blockorientierte Elemente in HTML. Weiteres zum hier gezeigten HTML-Befehl <address>.

Füllen und Umranden bei Tag hr

Hier umranden wir <hr> mit einem 4 Punkte dicken, gepunkteten Rahmen in Farbwert #c1c1c1 . Die Hintergrundfarbe für <hr> setzen wir auf Farbe gray58. Dies geht in HTML nicht. Wir nutzen deshalb CSS.

<style type="text/css"><!--
  hr { 
    border-color:#c1c1c1; 
    border-style:dotted; 
    border-width:4pt; 
    background-color:gray58;
  }
//-->
</style>

Weiteres zum Thema hr können Sie in Grundlegende Gestaltungselemente in HTML finden. Die Beschreibung vom Tag hr finden Sie in der HTML Referenz unter <hr>.