Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #464646 und Farbwert #121212

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 #464646			Schriftfarbwert #121212
Detail	:	Hintergrund #464646	Detail	:	Schrift #121212
Farbwert	:	#464646	Farbwert	:	#121212
Farbe	:	gray70	Farbe	:	gray18
HTML	:	#464646	HTML	:	#121212
HTML (Wert)	:	#464646	HTML (Wert)	:	#121212
CSS	:	#464646	CSS	:	#121212
CSS (Wert)	:	#464646	CSS (Wert)	:	#121212
CSS (kürzest)	:	#464646	CSS (kürzest)	:	#121212
CSS (RGB)	:	rgb(70,70,70)	CSS (RGB)	:	rgb(18,18,18)
CSS (%RGB)	:	rgb(27%,27%,27%)	CSS (%RGB)	:	rgb(7%,7%,7%)

Verlauf Hintergrundfarbwert #464646 nach Schriftfarbwert #121212
#464646	#3e3e3e	#373737	#2f2f2f	#282828	#202020	#191919	#121212
#464646	#3e3e3e	#373737	#2f2f2f	#282828	#202020	#191919	#121212

Kombination von #464646 und #121212
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante.				Die Ähnlichkeit der Farben #121212 und #464646 ergibt sich zu 90.55%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 9.45%. Auf Hintergrund #464646 ist #121212 ungeeignet. Weder der Helligkeitsunterschied noch der Farbunterschied sind ausreichend.

Hintergrundfarbwert #464646				Schriftfarbwert #121212
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#464646	#464646	#464646	#464646	#121212	#121212	#121212	#121212
#606060	#606060	#3c3c3c	#3c3c3c	#333333	#333333	#0f0f0f	#0f0f0f
#7a7a7a	#7a7a7a	#323232	#323232	#555555	#555555	#0c0c0c	#0c0c0c
#959595	#959595	#282828	#282828	#777777	#777777	#0a0a0a	#0a0a0a
#afafaf	#afafaf	#1e1e1e	#1e1e1e	#999999	#999999	#070707	#070707
#cacaca	#cacaca	#141414	#141414	#bbbbbb	#bbbbbb	#050505	#050505
#e4e4e4	#e4e4e4	#0a0a0a	#0a0a0a	#dddddd	#dddddd	#020202	#020202
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #464646 und Farbwert #121212

Wechsel der Umrandung bei Hover von Tag a

Mit HTML-Tag <a> wird ein Link gesetzt. Dieser kann farblich gestaltet und hervorgehoben werden.

Die Rahmenfarbe soll sich von Farbwert #464646 auf Farbwert #121212 ändern, wenn man mit der Maus auf <a> zeigt. Wir bereiten zunächst eine Darstellung von <a> in Farbwert #464646 vor.

In diesem Beispiel umranden wir <a> mit einem 5 Pixel dicken, gepunkteten Rahmen in Farbwert #464646.

<style type="text/css"><!--
  a { border:5px dotted #464646; }
//-->
</style>

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

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

Mehr zu a lesen Sie in Verweise und Protokolle in HTML. Möglichkeiten vom Tag a finden Sie in der HTML Referenz unter <a>.

Füllen und Umranden von HTML-Tag img

Für dieses Beispiel umranden wir <img> mit einem 1 Punkte dicken, doppelten Rahmen in Farbwert #121212 . Den Hintergrund von <img> färben wir entsprechend mit Farbwert #464646. Dies geht mit HTML kaum. Wir verwenden daher CSS.

<style type="text/css"><!--
  img { border:1pt double #121212; background-color:#464646; }
//-->
</style>

Weiteres zum Thema img erfahren Sie in Grafik in HTML. Weiteres zum Befehl img lesen Sie in der HTML Referenz unter <img>.