Ressourcen: 16 Graustufen in HTML - Kombination von Farbwert #999999 und Farbwert #333333

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 #999999			Schriftfarbwert #333333
Detail	:	Hintergrund #999999	Detail	:	Schrift #333333
Farbwert	:	#999999	Farbwert	:	#333333
Farbe	:	gray153	Farbe	:	gray51
HTML	:	#999999	HTML	:	#333333
HTML (Wert)	:	#999999	HTML (Wert)	:	#333333
CSS	:	#999999	CSS	:	#333333
CSS (Wert)	:	#999999	CSS (Wert)	:	#333333
CSS (kürzest)	:	#999	CSS (kürzest)	:	#333
CSS (RGB)	:	rgb(153,153,153)	CSS (RGB)	:	rgb(51,51,51)
CSS (%RGB)	:	rgb(60%,60%,60%)	CSS (%RGB)	:	rgb(20%,20%,20%)

Verlauf Hintergrundfarbwert #999999 nach Schriftfarbwert #333333
#999999	#8a8a8a	#7b7b7b	#6d6d6d	#5e5e5e	#505050	#414141	#333333
#999999	#8a8a8a	#7b7b7b	#6d6d6d	#5e5e5e	#505050	#414141	#333333

Kombination von #999999 und #333333
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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.				#333333 ist nicht als Schriftfarbe auf Hintergrund #999999 geeignet, da sich sowohl Helligkeit als auch die Farben zu ähnlich sind. Die Ähnlichkeit der Farben #333333 und #999999 ergibt sich zu 78.88%. Die Lesbarkeit dieser Farbkombination liegt damit bei 21.12%.

Hintergrundfarbwert #999999				Schriftfarbwert #333333
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#999999	#999999	#999999	#999999	#333333	#333333	#333333	#333333
#a7a7a7	#a7a7a7	#838383	#838383	#505050	#505050	#2b2b2b	#2b2b2b
#b6b6b6	#b6b6b6	#6d6d6d	#6d6d6d	#6d6d6d	#6d6d6d	#242424	#242424
#c4c4c4	#c4c4c4	#575757	#575757	#8a8a8a	#8a8a8a	#1d1d1d	#1d1d1d
#d3d3d3	#d3d3d3	#414141	#414141	#a7a7a7	#a7a7a7	#151515	#151515
#e1e1e1	#e1e1e1	#2b2b2b	#2b2b2b	#c4c4c4	#c4c4c4	#0e0e0e	#0e0e0e
#f0f0f0	#f0f0f0	#151515	#151515	#e1e1e1	#e1e1e1	#070707	#070707
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #999999 und Farbwert #333333

Wechsel der Textfarbe bei Hover von Tag textarea

Die Textfarbe soll sich von Farbwert #999999 auf Farbwert #333333 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Formatierung von <textarea> in Farbwert #999999 vor.

Wir legen zum Beispiel Farbwert #999999 als Textfarbe von <textarea> fest:

<style type="text/css"><!--
  textarea { 
    color:#999999;
  }
//-->
</style>

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

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

Mehr zum Thema können Sie in Formulare in HTML lesen. Die Beschreibung des hier genutzten HTML-Tag textarea lesen Sie in der HTML Referenz unter <textarea>.

Text- und Unterstreichungsfarben von Tag caption

Hier ändern wir die Textfarbe von <caption> auf Farbwert #333333. Die Schriftart ändern wir auf verdana und ändern die Schriftgröße auf 13px. Wir unterstreichen den Inhalt von <caption> mit Hilfe eines doppelten Rahmens mit 1 Punkte Dicke in Farbwert #999999. Dies geht mit HTML kaum. Daher formatieren wir mit CSS.

<style type="text/css"><!--
  caption { 
    border-bottom: 1pt double #999999; 
    color: #333; 
    font-family: verdana; 
    font-size: 13px;
  }
//-->
</style>

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

Mehr zu caption finden Sie in Tabellen in HTML. Zur Beschreibung vom Tag <caption>.