Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray91 und Farbe gray221

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 gray91			Schriftfarbe gray221
Detail	:	Hintergrund gray91	Detail	:	Schrift gray221
Farbe	:	gray91	Farbe	:	gray221
Farbwert	:	#5b5b5b	Farbwert	:	#dddddd
HTML	:	gray91	HTML	:	gray221
HTML (Wert)	:	#5b5b5b	HTML (Wert)	:	#dddddd
CSS	:	gray91	CSS	:	gray221
CSS (Wert)	:	#5b5b5b	CSS (Wert)	:	#dddddd
CSS (kürzest)	:	#5b5b5b	CSS (kürzest)	:	#ddd
CSS (RGB)	:	rgb(91,91,91)	CSS (RGB)	:	rgb(221,221,221)
CSS (%RGB)	:	rgb(35%,35%,35%)	CSS (%RGB)	:	rgb(86%,86%,86%)

Verlauf Hintergrundfarbe gray91 nach Schriftfarbe gray221
#5b5b5b	#6d6d6d	#808080	#929292	#a5a5a5	#b7b7b7	#cacaca	#dddddd
#5b5b5b	#6d6d6d	#808080	#929292	#a5a5a5	#b7b7b7	#cacaca	#dddddd

Kombination von gray91 und gray221
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in.				Auf Hintergrund gray91 ist gray221 ungeeignet. Zwar ist der Helligkeitsunterschied gross genug, die Farben selbst sind jedoch zu ähnlich. Die Ähnlichkeit der Farben gray221 und gray91 beträgt 76.19%. Die Lesbarkeit dieser Kombination liegt damit bei 23.81%.

Hintergrundfarbe gray91				Schriftfarbe gray221
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#5b5b5b	#5b5b5b	#5b5b5b	#5b5b5b	#dddddd	#dddddd	#dddddd	#dddddd
#727272	#727272	#4e4e4e	#4e4e4e	#e1e1e1	#e1e1e1	#bdbdbd	#bdbdbd
#898989	#898989	#414141	#414141	#e6e6e6	#e6e6e6	#9d9d9d	#9d9d9d
#a1a1a1	#a1a1a1	#343434	#343434	#ebebeb	#ebebeb	#7e7e7e	#7e7e7e
#b8b8b8	#b8b8b8	#272727	#272727	#f0f0f0	#f0f0f0	#5e5e5e	#5e5e5e
#d0d0d0	#d0d0d0	#1a1a1a	#1a1a1a	#f5f5f5	#f5f5f5	#3f3f3f	#3f3f3f
#e7e7e7	#e7e7e7	#0d0d0d	#0d0d0d	#fafafa	#fafafa	#1f1f1f	#1f1f1f
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray91 und Farbe gray221

Wechsel der Textfarbe bei Hover mit HTML-Befehl p

Die Textfarbe soll sich von Farbe gray91 auf Farbe gray221 ändern, wenn man mit der Maus auf <p> zeigt. Wir bereiten zunächst eine Darstellung von <p> in Farbe gray91 vor.

Wir legen für dieses Beispiel die Textfarbe von <p> auf Farbe gray91 fest.

<style type="text/css"><!--
  p { 
    color:gray91;
  }
//-->
</style>

Nun fordern wir, dass bei Mausberührung die Textfarbe auf gray221 gesetzt wird.

<style type="text/css"><!--
  p: hover { 
    color: gray221;
  }
//-->
</style>

Mehr zum Thema können Sie in Grundlegende Gestaltungselemente in HTML lesen. Weiteres zum Tag p lesen Sie in der HTML Referenz unter <p>.

Füllen und Umranden mit HTML-Tag h3

Eine Überschrift setzt man mit Befehl <h3>. Diese kann man farblich gestalten und hervorheben.

Bei diesem Beispiel umranden wir <h3> mit einem 2 Pixel dicken, gefurchten Rahmen in Farbe gray221 . Den Hintergrund von <h3> setzen wir entsprechend auf Farbe gray91. Dies geht mit HTML nicht. Wir verwenden daher CSS zur Formatierung.

<style type="text/css"><!--
  h3 { 
    border-color: gray221; 
    background-color: gray91; 
    border-width: 2px; 
    border-style: groove;
  }
//-->
</style>

Mehr zu h3 lesen Sie in Grundlegende Gestaltungselemente in HTML. Möglichkeiten des Tag h3 sind in der HTML Referenz unter <h3> ausführlich gezeigt.