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

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 #444444
Detail	:	Hintergrund gray204	Detail	:	Schrift #444444
Farbe	:	gray204	Farbwert	:	#444444
Farbwert	:	#cccccc	Farbe	:	gray68
HTML	:	gray204	HTML	:	#444444
HTML (Wert)	:	#cccccc	HTML (Wert)	:	#444444
CSS	:	gray204	CSS	:	#444444
CSS (Wert)	:	#cccccc	CSS (Wert)	:	#444444
CSS (kürzest)	:	#ccc	CSS (kürzest)	:	#444
CSS (RGB)	:	rgb(204,204,204)	CSS (RGB)	:	rgb(68,68,68)
CSS (%RGB)	:	rgb(80%,80%,80%)	CSS (%RGB)	:	rgb(26%,26%,26%)

Verlauf Hintergrundfarbe gray204 nach Schriftfarbwert #444444
#cccccc	#b8b8b8	#a5a5a5	#919191	#7e7e7e	#6a6a6a	#575757	#444444
#cccccc	#b8b8b8	#a5a5a5	#919191	#7e7e7e	#6a6a6a	#575757	#444444

Kombination von gray204 und #444444
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in. 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.				#444444 eignet sich nicht als Schriftfarbe auf Hintergrund gray204. Zwar ist der Helligkeitsunterschied in Ordnung, doch die Farben selbst sind zu ähnlich. Die Ähnlichkeit der Farben #444444 und gray204 beträgt 71.12%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 28.88%.

Hintergrundfarbe gray204				Schriftfarbwert #444444
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#cccccc	#cccccc	#cccccc	#cccccc	#444444	#444444	#444444	#444444
#d3d3d3	#d3d3d3	#aeaeae	#aeaeae	#5e5e5e	#5e5e5e	#3a3a3a	#3a3a3a
#dadada	#dadada	#919191	#919191	#797979	#797979	#303030	#303030
#e1e1e1	#e1e1e1	#747474	#747474	#949494	#949494	#262626	#262626
#e9e9e9	#e9e9e9	#575757	#575757	#aeaeae	#aeaeae	#1d1d1d	#1d1d1d
#f0f0f0	#f0f0f0	#3a3a3a	#3a3a3a	#c9c9c9	#c9c9c9	#131313	#131313
#f7f7f7	#f7f7f7	#1d1d1d	#1d1d1d	#e4e4e4	#e4e4e4	#090909	#090909
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray204 und Farbwert #444444

Text- und Unterstreichungsfarben von HTML-Tag address

Hier ändern wir die Textfarbe von <address> auf Farbwert #444444. Die Schriftart setzen wir auf monospace und verkleinern die Schriftgröße auf 99%. Wir unterstreichen den Inhalt von <address> mit Hilfe eines gestrichelten Rahmens mit 3 Pixel Dicke in Farbe gray204. Das geht in HTML kaum. Deshalb nutzen wir hierfür CSS.

<style type="text/css"><!--
  address { 
    border-bottom:3px dashed gray204; 
    font-family:monospace; 
    color:#444; 
    font-size:99%;
  }
//-->
</style>

Die Idee ist, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben.

Weiteres zum Thema finden Sie in Blockorientierte Elemente in HTML. Die Beschreibung vom hier verwendeten HTML-Tag address finden Sie in der HTML Referenz unter <address>.

Wechsel der Textfarbe bei Hover von Tag span

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

Als Beispiel legen wir die Textfarbe von <span> auf Farbe gray204 fest. Die Hintergrundfarbe behalten wir bei, setzen jedoch die Schriftart auf verdana:

<style type="text/css"><!--
  span { 
    font-family:verdana; 
    color:gray204;
  }
//-->
</style>

Nun fordern wir, dass sich bei Hover die Textfarbe zu #444444 ändert.

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

Mehr zum Befehl <span>.