Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray55 und Farbe gray92

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 gray55			Schriftfarbe gray92
Detail	:	Hintergrund gray55	Detail	:	Schrift gray92
Farbe	:	gray55	Farbe	:	gray92
Farbwert	:	#373737	Farbwert	:	#5c5c5c
HTML	:	gray55	HTML	:	gray92
HTML (Wert)	:	#373737	HTML (Wert)	:	#5c5c5c
CSS	:	gray55	CSS	:	gray92
CSS (Wert)	:	#373737	CSS (Wert)	:	#5c5c5c
CSS (kürzest)	:	#373737	CSS (kürzest)	:	#5c5c5c
CSS (RGB)	:	rgb(55,55,55)	CSS (RGB)	:	rgb(92,92,92)
CSS (%RGB)	:	rgb(21%,21%,21%)	CSS (%RGB)	:	rgb(36%,36%,36%)

Verlauf Hintergrundfarbe gray55 nach Schriftfarbe gray92
#373737	#3c3c3c	#414141	#464646	#4c4c4c	#515151	#565656	#5c5c5c
#373737	#3c3c3c	#414141	#464646	#4c4c4c	#515151	#565656	#5c5c5c

Kombination von gray55 und gray92
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Die Ähnlichkeit von gray92 und gray55 ergibt sich zu 91.52%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 8.48%. gray92 eignet sich nicht als Schriftfarbe auf Hintergrund gray55, weil weder der Helligkeitsunterschied noch der Farbunterschied geeignet sind.

Hintergrundfarbe gray55				Schriftfarbe gray92
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#373737	#373737	#373737	#373737	#5c5c5c	#5c5c5c	#5c5c5c	#5c5c5c
#535353	#535353	#2f2f2f	#2f2f2f	#737373	#737373	#4e4e4e	#4e4e4e
#707070	#707070	#272727	#272727	#8a8a8a	#8a8a8a	#414141	#414141
#8c8c8c	#8c8c8c	#1f1f1f	#1f1f1f	#a1a1a1	#a1a1a1	#343434	#343434
#a9a9a9	#a9a9a9	#171717	#171717	#b9b9b9	#b9b9b9	#272727	#272727
#c5c5c5	#c5c5c5	#0f0f0f	#0f0f0f	#d0d0d0	#d0d0d0	#1a1a1a	#1a1a1a
#e2e2e2	#e2e2e2	#070707	#070707	#e7e7e7	#e7e7e7	#0d0d0d	#0d0d0d
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray55 und Farbe gray92

Füllen und Umranden mit Befehl dfn

In diesem Beispiel umranden wir <dfn> mit einem . Den Hintergrund von <dfn> färben wir entsprechend mit Farbe gray55. Dies geht in HTML kaum. Deshalb nutzen wir dafür CSS.

<style type="text/css"><!--
  dfn { border:2pt inset gray92; background-color:gray55; }
//-->
</style>

Weiteres zum Thema dfn lesen Sie in Text in HTML. Weiteres zum hier verwendeten HTML-Befehl dfn ist in der HTML Referenz bei <dfn> beschrieben.

Wechsel der Umrandung bei Hover bei HTML-Tag h3

Eine Überschrift setzt man mit Befehl <h3>. Sie kann farblich gestaltet werden.

Die Rahmenfarbe soll sich von Farbe gray55 auf Farbe gray92 ändern, wenn man mit der Maus auf <h3> zeigt. Bereiten wir zunächst eine Formatierung von <h3> in Farbe gray55 vor.

In diesem Beispiel umranden wir <h3> mit einem 2 Pixel dicken, einfallenden Rahmen in Farbe gray55.

<style type="text/css"><!--
  h3 { 
    border-color:gray55; 
    border-style:inset; 
    border-width:2px;
  }
//-->
</style>

Nun fordern wir, dass sich bei Hover die Rahmenfarbe zu gray92 ändert.

<style type="text/css"><!--
  h3:hover { 
    border-color:gray92;
  }
//-->
</style>

Weiteres zu h3 erfahren Sie in Grundlegende Gestaltungselemente in HTML. Möglichkeiten des hier verwendeten HTML-Tag h3 sind in der HTML Referenz unter <h3> beschrieben.