Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #565656 und Farbwert #ececec

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 #565656			Schriftfarbwert #ececec
Detail	:	Hintergrund #565656	Detail	:	Schrift #ececec
Farbwert	:	#565656	Farbwert	:	#ececec
Farbe	:	gray86	Farbe	:	gray236
HTML	:	#565656	HTML	:	#ececec
HTML (Wert)	:	#565656	HTML (Wert)	:	#ececec
CSS	:	#565656	CSS	:	#ececec
CSS (Wert)	:	#565656	CSS (Wert)	:	#ececec
CSS (kürzest)	:	#565656	CSS (kürzest)	:	#ececec
CSS (RGB)	:	rgb(86,86,86)	CSS (RGB)	:	rgb(236,236,236)
CSS (%RGB)	:	rgb(33%,33%,33%)	CSS (%RGB)	:	rgb(92%,92%,92%)

Verlauf Hintergrundfarbwert #565656 nach Schriftfarbwert #ececec
#565656	#6b6b6b	#808080	#969696	#ababab	#c1c1c1	#d6d6d6	#ececec
#565656	#6b6b6b	#808080	#969696	#ababab	#c1c1c1	#d6d6d6	#ececec

Kombination von #565656 und #ececec
Cras id velit ante. 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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Die Ähnlichkeit der Farben #ececec und #565656 ergibt sich zu 70.42%. Die Lesbarkeit dieser Farbkombination liegt damit bei 29.58%. Auf Hintergrund #565656 ist #ececec ungeeignet. Zwar ist der Helligkeitsunterschied gross genug, die Farben selbst sind sich jedoch zu ähnlich.

Hintergrundfarbwert #565656				Schriftfarbwert #ececec
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#565656	#565656	#565656	#565656	#ececec	#ececec	#ececec	#ececec
#6e6e6e	#6e6e6e	#494949	#494949	#eeeeee	#eeeeee	#cacaca	#cacaca
#868686	#868686	#3d3d3d	#3d3d3d	#f1f1f1	#f1f1f1	#a8a8a8	#a8a8a8
#9e9e9e	#9e9e9e	#313131	#313131	#f4f4f4	#f4f4f4	#868686	#868686
#b6b6b6	#b6b6b6	#242424	#242424	#f6f6f6	#f6f6f6	#656565	#656565
#cecece	#cecece	#181818	#181818	#f9f9f9	#f9f9f9	#434343	#434343
#e6e6e6	#e6e6e6	#0c0c0c	#0c0c0c	#fcfcfc	#fcfcfc	#212121	#212121
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #565656 und Farbwert #ececec

Wechsel der Umrandung bei Hover von HTML-Tag a

Ein Link wird mit HTML-Tag <a> gesetzt. Diesen können Sie farblich gestalten.

Die Rahmenfarbe soll sich von Farbwert #565656 auf Farbwert #ececec ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Formatierung von <a> in Farbwert #565656 vor.

In diesem Beispiel umranden wir <a> mit einem 4 Pixel dicken, doppelten Rahmen in Farbwert #565656.

<style type="text/css"><!--
  a { border:4px double #565656; }
//-->
</style>

Nun stellen wir ein, dass sich bei Berührung mit der Maus die Rahmenfarbe auf #ececec ändert.

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

Weiteres zum Thema a erfahren Sie in Verweise und Protokolle in HTML. Die Beschreibung des Befehl a lesen Sie in der HTML Referenz unter <a>.

Wechsel der Hintergrundfarbe bei Hover von Tag dt

Die Hintergrundfarbe soll sich von Farbwert #565656 auf Farbwert #ececec ändern, wenn man mit der Maus auf <dt> zeigt. Bereiten wir zunächst die Formatierung von <dt> in Farbwert #565656 vor.

Wir legen zum Beispiel Farbwert #565656 als Hintergrundfarbe von <dt> fest. Die Textfarbe behalten wir bei, setzen jedoch die Schriftart auf verdana. Die Größe der Schrift ändern wir auf 13px:

<style type="text/css"><!--
  dt { 
    font-size:13px; 
    background-color:#565656; 
    font-family:verdana;
  }
//-->
</style>

Jetzt fordern wir, dass bei Mausberührung die Hintergrundfarbe auf #ececec geändert wird.

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

Weiteres zum Thema dt finden Sie in Listen und Glossare in HTML. Einzelheiten des hier gezeigten Befehl dt sind in der HTML Referenz bei <dt> genau gezeigt.