Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray22 und Farbwert #e4e4e4

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 gray22			Schriftfarbwert #e4e4e4
Detail	:	Hintergrund gray22	Detail	:	Schrift #e4e4e4
Farbe	:	gray22	Farbwert	:	#e4e4e4
Farbwert	:	#161616	Farbe	:	gray228
HTML	:	gray22	HTML	:	#e4e4e4
HTML (Wert)	:	#161616	HTML (Wert)	:	#e4e4e4
CSS	:	gray22	CSS	:	#e4e4e4
CSS (Wert)	:	#161616	CSS (Wert)	:	#e4e4e4
CSS (kürzest)	:	#161616	CSS (kürzest)	:	#e4e4e4
CSS (RGB)	:	rgb(22,22,22)	CSS (RGB)	:	rgb(228,228,228)
CSS (%RGB)	:	rgb(8%,8%,8%)	CSS (%RGB)	:	rgb(89%,89%,89%)

Verlauf Hintergrundfarbe gray22 nach Schriftfarbwert #e4e4e4
#161616	#333333	#505050	#6e6e6e	#8b8b8b	#a9a9a9	#c6c6c6	#e4e4e4
#161616	#333333	#505050	#6e6e6e	#8b8b8b	#a9a9a9	#c6c6c6	#e4e4e4

Kombination von gray22 und #e4e4e4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. 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.				#e4e4e4 eignet sich als Schriftfarbe auf Hintergrund gray22. Sowohl der Unterschied in den Helligkeiten als auch der Unterschied in den Farben sind gut. Die Ähnlichkeit von #e4e4e4 und gray22 ergibt sich zu 32.23%. Die Lesbarkeit dieser Kombination ergibt sich zu 67.77%.

Hintergrundfarbe gray22				Schriftfarbwert #e4e4e4
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#161616	#161616	#161616	#161616	#e4e4e4	#e4e4e4	#e4e4e4	#e4e4e4
#373737	#373737	#121212	#121212	#e7e7e7	#e7e7e7	#c3c3c3	#c3c3c3
#585858	#585858	#0f0f0f	#0f0f0f	#ebebeb	#ebebeb	#a2a2a2	#a2a2a2
#797979	#797979	#0c0c0c	#0c0c0c	#efefef	#efefef	#828282	#828282
#9b9b9b	#9b9b9b	#090909	#090909	#f3f3f3	#f3f3f3	#616161	#616161
#bcbcbc	#bcbcbc	#060606	#060606	#f7f7f7	#f7f7f7	#414141	#414141
#dddddd	#dddddd	#030303	#030303	#fbfbfb	#fbfbfb	#202020	#202020
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray22 und Farbwert #e4e4e4

Wechsel der Unterstreichung bei Hover mit Tag a

Mit HTML-Befehl <a> wird ein Hyperlink gesetzt. Diesen können Sie hervorheben und farblich gestalten.

Die Farbe der Unterstreichung soll sich von Farbe gray22 auf Farbwert #e4e4e4 ändern, wenn man mit der Maus auf <a> zeigt. Bereiten wir zunächst die Formatierung von <a> in Farbe gray22 vor.

Hier unterstreichen wir <a> mit Hilfe eines gestrichelten Rahmens mit 1 Pixel Dicke in Farbe gray22.

<style type="text/css"><!--
  a { border-bottom:1px dashed gray22; }
//-->
</style>

Jetzt stellen wir ein, dass bei Hover die Unterstreichungsfarbe auf #e4e4e4 geändert wird.

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

Die Idee ist hierbei, voneinander unabhängige Formatierungen für Inhalt und Unterstreichung zu nutzen. Öfter sieht man diesen Effekt bei Links. Der Text wird in einer Farbe dargestellt. Die Unterstreichung in einer anderen. Hierbei handelt es sich aber nicht um eine wirkliche Unterstreichung, der Text hat überhaupt keine Unterstreichung. Sie wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Weiteres zu a können Sie in Verweise und Protokolle in HTML nachlesen. Einzelheiten vom HTML-Tag <a>.

Text- und Unterstreichungsfarben mit HTML-Befehl caption

Wir ändern in diesem Beispiel die Textfarbe von <caption> auf Farbwert #e4e4e4. Die Schriftart setzen wir auf monospace und setzen die Schriftgröße auf 125%. Wir unterstreichen den Inhalt von <caption> mit Hilfe eines gestrichelten Rahmens mit 4 Punkte Dicke in Farbe gray22. In HTML ist das kaum machbar. Deshalb verwenden wir CSS.

<style type="text/css"><!--
  caption { 
    border-bottom-style:dashed; 
    border-bottom-color:gray22; 
    font-family:monospace; 
    color:#e4e4e4; 
    font-size:125%; 
    border-bottom-width:4pt;
  }
//-->
</style>

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

Weiteres zum Thema caption erfahren Sie in Tabellen in HTML. Weiteres zum hier gezeigten HTML-Tag <caption>.