Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray74 und Farbe gray32

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 gray74			Schriftfarbe gray32
Detail	:	Hintergrund gray74	Detail	:	Schrift gray32
Farbe	:	gray74	Farbe	:	gray32
Farbwert	:	#4a4a4a	Farbwert	:	#202020
HTML	:	gray74	HTML	:	gray32
HTML (Wert)	:	#4a4a4a	HTML (Wert)	:	#202020
CSS	:	gray74	CSS	:	gray32
CSS (Wert)	:	#4a4a4a	CSS (Wert)	:	#202020
CSS (kürzest)	:	#4a4a4a	CSS (kürzest)	:	#202020
CSS (RGB)	:	rgb(74,74,74)	CSS (RGB)	:	rgb(32,32,32)
CSS (%RGB)	:	rgb(29%,29%,29%)	CSS (%RGB)	:	rgb(12%,12%,12%)

Verlauf Hintergrundfarbe gray74 nach Schriftfarbe gray32
#4a4a4a	#444444	#3e3e3e	#383838	#323232	#2c2c2c	#262626	#202020
#4a4a4a	#444444	#3e3e3e	#383838	#323232	#2c2c2c	#262626	#202020

Kombination von gray74 und gray32
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna.				Die Ähnlichkeit von gray32 und gray74 beträgt 91.25%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 8.75%. Auf Hintergrund gray74 ist gray32 ungeeignet, da die Unterschiede in der Helligkeit und Farbe unzureichend sind.

Hintergrundfarbe gray74				Schriftfarbe gray32
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#4a4a4a	#4a4a4a	#4a4a4a	#4a4a4a	#202020	#202020	#202020	#202020
#636363	#636363	#3f3f3f	#3f3f3f	#3f3f3f	#3f3f3f	#1b1b1b	#1b1b1b
#7d7d7d	#7d7d7d	#343434	#343434	#5f5f5f	#5f5f5f	#161616	#161616
#979797	#979797	#2a2a2a	#2a2a2a	#7f7f7f	#7f7f7f	#121212	#121212
#b1b1b1	#b1b1b1	#1f1f1f	#1f1f1f	#9f9f9f	#9f9f9f	#0d0d0d	#0d0d0d
#cbcbcb	#cbcbcb	#151515	#151515	#bfbfbf	#bfbfbf	#090909	#090909
#e5e5e5	#e5e5e5	#0a0a0a	#0a0a0a	#dfdfdf	#dfdfdf	#040404	#040404
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray74 und Farbe gray32

Füllen und Umranden von HTML-Befehl img

In diesem Beispiel umranden wir <img> mit einem doppelten, 1 Punkte dicken Rahmen in Farbe gray32 . Die Hintergrundfarbe für <img> färben wir entsprechend mit Farbe gray74. Mit HTML geht dies nicht. Deshalb formatieren wir mit CSS.

<style type="text/css"><!--
  img { 
    border-style:double; 
    border-color:gray32; 
    background-color:gray74; 
    border-width:1pt;
  }
//-->
</style>

Mehr zu img lesen Sie in Grafik in HTML. Einzelheiten des Tag <img>.

Wechsel der Umrandung bei Hover von HTML-Befehl strike

Die Rahmenfarbe soll sich von Farbe gray74 auf Farbe gray32 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Darstellung von <strike> in Farbe gray74 vor.

In diesem Beispiel umranden wir <strike> mit einem 5 Pixel dicken, doppelten Rahmen in Farbe gray74.

<style type="text/css"><!--
  strike { 
    border-color:gray74; 
    border-width:5px; 
    border-style:double;
  }
//-->
</style>

Nun fordern wir, dass bei Berührung mit der Maus die Rahmenfarbe auf gray32 gesetzt wird.

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

Mehr zum Thema strike können Sie in Text in HTML finden. Weiteres zum Tag strike ist in der HTML Referenz unter <strike> ausführlich zusammengestellt.