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

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.

Hintergrundfarbwert #222222			Schriftfarbwert #111111
Detail	:	Hintergrund #222222	Detail	:	Schrift #111111
Farbwert	:	#222222	Farbwert	:	#111111
Farbe	:	gray34	Farbe	:	gray17
HTML	:	#222222	HTML	:	#111111
HTML (Wert)	:	#222222	HTML (Wert)	:	#111111
CSS	:	#222222	CSS	:	#111111
CSS (Wert)	:	#222222	CSS (Wert)	:	#111111
CSS (kürzest)	:	#222	CSS (kürzest)	:	#111
CSS (RGB)	:	rgb(34,34,34)	CSS (RGB)	:	rgb(17,17,17)
CSS (%RGB)	:	rgb(13%,13%,13%)	CSS (%RGB)	:	rgb(6%,6%,6%)

Verlauf Hintergrundfarbwert #222222 nach Schriftfarbwert #111111
#222222	#1f1f1f	#1d1d1d	#1a1a1a	#181818	#151515	#131313	#111111
#222222	#1f1f1f	#1d1d1d	#1a1a1a	#181818	#151515	#131313	#111111

Kombination von #222222 und #111111
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 vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante.				Die Ähnlichkeit der Farben #111111 und #222222 ergibt sich zu 94.35%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 5.65%. #111111 ist nicht als Schriftfarbe auf Hintergrund #222222 geeignet. Weder der Helligkeitsunterschied noch der Farbunterschied sind gross genug.

Hintergrundfarbwert #222222				Schriftfarbwert #111111
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#222222	#222222	#222222	#222222	#111111	#111111	#111111	#111111
#414141	#414141	#1d1d1d	#1d1d1d	#333333	#333333	#0e0e0e	#0e0e0e
#616161	#616161	#181818	#181818	#555555	#555555	#0c0c0c	#0c0c0c
#808080	#808080	#131313	#131313	#777777	#777777	#090909	#090909
#a0a0a0	#a0a0a0	#0e0e0e	#0e0e0e	#999999	#999999	#070707	#070707
#bfbfbf	#bfbfbf	#090909	#090909	#bbbbbb	#bbbbbb	#040404	#040404
#dfdfdf	#dfdfdf	#040404	#040404	#dddddd	#dddddd	#020202	#020202
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #222222 und Farbwert #111111

Wechsel der Textfarbe bei Hover mit Befehl a

Mit Befehl <a> setzen Sie einen Hyperlink. Dieser kann hervorgehoben und farblich gestaltet werden.

Die Textfarbe soll sich von Farbwert #222222 auf Farbwert #111111 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Formatierung von <a> in Farbwert #222222 vor.

Wir legen z.B. bei <a> die Textfarbe auf Farbwert #222222 fest und setzen die Schriftgröße auf 13px:

<style type="text/css"><!--
  a { 
    color:#222222; 
    font-size:13px;
  }
//-->
</style>

Nun stellen wir ein, dass bei Berührung mit der Maus die Textfarbe auf #111111 gesetzt wird.

<style type="text/css"><!--
  a:hover { 
    color:#111111;
  }
//-->
</style>

Mehr zum Thema können Sie in Verweise und Protokolle in HTML nachsehen. Weiteres zum hier verwendeten Befehl <a>.

Wechsel der Hintergrundfarbe bei Hover bei Tag q

Die Hintergrundfarbe soll sich von Farbwert #222222 auf Farbwert #111111 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Darstellung von <q> in Farbwert #222222 vor.

Hier legen wir die Hintergrundfarbe von <q> auf Farbwert #222222 fest:

<style type="text/css"><!--
  q { 
    background-color:#222222;
  }
//-->
</style>

Jetzt fordern wir, dass bei Mausberührung die Hintergrundfarbe auf #111111 geändert wird.

<style type="text/css"><!--
  q: hover { 
    background-color: #111;
  }
//-->
</style>

Der HTML-Tag q ist in der HTML Referenz unter <q> beschrieben.