Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray5 und Farbe gray40

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 gray5			Schriftfarbe gray40
Detail	:	Hintergrund gray5	Detail	:	Schrift gray40
Farbe	:	gray5	Farbe	:	gray40
Farbwert	:	#050505	Farbwert	:	#282828
HTML	:	gray5	HTML	:	gray40
HTML (Wert)	:	#050505	HTML (Wert)	:	#282828
CSS	:	gray5	CSS	:	gray40
CSS (Wert)	:	#050505	CSS (Wert)	:	#282828
CSS (kürzest)	:	#050505	CSS (kürzest)	:	#282828
CSS (RGB)	:	rgb(5,5,5)	CSS (RGB)	:	rgb(40,40,40)
CSS (%RGB)	:	rgb(1%,1%,1%)	CSS (%RGB)	:	rgb(15%,15%,15%)

Verlauf Hintergrundfarbe gray5 nach Schriftfarbe gray40
#050505	#0a0a0a	#0f0f0f	#141414	#191919	#1e1e1e	#232323	#282828
#050505	#0a0a0a	#0f0f0f	#141414	#191919	#1e1e1e	#232323	#282828

Kombination von gray5 und gray40
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante. 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.				Auf Hintergrund gray5 ist gray40 ungeeignet, da sowohl Helligkeit als auch die Farben zu ähnlich sind. Die Ähnlichkeit der Farben gray40 und gray5 ergibt sich zu 93.42%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 6.58%.

Hintergrundfarbe gray5				Schriftfarbe gray40
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#050505	#050505	#050505	#050505	#282828	#282828	#282828	#282828
#282828	#282828	#040404	#040404	#464646	#464646	#222222	#222222
#4c4c4c	#4c4c4c	#030303	#030303	#656565	#656565	#1c1c1c	#1c1c1c
#707070	#707070	#020202	#020202	#848484	#848484	#161616	#161616
#939393	#939393	#020202	#020202	#a2a2a2	#a2a2a2	#111111	#111111
#b7b7b7	#b7b7b7	#010101	#010101	#c1c1c1	#c1c1c1	#0b0b0b	#0b0b0b
#dbdbdb	#dbdbdb	#000000	#000000	#e0e0e0	#e0e0e0	#050505	#050505
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray5 und Farbe gray40

Wechsel der Textfarbe bei Hover mit HTML-Tag legend

Die Textfarbe soll sich von Farbe gray5 auf Farbe gray40 ändern, wenn man mit der Maus auf <legend> zeigt. Bereiten wir zunächst die Darstellung von <legend> in Farbe gray5 vor.

Wir legen als Beispiel Farbe gray5 als Textfarbe von <legend> fest. Zwar verändern wir die Hintergrundfarbe nicht, ändern jedoch die Schriftart auf courier new und verringern die Schriftgröße auf 92%:

<style type="text/css"><!--
  legend { 
    color: gray5; 
    font-size: 92%; 
    font-family: courier new;
  }
//-->
</style>

Jetzt fordern wir, dass bei Hover die Textfarbe auf gray40 gesetzt wird.

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

Weiteres zum Thema erfahren Sie in Formulare in HTML. Einzelheiten des Tag legend sind in der HTML Referenz unter <legend> gezeigt.

Hintergrund/Text-Kombination bei Tag th

Hier ändern wir die Textfarbe von <th> auf Farbe gray40 und die Hintergrundfarbe von <th> auf Farbe gray5. Die Schriftart ändern wir auf verdana und setzen die Schriftgröße auf 13px.

<style type="text/css"><!--
  th { 
    font-size:13px; 
    color:gray40; 
    background-color:gray5; 
    font-family:verdana;
  }
//-->
</style>

Mehr zu th erfahren Sie in Tabellen in HTML. Die Beschreibung vom Befehl th erfahren Sie in der HTML Referenz unter <th>.