Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray94 und Farbe gray151

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 gray94			Schriftfarbe gray151
Detail	:	Hintergrund gray94	Detail	:	Schrift gray151
Farbe	:	gray94	Farbe	:	gray151
Farbwert	:	#5e5e5e	Farbwert	:	#979797
HTML	:	gray94	HTML	:	gray151
HTML (Wert)	:	#5e5e5e	HTML (Wert)	:	#979797
CSS	:	gray94	CSS	:	gray151
CSS (Wert)	:	#5e5e5e	CSS (Wert)	:	#979797
CSS (kürzest)	:	#5e5e5e	CSS (kürzest)	:	#979797
CSS (RGB)	:	rgb(94,94,94)	CSS (RGB)	:	rgb(151,151,151)
CSS (%RGB)	:	rgb(36%,36%,36%)	CSS (%RGB)	:	rgb(59%,59%,59%)

Verlauf Hintergrundfarbe gray94 nach Schriftfarbe gray151
#5e5e5e	#666666	#6e6e6e	#767676	#7e7e7e	#868686	#8e8e8e	#979797
#5e5e5e	#666666	#6e6e6e	#767676	#7e7e7e	#868686	#8e8e8e	#979797

Kombination von gray94 und gray151
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante.				Auf Hintergrund gray94 ist gray151 ungeeignet, da sich sowohl Helligkeit als auch die Farben zu ähnlich sind. Die Ähnlichkeit der Farben gray151 und gray94 beträgt 89.43%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 10.57%.

Hintergrundfarbe gray94				Schriftfarbe gray151
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#5e5e5e	#5e5e5e	#5e5e5e	#5e5e5e	#979797	#979797	#979797	#979797
#757575	#757575	#505050	#505050	#a5a5a5	#a5a5a5	#818181	#818181
#8c8c8c	#8c8c8c	#434343	#434343	#b4b4b4	#b4b4b4	#6b6b6b	#6b6b6b
#a3a3a3	#a3a3a3	#353535	#353535	#c3c3c3	#c3c3c3	#565656	#565656
#bababa	#bababa	#282828	#282828	#d2d2d2	#d2d2d2	#404040	#404040
#d1d1d1	#d1d1d1	#1a1a1a	#1a1a1a	#e1e1e1	#e1e1e1	#2b2b2b	#2b2b2b
#e8e8e8	#e8e8e8	#0d0d0d	#0d0d0d	#f0f0f0	#f0f0f0	#151515	#151515
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray94 und Farbe gray151

Wechsel der Umrandung bei Hover mit Tag fieldset

Die Rahmenfarbe soll sich von Farbe gray94 auf Farbe gray151 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Formatierung von <fieldset> in Farbe gray94 vor.

In diesem Beispiel umranden wir <fieldset> mit einem 1 Pixel dicken, gefurchten Rahmen in Farbe gray94.

<style type="text/css"><!--
  fieldset { border:1px groove gray94; }
//-->
</style>

Jetzt fordern wir, dass sich bei Berührung mit der Maus die Rahmenfarbe zu gray151 ändert.

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

Weiteres zum Thema fieldset finden Sie in Formulare in HTML. Einzelheiten vom hier gezeigten HTML-Tag <fieldset>.

Text- und Unterstreichungsfarben bei Tag cite

Hier ändern wir die Textfarbe von <cite> auf Farbe gray151. Die Schriftart setzen wir auf courier new und ändern die Schriftgröße auf 9px. Wir unterstreichen den Inhalt von <cite> mit Hilfe eines doppelten Rahmens mit 4 Punkte Dicke in Farbe gray94. In HTML geht das kaum. Wir verwenden deshalb CSS zur Formatierung.

<style type="text/css"><!--
  cite { 
    color: gray151; 
    border-bottom: 4pt double gray94; 
    font-size: 9px; 
    font-family: courier new;
  }
//-->
</style>

Die Idee ist, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben.

Mehr zum hier verwendeten HTML-Befehl cite ist in der HTML Referenz unter <cite> ausführlich zusammengestellt.