Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #232323 und Farbwert #686868

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 #232323			Schriftfarbwert #686868
Detail	:	Hintergrund #232323	Detail	:	Schrift #686868
Farbwert	:	#232323	Farbwert	:	#686868
Farbe	:	gray35	Farbe	:	gray104
HTML	:	#232323	HTML	:	#686868
HTML (Wert)	:	#232323	HTML (Wert)	:	#686868
CSS	:	#232323	CSS	:	#686868
CSS (Wert)	:	#232323	CSS (Wert)	:	#686868
CSS (kürzest)	:	#232323	CSS (kürzest)	:	#686868
CSS (RGB)	:	rgb(35,35,35)	CSS (RGB)	:	rgb(104,104,104)
CSS (%RGB)	:	rgb(13%,13%,13%)	CSS (%RGB)	:	rgb(40%,40%,40%)

Verlauf Hintergrundfarbwert #232323 nach Schriftfarbwert #686868
#232323	#2c2c2c	#363636	#404040	#4a4a4a	#545454	#5e5e5e	#686868
#232323	#2c2c2c	#363636	#404040	#4a4a4a	#545454	#5e5e5e	#686868

Kombination von #232323 und #686868
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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit der Farben #686868 und #232323 beträgt 86.57%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 13.43%. Auf Hintergrund #232323 ist #686868 ungeeignet, weil weder der Helligkeitsunterschied noch der Farbunterschied geeignet sind.

Hintergrundfarbwert #232323				Schriftfarbwert #686868
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#232323	#232323	#232323	#232323	#686868	#686868	#686868	#686868
#424242	#424242	#1e1e1e	#1e1e1e	#7d7d7d	#7d7d7d	#595959	#595959
#616161	#616161	#191919	#191919	#939393	#939393	#4a4a4a	#4a4a4a
#818181	#818181	#141414	#141414	#a8a8a8	#a8a8a8	#3b3b3b	#3b3b3b
#a0a0a0	#a0a0a0	#0f0f0f	#0f0f0f	#bebebe	#bebebe	#2c2c2c	#2c2c2c
#c0c0c0	#c0c0c0	#0a0a0a	#0a0a0a	#d3d3d3	#d3d3d3	#1d1d1d	#1d1d1d
#dfdfdf	#dfdfdf	#050505	#050505	#e9e9e9	#e9e9e9	#0e0e0e	#0e0e0e
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #232323 und Farbwert #686868

Wechsel der Umrandung bei Hover mit Tag img

Die Rahmenfarbe soll sich von Farbwert #232323 auf Farbwert #686868 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <img> in Farbwert #232323 vor.

In diesem Beispiel umranden wir <img> mit einem 2 Pixel dicken, gepunkteten Rahmen in Farbwert #232323.

<style type="text/css"><!--
  img { 
    border-color: #232323; 
    border-width: 2px; 
    border-style: dotted;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Mausberührung die Rahmenfarbe auf #686868 ändert.

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

Weiteres zum Thema img können Sie in Grafik in HTML finden. Einzelheiten des hier genutzten HTML-Tag img sind in der HTML Referenz bei <img> genau beschrieben.

Wechsel der Hintergrundfarbe bei Hover von HTML-Befehl a

Einen Hyperlink erzeugt man mit Befehl <a>. Er kann hervorgehoben und farblich gestaltet werden.

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

Zum Beispiel ändern wir die Hintergrundfarbe von <a> auf Farbwert #232323:

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

Jetzt fordern wir, dass bei Berührung mit der Maus die Hintergrundfarbe auf #686868 gesetzt wird.

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

Weiteres zum Thema a finden Sie in Verweise und Protokolle in HTML. Weiteres zum hier gezeigten HTML-Tag <a>.