Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray213 und Farbe gray51

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 gray213			Schriftfarbe gray51
Detail	:	Hintergrund gray213	Detail	:	Schrift gray51
Farbe	:	gray213	Farbe	:	gray51
Farbwert	:	#d5d5d5	Farbwert	:	#333333
HTML	:	gray213	HTML	:	gray51
HTML (Wert)	:	#d5d5d5	HTML (Wert)	:	#333333
CSS	:	gray213	CSS	:	gray51
CSS (Wert)	:	#d5d5d5	CSS (Wert)	:	#333333
CSS (kürzest)	:	#d5d5d5	CSS (kürzest)	:	#333
CSS (RGB)	:	rgb(213,213,213)	CSS (RGB)	:	rgb(51,51,51)
CSS (%RGB)	:	rgb(83%,83%,83%)	CSS (%RGB)	:	rgb(20%,20%,20%)

Verlauf Hintergrundfarbe gray213 nach Schriftfarbe gray51
#d5d5d5	#bdbdbd	#a6a6a6	#8f8f8f	#787878	#616161	#4a4a4a	#333333
#d5d5d5	#bdbdbd	#a6a6a6	#8f8f8f	#787878	#616161	#4a4a4a	#333333

Kombination von gray213 und gray51
Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in. 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				Die Ähnlichkeit von gray51 und gray213 ergibt sich zu 59.01%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 40.99%. gray51 ist nicht als Schriftfarbe auf Hintergrund gray213 geeignet, da der Farbunterschied zu gering ist

Hintergrundfarbe gray213				Schriftfarbe gray51
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#d5d5d5	#d5d5d5	#d5d5d5	#d5d5d5	#333333	#333333	#333333	#333333
#dbdbdb	#dbdbdb	#b6b6b6	#b6b6b6	#505050	#505050	#2b2b2b	#2b2b2b
#e1e1e1	#e1e1e1	#989898	#989898	#6d6d6d	#6d6d6d	#242424	#242424
#e7e7e7	#e7e7e7	#797979	#797979	#8a8a8a	#8a8a8a	#1d1d1d	#1d1d1d
#ededed	#ededed	#5b5b5b	#5b5b5b	#a7a7a7	#a7a7a7	#151515	#151515
#f3f3f3	#f3f3f3	#3c3c3c	#3c3c3c	#c4c4c4	#c4c4c4	#0e0e0e	#0e0e0e
#f9f9f9	#f9f9f9	#1e1e1e	#1e1e1e	#e1e1e1	#e1e1e1	#070707	#070707
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray213 und Farbe gray51

Füllen und Umranden mit HTML-Tag hr

Hier umranden wir <hr> mit einem 5 Pixel dicken, herausstehenden Rahmen in Farbe gray51 . Den Hintergrund von <hr> färben wir entsprechend mit Farbe gray213. Dies geht in HTML nicht. Deshalb verwenden wir hier CSS zur Formatierung.

<style type="text/css"><!--
  hr { border:5px outset gray51; background-color:gray213; }
//-->
</style>

Weiteres zum Thema finden Sie in Grundlegende Gestaltungselemente in HTML. Einzelheiten vom hier genutzten HTML-Befehl <hr>.

Wechsel der Hintergrundfarbe bei Hover von Tag a

Einen Hyperlink erzeugt man mit HTML-Tag <a>. Diesen können Sie farblich gestalten und hervorheben.

Die Hintergrundfarbe soll sich von Farbe gray213 auf Farbe gray51 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Darstellung von <a> in Farbe gray213 vor.

In diesem Beispiel legen wir bei <a> die Hintergrundfarbe auf Farbe gray213 fest. Die Textfarbe behalten wir bei. Die Schriftart setzen wir auf verdana und setzen die Größe der Schrift auf 13px:

<style type="text/css"><!--
  a { 
    background-color: gray213; 
    font-size: 13px; 
    font-family: verdana;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Hover die Hintergrundfarbe auf gray51 ändert.

<style type="text/css"><!--
  a:hover { 
    background-color:gray51;
  }
//-->
</style>

Weiteres zum Thema erfahren Sie in Verweise und Protokolle in HTML. Mehr zum hier gezeigten HTML-Befehl a finden Sie in der HTML Referenz unter <a>.