Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray44 und Farbwert #282828

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 gray44			Schriftfarbwert #282828
Detail	:	Hintergrund gray44	Detail	:	Schrift #282828
Farbe	:	gray44	Farbwert	:	#282828
Farbwert	:	#2c2c2c	Farbe	:	gray40
HTML	:	gray44	HTML	:	#282828
HTML (Wert)	:	#2c2c2c	HTML (Wert)	:	#282828
CSS	:	gray44	CSS	:	#282828
CSS (Wert)	:	#2c2c2c	CSS (Wert)	:	#282828
CSS (kürzest)	:	#2c2c2c	CSS (kürzest)	:	#282828
CSS (RGB)	:	rgb(44,44,44)	CSS (RGB)	:	rgb(40,40,40)
CSS (%RGB)	:	rgb(17%,17%,17%)	CSS (%RGB)	:	rgb(15%,15%,15%)

Verlauf Hintergrundfarbe gray44 nach Schriftfarbwert #282828
#2c2c2c	#2b2b2b	#2a2a2a	#2a2a2a	#292929	#292929	#282828	#282828
#2c2c2c	#2b2b2b	#2a2a2a	#2a2a2a	#292929	#292929	#282828	#282828

Kombination von gray44 und #282828
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 von #282828 und gray44 ergibt sich zu 94.97%. Die Lesbarkeit dieser Kombination bewerte ich mit 5.03%. Auf Hintergrund gray44 ist #282828 ungeeignet, da weder der Helligkeitsunterschied noch der Farbunterschied gross genug sind.

Hintergrundfarbe gray44				Schriftfarbwert #282828
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#2c2c2c	#2c2c2c	#2c2c2c	#2c2c2c	#282828	#282828	#282828	#282828
#4a4a4a	#4a4a4a	#252525	#252525	#464646	#464646	#222222	#222222
#686868	#686868	#1f1f1f	#1f1f1f	#656565	#656565	#1c1c1c	#1c1c1c
#868686	#868686	#191919	#191919	#848484	#848484	#161616	#161616
#a4a4a4	#a4a4a4	#121212	#121212	#a2a2a2	#a2a2a2	#111111	#111111
#c2c2c2	#c2c2c2	#0c0c0c	#0c0c0c	#c1c1c1	#c1c1c1	#0b0b0b	#0b0b0b
#e0e0e0	#e0e0e0	#060606	#060606	#e0e0e0	#e0e0e0	#050505	#050505
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray44 und Farbwert #282828

Hintergrund/Text-Kombination mit Tag a

Einen Verweis setzen Sie mit Befehl <a>. Diesen kann man farblich gestalten und hervorheben.

Hier ändern wir die Textfarbe von <a> auf Farbwert #282828 und die Hintergrundfarbe von <a> auf Farbe gray44. Als Schriftart setzen wir courier new und als Schriftgröße wählen wir 9pt.

<style type="text/css"><!--
  a { 
    background-color:gray44; 
    font-family:courier new; 
    font-size:9pt; 
    color:#282828;
  }
//-->
</style>

Weiteres zum Thema a erfahren Sie in Verweise und Protokolle in HTML. Mehr zum Tag a lesen Sie in der HTML Referenz unter <a>.

Wechsel der Umrandung bei Hover mit Befehl blockquote

Die Rahmenfarbe soll sich von Farbe gray44 auf Farbwert #282828 ändern, wenn man mit der Maus auf <blockquote> zeigt. Bereiten wir zunächst die Formatierung von <blockquote> in Farbe gray44 vor.

In diesem Beispiel umranden wir <blockquote> mit einem 3 Pixel dicken, gezahnten Rahmen in Farbe gray44.

<style type="text/css"><!--
  blockquote { 
    border-width: 3px; 
    border-color: gray44; 
    border-style: ridge;
  }
//-->
</style>

Jetzt fordern wir, dass bei Hover die Rahmenfarbe auf #282828 gesetzt wird.

<style type="text/css"><!--
  blockquote: hover { 
    border-color: #282828;
  }
//-->
</style>

Mehr zu blockquote können Sie in Blockorientierte Elemente in HTML nachsehen. Beschreibung vom Befehl <blockquote>.