Ressourcen: 256 Graustufen in HTML - Kombinationen mit Farbwert #6c6c6c

Graustufen enthalten natürlich alle 16 Graustufen und insbesondere die unbunten Grundfarben Schwarz und Weiß.

Um 256 Graustufen in HTML bzw. CSS zu erzeugen, wählen wir Farbwerte rr, gg und bb mit Werten von 0 bis 255 (d.h. hexadezimal 00 bis ff).

Hintergrundfarbwert #6c6c6c
Detail	:	Hintergrundfarbwert #6c6c6c	Verlauf nach Weiß		Verlauf nach Schwarz
Farbwert	:	#6c6c6c	#6c6c6c	#6c6c6c	#6c6c6c	#6c6c6c
Farbe	:	gray108	#818181	#818181	#5c5c5c	#5c5c5c
HTML	:	#6c6c6c	#969696	#969696	#4d4d4d	#4d4d4d
CSS	:	#6c6c6c	#ababab	#ababab	#3d3d3d	#3d3d3d
CSS (Wert)	:	#6c6c6c	#c0c0c0	#c0c0c0	#2e2e2e	#2e2e2e
CSS (kürzest)	:	#6c6c6c	#d5d5d5	#d5d5d5	#1e1e1e	#1e1e1e
CSS (RGB)	:	rgb(108,108,108)	#eaeaea	#eaeaea	#0f0f0f	#0f0f0f
CSS (%RGB)	:	rgb(42%,42%,42%)	#ffffff	#ffffff	#000000	#000000

Beispiele zu Kombinationen mit Farbwert #6c6c6c

Änderung der Hintergrundfarbe bei Hover von Tag dd

Die Hintergrundfarbe soll sich ändern, wenn man mit der Maus darauf zeigt. Für das Beispiel bereiten wir zunächst Formatierungen von <dd> vor.

Wir legen hier Farbwert #6c6c6c als Hintergrundfarbe von <dd> fest. Die Textfarbe behalten wir bei, setzen jedoch die Schriftart auf courier new und ändern die Größe der Schrift auf 13px.

<style type="text/css"><!--
  dd { 
    background-color:#da8ff5; 
    font-size:13px; 
    font-family:courier new;
  }
//-->
</style>

Nun stellen wir ein, dass bei Hover die Hintergrundfarbe auf Farbwert #6c6c6c gesetzt wird.

<style type="text/css"><!--
  dd:hover { 
    background-color:#6c6c6c;
  }
//-->
</style>

Mehr zu dd erfahren Sie in Listen und Glossare in HTML. Einzelheiten des hier verwendeten Tag <dd>.

Farbige Unterstreichung bei Tag label

Hier unterstreichen wir <label> mit Hilfe eines gefurchten Rahmens mit 2 Pixel Dicke in Farbwert #6c6c6c. Das ist mit HTML nicht möglich. Daher verwenden wir dafür CSS.

<style type="text/css"><!--
  label { 
    border-bottom-style:groove; 
    border-bottom-color:#6c6c6c; 
    border-bottom-width:2px;
  }
//-->
</style>

Die Idee ist hierbei, verschiedene Formatierungen für Inhalt und Unterstreichung zu nutzen. Öfter sehen Sie dies bei Links. Der Text wird in einer Farbe dargestellt. Und die Unterstreichung in einer anderen. Es ist aber keine normale Unterstreichung, der Text selbst ist gar nicht unterstrichen. Die Unterstreichung wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Mehr zum Thema können Sie in Formulare in HTML nachsehen. Möglichkeiten vom Tag label sind in der HTML Referenz unter <label> ausführlich gezeigt.