Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray249 und Farbe gray12

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 gray249			Schriftfarbe gray12
Detail	:	Hintergrund gray249	Detail	:	Schrift gray12
Farbe	:	gray249	Farbe	:	gray12
Farbwert	:	#f9f9f9	Farbwert	:	#0c0c0c
HTML	:	gray249	HTML	:	gray12
HTML (Wert)	:	#f9f9f9	HTML (Wert)	:	#0c0c0c
CSS	:	gray249	CSS	:	gray12
CSS (Wert)	:	#f9f9f9	CSS (Wert)	:	#0c0c0c
CSS (kürzest)	:	#f9f9f9	CSS (kürzest)	:	#0c0c0c
CSS (RGB)	:	rgb(249,249,249)	CSS (RGB)	:	rgb(12,12,12)
CSS (%RGB)	:	rgb(97%,97%,97%)	CSS (%RGB)	:	rgb(4%,4%,4%)

Verlauf Hintergrundfarbe gray249 nach Schriftfarbe gray12
#f9f9f9	#d7d7d7	#b5b5b5	#939393	#717171	#4f4f4f	#2d2d2d	#0c0c0c
#f9f9f9	#d7d7d7	#b5b5b5	#939393	#717171	#4f4f4f	#2d2d2d	#0c0c0c

Kombination von gray249 und gray12
Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				gray12 eignet sich als Schriftfarbe auf Hintergrund gray249. Sowohl der Helligkeitsunterschied als auch der Farbenunterschied sind gut. Die Ähnlichkeit der Farben gray12 und gray249 ergibt sich zu 11.52%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 88.48%.

Hintergrundfarbe gray249				Schriftfarbe gray12
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#f9f9f9	#f9f9f9	#f9f9f9	#f9f9f9	#0c0c0c	#0c0c0c	#0c0c0c	#0c0c0c
#f9f9f9	#f9f9f9	#d5d5d5	#d5d5d5	#2e2e2e	#2e2e2e	#0a0a0a	#0a0a0a
#fafafa	#fafafa	#b1b1b1	#b1b1b1	#515151	#515151	#080808	#080808
#fbfbfb	#fbfbfb	#8e8e8e	#8e8e8e	#747474	#747474	#060606	#060606
#fcfcfc	#fcfcfc	#6a6a6a	#6a6a6a	#969696	#969696	#050505	#050505
#fdfdfd	#fdfdfd	#474747	#474747	#b9b9b9	#b9b9b9	#030303	#030303
#fefefe	#fefefe	#232323	#232323	#dcdcdc	#dcdcdc	#010101	#010101
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray249 und Farbe gray12

Wechsel der Umrandung bei Hover von Tag a

Ein Verweis wird mit Befehl <a> erzeugt. Diesen kann man farblich gestalten und hervorheben.

Die Rahmenfarbe soll sich von Farbe gray249 auf Farbe gray12 ändern, wenn man mit der Maus auf <a> zeigt. Bereiten wir zunächst die Formatierung von <a> in Farbe gray249 vor.

In diesem Beispiel umranden wir <a> mit einem 2 Pixel dicken, gepunkteten Rahmen in Farbe gray249.

<style type="text/css"><!--
  a { border:2px dotted gray249; }
//-->
</style>

Nun fordern wir, dass bei Hover die Rahmenfarbe auf gray12 gesetzt wird.

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

Mehr zu a finden Sie in Verweise und Protokolle in HTML. Mehr zum hier gezeigten HTML-Tag a lesen Sie in der HTML Referenz unter <a>.

Hintergrund/Text-Kombination bei Befehl dt

Hier ändern wir die Textfarbe von <dt> auf Farbe gray12 und die Hintergrundfarbe von <dt> auf Farbe gray249. Als Schriftart wählen wir sans-serif. Die Schriftgröße setzen wir auf 111%.

<style type="text/css"><!--
  dt { 
    color: gray12; 
    font-family: sans-serif; 
    background-color: gray249; 
    font-size: 111%;
  }
//-->
</style>

Weiteres zu dt erfahren Sie in Listen und Glossare in HTML. Einzelheiten vom hier verwendeten Tag dt lesen Sie in der HTML Referenz unter <dt>.