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

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 #333333			Schriftfarbwert #666666
Detail	:	Hintergrund #333333	Detail	:	Schrift #666666
Farbwert	:	#333333	Farbwert	:	#666666
Farbe	:	gray51	Farbe	:	gray102
HTML	:	#333333	HTML	:	#666666
HTML (Wert)	:	#333333	HTML (Wert)	:	#666666
CSS	:	#333333	CSS	:	#666666
CSS (Wert)	:	#333333	CSS (Wert)	:	#666666
CSS (kürzest)	:	#333	CSS (kürzest)	:	#666
CSS (RGB)	:	rgb(51,51,51)	CSS (RGB)	:	rgb(102,102,102)
CSS (%RGB)	:	rgb(20%,20%,20%)	CSS (%RGB)	:	rgb(40%,40%,40%)

Verlauf Hintergrundfarbwert #333333 nach Schriftfarbwert #666666
#333333	#3a3a3a	#414141	#484848	#505050	#575757	#5e5e5e	#666666
#333333	#3a3a3a	#414141	#484848	#505050	#575757	#5e5e5e	#666666

Kombination von #333333 und #666666
Cras id velit ante. 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				Die Ähnlichkeit von #666666 und #333333 beträgt 89.52%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 10.48%. Auf Hintergrund #333333 ist #666666 ungeeignet. Weder der Helligkeitsunterschied noch der Farbunterschied sind gross genug.

Hintergrundfarbwert #333333				Schriftfarbwert #666666
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#333333	#333333	#333333	#333333	#666666	#666666	#666666	#666666
#505050	#505050	#2b2b2b	#2b2b2b	#7b7b7b	#7b7b7b	#575757	#575757
#6d6d6d	#6d6d6d	#242424	#242424	#919191	#919191	#484848	#484848
#8a8a8a	#8a8a8a	#1d1d1d	#1d1d1d	#a7a7a7	#a7a7a7	#3a3a3a	#3a3a3a
#a7a7a7	#a7a7a7	#151515	#151515	#bdbdbd	#bdbdbd	#2b2b2b	#2b2b2b
#c4c4c4	#c4c4c4	#0e0e0e	#0e0e0e	#d3d3d3	#d3d3d3	#1d1d1d	#1d1d1d
#e1e1e1	#e1e1e1	#070707	#070707	#e9e9e9	#e9e9e9	#0e0e0e	#0e0e0e
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #333333 und Farbwert #666666

Füllen und Umranden bei Tag hr

In diesem Beispiel umranden wir <hr> mit einem 1 Punkte dicken, gestrichelten Rahmen in Farbwert #666666 . Den Hintergrund von <hr> färben wir entsprechend mit Farbwert #333333. Mit HTML ist dies kaum möglich. Wir nutzen deshalb CSS.

<style type="text/css"><!--
  hr { border:1pt dashed #666; background-color:#333; }
//-->
</style>

Mehr zum Thema erfahren Sie in Grundlegende Gestaltungselemente in HTML. Weiteres zum Tag hr finden Sie in der HTML Referenz unter <hr>.

Wechsel der Hintergrundfarbe bei Hover bei HTML-Tag a

Mit Tag <a> wird ein Verweis erzeugt. Er kann farblich gestaltet werden.

Die Hintergrundfarbe soll sich von Farbwert #333333 auf Farbwert #666666 ändern, wenn man mit der Maus auf <a> zeigt. Wir bereiten zunächst eine Formatierung von <a> in Farbwert #333333 vor.

Wir ändern zum Beispiel bei <a> die Hintergrundfarbe auf Farbwert #333333. Die Textfarbe ändern wir nicht, setzen jedoch die Schriftart auf sans-serif. Die Größe der Schrift verringern wir auf 97%.

<style type="text/css"><!--
  a { 
    font-size: 97%; 
    background-color: #333333; 
    font-family: sans-serif;
  }
//-->
</style>

Nun fordern wir, dass sich bei Berührung mit der Maus die Hintergrundfarbe zu #666666 ändert.

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

Weiteres zu a lesen Sie in Verweise und Protokolle in HTML. Beschreibung des Tag <a>.