Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #2c2c2c und Farbe gray180

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 #2c2c2c			Schriftfarbe gray180
Detail	:	Hintergrund #2c2c2c	Detail	:	Schrift gray180
Farbwert	:	#2c2c2c	Farbe	:	gray180
Farbe	:	gray44	Farbwert	:	#b4b4b4
HTML	:	#2c2c2c	HTML	:	gray180
HTML (Wert)	:	#2c2c2c	HTML (Wert)	:	#b4b4b4
CSS	:	#2c2c2c	CSS	:	gray180
CSS (Wert)	:	#2c2c2c	CSS (Wert)	:	#b4b4b4
CSS (kürzest)	:	#2c2c2c	CSS (kürzest)	:	#b4b4b4
CSS (RGB)	:	rgb(44,44,44)	CSS (RGB)	:	rgb(180,180,180)
CSS (%RGB)	:	rgb(17%,17%,17%)	CSS (%RGB)	:	rgb(70%,70%,70%)

Verlauf Hintergrundfarbwert #2c2c2c nach Schriftfarbe gray180
#2c2c2c	#3f3f3f	#525252	#666666	#797979	#8d8d8d	#a0a0a0	#b4b4b4
#2c2c2c	#3f3f3f	#525252	#666666	#797979	#8d8d8d	#a0a0a0	#b4b4b4

Kombination von #2c2c2c und gray180
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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				gray180 eignet sich nicht als Schriftfarbe auf Hintergrund #2c2c2c, da sich die Farben zu ähnlich sind. Die Ähnlichkeit der Farben gray180 und #2c2c2c ergibt sich zu 67.93%. Die Lesbarkeit dieser Kombination liegt damit bei 32.07%.

Hintergrundfarbwert #2c2c2c				Schriftfarbe gray180
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#2c2c2c	#2c2c2c	#2c2c2c	#2c2c2c	#b4b4b4	#b4b4b4	#b4b4b4	#b4b4b4
#4a4a4a	#4a4a4a	#252525	#252525	#bebebe	#bebebe	#9a9a9a	#9a9a9a
#686868	#686868	#1f1f1f	#1f1f1f	#c9c9c9	#c9c9c9	#808080	#808080
#868686	#868686	#191919	#191919	#d4d4d4	#d4d4d4	#666666	#666666
#a4a4a4	#a4a4a4	#121212	#121212	#dedede	#dedede	#4d4d4d	#4d4d4d
#c2c2c2	#c2c2c2	#0c0c0c	#0c0c0c	#e9e9e9	#e9e9e9	#333333	#333333
#e0e0e0	#e0e0e0	#060606	#060606	#f4f4f4	#f4f4f4	#191919	#191919
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #2c2c2c und Farbe gray180

Wechsel der Textfarbe bei Hover von HTML-Tag center

Die Textfarbe soll sich von Farbwert #2c2c2c auf Farbe gray180 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Darstellung von <center> in Farbwert #2c2c2c vor.

Wir legen z.B. bei <center> die Textfarbe auf Farbwert #2c2c2c fest. Zwar behalten wir die Hintergrundfarbe bei, ändern jedoch die Schriftart auf monospace und setzen die Schriftgröße auf 13px.

<style type="text/css"><!--
  center { 
    font-size: 13px; 
    color: #2c2c2c; 
    font-family: monospace;
  }
//-->
</style>

Jetzt fordern wir, dass bei Berührung mit der Maus die Textfarbe auf gray180 geändert wird.

<style type="text/css"><!--
  center:hover { 
    color:gray180;
  }
//-->
</style>

Weiteres zu center können Sie in Grundlegende Gestaltungselemente in HTML nachlesen. Weiteres zum HTML-Befehl center erfahren Sie in der HTML Referenz unter <center>.

Wechsel der Umrandung bei Hover mit HTML-Befehl hr

Die Rahmenfarbe soll sich von Farbwert #2c2c2c auf Farbe gray180 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Darstellung von <hr> in Farbwert #2c2c2c vor.

In diesem Beispiel umranden wir <hr> mit einem 4 Pixel dicken, gepunkteten Rahmen in Farbwert #2c2c2c.

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

Jetzt stellen wir ein, dass sich bei Mausberührung die Rahmenfarbe zu gray180 ändert.

<style type="text/css"><!--
  hr:hover { 
    border-color:gray180;
  }
//-->
</style>

Weiteres zu hr erfahren Sie in Grundlegende Gestaltungselemente in HTML. Einzelheiten vom hier gezeigten HTML-Befehl hr sind in der HTML Referenz unter <hr> genau gezeigt.