Ressourcen: 16 Graustufen in HTML - Kombination von Farbe gray204 und Farbwert #222222

Graustufen enthalten insbesondere die unbunten Grundfarben Schwarz und Weiß.

Um 16 Graustufen in HTML bzw. CSS zu erzeugen, wählen wir Farbwerte rr, gg und bb mit Werten von 0 bis 15 (d.h. hexadezimal 0 bis f) für r, g und b.

Hintergrundfarbe gray204			Schriftfarbwert #222222
Detail	:	Hintergrund gray204	Detail	:	Schrift #222222
Farbe	:	gray204	Farbwert	:	#222222
Farbwert	:	#cccccc	Farbe	:	gray34
HTML	:	gray204	HTML	:	#222222
HTML (Wert)	:	#cccccc	HTML (Wert)	:	#222222
CSS	:	gray204	CSS	:	#222222
CSS (Wert)	:	#cccccc	CSS (Wert)	:	#222222
CSS (kürzest)	:	#ccc	CSS (kürzest)	:	#222
CSS (RGB)	:	rgb(204,204,204)	CSS (RGB)	:	rgb(34,34,34)
CSS (%RGB)	:	rgb(80%,80%,80%)	CSS (%RGB)	:	rgb(13%,13%,13%)

Verlauf Hintergrundfarbe gray204 nach Schriftfarbwert #222222
#cccccc	#b3b3b3	#9b9b9b	#838383	#6a6a6a	#525252	#3a3a3a	#222222
#cccccc	#b3b3b3	#9b9b9b	#838383	#6a6a6a	#525252	#3a3a3a	#222222

Kombination von gray204 und #222222
Cras vestibulum tristique erat, ac interdum justo cursus in. 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				#222222 eignet sich als Schriftfarbe auf Hintergrund gray204, da Unterschied in den Helligkeiten und Unterschied in den Farben ok sind. Die Ähnlichkeit der Farben #222222 und gray204 ergibt sich zu 52.82%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 47.18%.

Hintergrundfarbe gray204				Schriftfarbwert #222222
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#cccccc	#cccccc	#cccccc	#cccccc	#222222	#222222	#222222	#222222
#d3d3d3	#d3d3d3	#aeaeae	#aeaeae	#414141	#414141	#1d1d1d	#1d1d1d
#dadada	#dadada	#919191	#919191	#616161	#616161	#181818	#181818
#e1e1e1	#e1e1e1	#747474	#747474	#808080	#808080	#131313	#131313
#e9e9e9	#e9e9e9	#575757	#575757	#a0a0a0	#a0a0a0	#0e0e0e	#0e0e0e
#f0f0f0	#f0f0f0	#3a3a3a	#3a3a3a	#bfbfbf	#bfbfbf	#090909	#090909
#f7f7f7	#f7f7f7	#1d1d1d	#1d1d1d	#dfdfdf	#dfdfdf	#040404	#040404
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray204 und Farbwert #222222

Füllen und Umranden von Befehl fieldset

Für dieses Beispiel umranden wir <fieldset> mit einem gefurchten, 4 Punkte dicken Rahmen in Farbwert #222222 . Die Hintergrundfarbe für <fieldset> färben wir mit Farbe gray204. Das ist mit HTML nicht möglich. Wir verwenden deshalb CSS zur Formatierung.

<style type="text/css"><!--
  fieldset { border:4pt groove #222; background-color:gray204; }
//-->
</style>

Weiteres zum Thema fieldset können Sie in Formulare in HTML erfahren. Mehr zum hier gezeigten HTML-Tag fieldset finden Sie in der HTML Referenz unter <fieldset>.

Wechsel der Umrandung bei Hover mit Tag ins

Die Rahmenfarbe soll sich von Farbe gray204 auf Farbwert #222222 ändern, wenn man mit der Maus auf <ins> zeigt. Wir bereiten zunächst eine Formatierung von <ins> in Farbe gray204 vor.

In diesem Beispiel umranden wir <ins> mit einem 3 Pixel dicken, einfallenden Rahmen in Farbe gray204.

<style type="text/css"><!--
  ins { border:3px inset gray204; }
//-->
</style>

Jetzt fordern wir, dass sich bei Berührung mit der Maus die Rahmenfarbe zu #222222 ändert.

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

Beschreibung des HTML-Befehl <ins>.