Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray205 und Farbwert #0c0c0c

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).

Hintergrundfarbe gray205			Schriftfarbwert #0c0c0c
Detail	:	Hintergrund gray205	Detail	:	Schrift #0c0c0c
Farbe	:	gray205	Farbwert	:	#0c0c0c
Farbwert	:	#cdcdcd	Farbe	:	gray12
HTML	:	gray205	HTML	:	#0c0c0c
HTML (Wert)	:	#cdcdcd	HTML (Wert)	:	#0c0c0c
CSS	:	gray205	CSS	:	#0c0c0c
CSS (Wert)	:	#cdcdcd	CSS (Wert)	:	#0c0c0c
CSS (kürzest)	:	#cdcdcd	CSS (kürzest)	:	#0c0c0c
CSS (RGB)	:	rgb(205,205,205)	CSS (RGB)	:	rgb(12,12,12)
CSS (%RGB)	:	rgb(80%,80%,80%)	CSS (%RGB)	:	rgb(4%,4%,4%)

Verlauf Hintergrundfarbe gray205 nach Schriftfarbwert #0c0c0c
#cdcdcd	#b1b1b1	#959595	#7a7a7a	#5e5e5e	#434343	#272727	#0c0c0c
#cdcdcd	#b1b1b1	#959595	#7a7a7a	#5e5e5e	#434343	#272727	#0c0c0c

Kombination von gray205 und #0c0c0c
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 id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in.				#0c0c0c eignet sich als Schriftfarbe auf Hintergrund gray205, weil sowohl der Helligkeitsunterschied als auch der Unterschied in den Farben geeignet sind. Die Ähnlichkeit der Farben #0c0c0c und gray205 beträgt 41.40%. Die Lesbarkeit dieser Kombination ergibt sich zu 58.60%.

Hintergrundfarbe gray205				Schriftfarbwert #0c0c0c
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#cdcdcd	#cdcdcd	#cdcdcd	#cdcdcd	#0c0c0c	#0c0c0c	#0c0c0c	#0c0c0c
#d4d4d4	#d4d4d4	#afafaf	#afafaf	#2e2e2e	#2e2e2e	#0a0a0a	#0a0a0a
#dbdbdb	#dbdbdb	#929292	#929292	#515151	#515151	#080808	#080808
#e2e2e2	#e2e2e2	#757575	#757575	#747474	#747474	#060606	#060606
#e9e9e9	#e9e9e9	#575757	#575757	#969696	#969696	#050505	#050505
#f0f0f0	#f0f0f0	#3a3a3a	#3a3a3a	#b9b9b9	#b9b9b9	#030303	#030303
#f7f7f7	#f7f7f7	#1d1d1d	#1d1d1d	#dcdcdc	#dcdcdc	#010101	#010101
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray205 und Farbwert #0c0c0c

Wechsel der Umrandung bei Hover mit Tag fieldset

Die Rahmenfarbe soll sich von Farbe gray205 auf Farbwert #0c0c0c ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Darstellung von <fieldset> in Farbe gray205 vor.

In diesem Beispiel umranden wir <fieldset> mit einem 2 Pixel dicken, gezahnten Rahmen in Farbe gray205.

<style type="text/css"><!--
  fieldset { border:2px ridge gray205; }
//-->
</style>

Nun fordern wir, dass bei Hover die Rahmenfarbe auf #0c0c0c gesetzt wird.

<style type="text/css"><!--
  fieldset:hover { 
    border-color:#0c0c0c;
  }
//-->
</style>

Mehr zum Thema fieldset können Sie in Formulare in HTML lesen. Einzelheiten vom hier verwendeten Befehl fieldset sind in der HTML Referenz unter <fieldset> genau zusammengestellt.

Hintergrund/Text-Kombination von Tag pre

Hier ändern wir die Textfarbe von <pre> auf Farbwert #0c0c0c und die Hintergrundfarbe von <pre> auf Farbe gray205. Die Schriftart ändern wir auf sans-serif und als Schriftgröße entscheiden wir uns für 126%.

<style type="text/css"><!--
  pre { 
    color:#0c0c0c; 
    font-family:sans-serif; 
    font-size:126%; 
    background-color:gray205;
  }
//-->
</style>

Weiteres zum Thema können Sie in Blockorientierte Elemente in HTML nachlesen. Die Beschreibung vom hier verwendeten Befehl pre lesen Sie in der HTML Referenz unter <pre>.