Ressourcen: 16 Graustufen in HTML - Kombination von Farbwert #000000 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 #000000			Schriftfarbwert #666666
Detail	:	Hintergrund #000000	Detail	:	Schrift #666666
Farbwert	:	#000000	Farbwert	:	#666666
Farbe	:	black	Farbe	:	gray102
HTML	:	#000000	HTML	:	#666666
HTML (Wert)	:	#000000	HTML (Wert)	:	#666666
CSS	:	#000000	CSS	:	#666666
CSS (Wert)	:	#000000	CSS (Wert)	:	#666666
CSS (kürzest)	:	#000	CSS (kürzest)	:	#666
CSS (RGB)	:	rgb(0,0,0)	CSS (RGB)	:	rgb(102,102,102)
CSS (%RGB)	:	rgb(0%,0%,0%)	CSS (%RGB)	:	rgb(40%,40%,40%)

Verlauf Hintergrundfarbwert #000000 nach Schriftfarbwert #666666
#000000	#0e0e0e	#1d1d1d	#2b2b2b	#3a3a3a	#484848	#575757	#666666
#000000	#0e0e0e	#1d1d1d	#2b2b2b	#3a3a3a	#484848	#575757	#666666

Kombination von #000000 und #666666
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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				#666666 eignet sich nicht als Schriftfarbe auf Hintergrund #000000. Die Unterschiede in der Helligkeit und Farbe sind unzureichend. Die Ähnlichkeit von #666666 und #000000 beträgt 82.58%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 17.42%.

Hintergrundfarbwert #000000				Schriftfarbwert #666666
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#000000	#000000	#000000	#000000	#666666	#666666	#666666	#666666
#242424	#242424	#000000	#000000	#7b7b7b	#7b7b7b	#575757	#575757
#484848	#484848	#000000	#000000	#919191	#919191	#484848	#484848
#6d6d6d	#6d6d6d	#000000	#000000	#a7a7a7	#a7a7a7	#3a3a3a	#3a3a3a
#919191	#919191	#000000	#000000	#bdbdbd	#bdbdbd	#2b2b2b	#2b2b2b
#b6b6b6	#b6b6b6	#000000	#000000	#d3d3d3	#d3d3d3	#1d1d1d	#1d1d1d
#dadada	#dadada	#000000	#000000	#e9e9e9	#e9e9e9	#0e0e0e	#0e0e0e
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #000000 und Farbwert #666666

Text- und Unterstreichungsfarben von HTML-Tag cite

Wir ändern für dieses Beispiel die Textfarbe von <cite> auf Farbwert #666666. Die Schriftart ändern wir auf monospace. Die Schriftgröße setzen wir auf 13px. Wir unterstreichen den Inhalt von <cite> mit Hilfe eines herausstehenden Rahmens mit 4 Punkte Dicke in Farbwert #000000. Dies geht mit HTML nicht. Daher formatieren wir mit CSS.

<style type="text/css"><!--
  cite { 
    font-family:monospace; 
    border-bottom-width:4pt; 
    color:#666; 
    font-size:13px; 
    border-bottom-style:outset; 
    border-bottom-color:#000;
  }
//-->
</style>

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

Weiteres zum Tag cite lesen Sie in der HTML Referenz unter <cite>.

Wechsel der Umrandung bei Hover bei Befehl samp

Die Rahmenfarbe soll sich von Farbwert #000000 auf Farbwert #666666 ändern, wenn man mit der Maus auf <samp> zeigt. Bereiten wir zunächst eine Darstellung von <samp> in Farbwert #000000 vor.

In diesem Beispiel umranden wir <samp> mit einem 1 Pixel dicken, gestrichelten Rahmen in Farbwert #000000.

<style type="text/css"><!--
  samp { border:1px dashed #000; }
//-->
</style>

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

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

Mehr zum Thema erfahren Sie in Text in HTML. Einzelheiten vom Tag <samp>.