Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray202 und Farbe gray148

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 gray202			Schriftfarbe gray148
Detail	:	Hintergrund gray202	Detail	:	Schrift gray148
Farbe	:	gray202	Farbe	:	gray148
Farbwert	:	#cacaca	Farbwert	:	#949494
HTML	:	gray202	HTML	:	gray148
HTML (Wert)	:	#cacaca	HTML (Wert)	:	#949494
CSS	:	gray202	CSS	:	gray148
CSS (Wert)	:	#cacaca	CSS (Wert)	:	#949494
CSS (kürzest)	:	#cacaca	CSS (kürzest)	:	#949494
CSS (RGB)	:	rgb(202,202,202)	CSS (RGB)	:	rgb(148,148,148)
CSS (%RGB)	:	rgb(79%,79%,79%)	CSS (%RGB)	:	rgb(58%,58%,58%)

Verlauf Hintergrundfarbe gray202 nach Schriftfarbe gray148
#cacaca	#c2c2c2	#bababa	#b2b2b2	#ababab	#a3a3a3	#9b9b9b	#949494
#cacaca	#c2c2c2	#bababa	#b2b2b2	#ababab	#a3a3a3	#9b9b9b	#949494

Kombination von gray202 und gray148
Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante. 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.				Die Ähnlichkeit der Farben gray148 und gray202 beträgt 91.19%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 8.81%. Auf Hintergrund gray202 ist gray148 ungeeignet, weil die Unterschiede in der Helligkeit und Farbe zu gering sind.

Hintergrundfarbe gray202				Schriftfarbe gray148
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#cacaca	#cacaca	#cacaca	#cacaca	#949494	#949494	#949494	#949494
#d1d1d1	#d1d1d1	#adadad	#adadad	#a3a3a3	#a3a3a3	#7e7e7e	#7e7e7e
#d9d9d9	#d9d9d9	#909090	#909090	#b2b2b2	#b2b2b2	#696969	#696969
#e0e0e0	#e0e0e0	#737373	#737373	#c1c1c1	#c1c1c1	#545454	#545454
#e8e8e8	#e8e8e8	#565656	#565656	#d1d1d1	#d1d1d1	#3f3f3f	#3f3f3f
#efefef	#efefef	#393939	#393939	#e0e0e0	#e0e0e0	#2a2a2a	#2a2a2a
#f7f7f7	#f7f7f7	#1c1c1c	#1c1c1c	#efefef	#efefef	#151515	#151515
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray202 und Farbe gray148

Füllen und Umranden bei Tag button

Hier umranden wir <button> mit einem doppelten, 3 Punkte dicken Rahmen in Farbe gray148 . Den Hintergrund von <button> setzen wir entsprechend auf Farbe gray202. In HTML ist dies kaum machbar. Wir nutzen deshalb CSS.

<style type="text/css"><!--
  button { border:3pt double gray148; background-color:gray202; }
//-->
</style>

Weiteres zum Thema erfahren Sie in Formulare in HTML. Einzelheiten vom hier verwendeten Befehl <button>.

Wechsel der Textfarbe bei Hover bei Tag th

Die Textfarbe soll sich von Farbe gray202 auf Farbe gray148 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Darstellung von <th> in Farbe gray202 vor.

In diesem Beispiel legen wir Farbe gray202 als Textfarbe von <th> fest und erhöhen die Größe der Schrift auf 111%.

<style type="text/css"><!--
  th { 
    color: gray202; 
    font-size: 111%;
  }
//-->
</style>

Jetzt fordern wir, dass bei Mausberührung die Textfarbe auf gray148 geändert wird.

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

Mehr zum Thema können Sie in Tabellen in HTML lesen. Mehr zum hier genutzten HTML-Tag th ist in der HTML Referenz unter <th> genau beschrieben.