Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray171 und Farbe gray37

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 gray171			Schriftfarbe gray37
Detail	:	Hintergrund gray171	Detail	:	Schrift gray37
Farbe	:	gray171	Farbe	:	gray37
Farbwert	:	#ababab	Farbwert	:	#252525
HTML	:	gray171	HTML	:	gray37
HTML (Wert)	:	#ababab	HTML (Wert)	:	#252525
CSS	:	gray171	CSS	:	gray37
CSS (Wert)	:	#ababab	CSS (Wert)	:	#252525
CSS (kürzest)	:	#ababab	CSS (kürzest)	:	#252525
CSS (RGB)	:	rgb(171,171,171)	CSS (RGB)	:	rgb(37,37,37)
CSS (%RGB)	:	rgb(67%,67%,67%)	CSS (%RGB)	:	rgb(14%,14%,14%)

Verlauf Hintergrundfarbe gray171 nach Schriftfarbe gray37
#ababab	#979797	#848484	#717171	#5e5e5e	#4b4b4b	#383838	#252525
#ababab	#979797	#848484	#717171	#5e5e5e	#4b4b4b	#383838	#252525

Kombination von gray171 und gray37
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 id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in.				Auf Hintergrund gray171 ist gray37 ungeeignet. Zwar ist der Helligkeitsunterschied ok, doch die Farben selbst sind zu ähnlich. Die Ähnlichkeit von gray37 und gray171 ergibt sich zu 68.21%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 31.79%.

Hintergrundfarbe gray171				Schriftfarbe gray37
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ababab	#ababab	#ababab	#ababab	#252525	#252525	#252525	#252525
#b7b7b7	#b7b7b7	#929292	#929292	#444444	#444444	#1f1f1f	#1f1f1f
#c3c3c3	#c3c3c3	#7a7a7a	#7a7a7a	#636363	#636363	#1a1a1a	#1a1a1a
#cfcfcf	#cfcfcf	#616161	#616161	#828282	#828282	#151515	#151515
#dbdbdb	#dbdbdb	#494949	#494949	#a1a1a1	#a1a1a1	#0f0f0f	#0f0f0f
#e7e7e7	#e7e7e7	#303030	#303030	#c0c0c0	#c0c0c0	#0a0a0a	#0a0a0a
#f3f3f3	#f3f3f3	#181818	#181818	#dfdfdf	#dfdfdf	#050505	#050505
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray171 und Farbe gray37

Füllen und Umranden mit Befehl cite

Für dieses Beispiel umranden wir <cite> mit einem gefurchten, 5 Pixel dicken Rahmen in Farbe gray37 . Den Hintergrund von <cite> setzen wir auf Farbe gray171. Mit HTML geht dies nicht. Deshalb formatieren wir hier mit CSS.

<style type="text/css"><!--
  cite { border:5px groove gray37; background-color:gray171; }
//-->
</style>

Mehr zum Befehl <cite>.

Wechsel der Unterstreichung bei Hover mit Befehl h4

Eine Überschrift setzt man mit Befehl <h4>. Diese kann farblich gestaltet und hervorgehoben werden.

Die Farbe der Unterstreichung soll sich von Farbe gray171 auf Farbe gray37 ändern, wenn man mit der Maus auf <h4> zeigt. Wir bereiten zunächst die Formatierung von <h4> in Farbe gray171 vor.

In diesem Beispiel unterstreichen wir <h4> mit Hilfe eines herausstehenden Rahmens mit 1 Pixel Dicke in Farbe gray171.

<style type="text/css"><!--
  h4 { border-bottom:1px outset gray171; }
//-->
</style>

Nun stellen wir ein, dass sich bei Berührung mit der Maus die Unterstreichungsfarbe zu gray37 ändert.

<style type="text/css"><!--
  h4: hover { 
    border-bottom-color: gray37;
  }
//-->
</style>

Die Idee ist hierbei, unabhängige Formatierungen für Inhalt und Unterstreichung zu nutzen. Manchmal sieht man diesen Effekt bei Hyperlinks. Der Text wird in einer Farbe dargestellt. Und die Unterstreichung in einer anderen. Hierbei handelt es sich jedoch nicht um eine "wirkliche" Unterstreichung, der Text selbst hat überhaupt keine Unterstreichung. Die Unterstreichung wird mit einem Rahmen simuliert und dieser Rahmen ist unabhängig vom Text.

Weiteres zum Thema h4 lesen Sie in Grundlegende Gestaltungselemente in HTML. Der hier genutzte Tag h4 ist in der HTML Referenz unter <h4> genau beschrieben.