Ressourcen: 256 Graustufen in HTML - Kombinationen mit Farbwert #7c7c7c

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 #7c7c7c
Detail	:	Hintergrundfarbwert #7c7c7c	Verlauf nach Weiß		Verlauf nach Schwarz
Farbwert	:	#7c7c7c	#7c7c7c	#7c7c7c	#7c7c7c	#7c7c7c
Farbe	:	gray124	#8e8e8e	#8e8e8e	#6a6a6a	#6a6a6a
HTML	:	#7c7c7c	#a1a1a1	#a1a1a1	#585858	#585858
CSS	:	#7c7c7c	#b4b4b4	#b4b4b4	#464646	#464646
CSS (Wert)	:	#7c7c7c	#c6c6c6	#c6c6c6	#353535	#353535
CSS (kürzest)	:	#7c7c7c	#d9d9d9	#d9d9d9	#232323	#232323
CSS (RGB)	:	rgb(124,124,124)	#ececec	#ececec	#111111	#111111
CSS (%RGB)	:	rgb(48%,48%,48%)	#ffffff	#ffffff	#000000	#000000

Beispiele zu Kombinationen mit Farbwert #7c7c7c

Änderung der Hintergrundfarbe bei Hover von HTML-Tag a

Ein Link wird mit HTML-Befehl <a> erzeugt. Dieser kann hervorgehoben und farblich gestaltet werden.

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

Wir setzen z.B. bei <a> die Hintergrundfarbe auf Farbwert #7c7c7c und setzen die Größe der Schrift auf 96%:

<style type="text/css"><!--
  a { 
    font-size:96%; 
    background-color:#164be6;
  }
//-->
</style>

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

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

Weiteres zum Thema können Sie in Verweise und Protokolle in HTML nachlesen. Einzelheiten des hier gezeigten HTML-Tag a sind in der HTML Referenz bei <a> ausführlich gezeigt.

Umrandung mit Befehl select

In diesem Beispiel umranden wir <select> mit einem 1 Pixel dicken, einfallenden Rahmen in Farbwert #7c7c7c. Das ist in HTML kaum möglich. Daher verwenden wir CSS.

<style type="text/css"><!--
  select { 
    border-style:inset; 
    border-color:#7c7c7c; 
    border-width:1px;
  }
//-->
</style>

Weiteres zu select können Sie in Formulare in HTML erfahren. Einzelheiten des hier gezeigten Befehl select sind in der HTML Referenz bei <select> genau beschrieben.