Ressourcen: 16 Graustufen in HTML - Kombination von Farbe gray204 und Farbwert #111111

Graustufen enthalten insbesondere die unbunten Grundfarben Schwarz und Weiß.

Um 16 Graustufen in HTML bzw. CSS zu erzeugen, wählen wir Farbwerte rr, gg und bb mit Werten von 0 bis 15 (d.h. hexadezimal 0 bis f) für r, g und b.

Hintergrundfarbe gray204			Schriftfarbwert #111111
Detail	:	Hintergrund gray204	Detail	:	Schrift #111111
Farbe	:	gray204	Farbwert	:	#111111
Farbwert	:	#cccccc	Farbe	:	gray17
HTML	:	gray204	HTML	:	#111111
HTML (Wert)	:	#cccccc	HTML (Wert)	:	#111111
CSS	:	gray204	CSS	:	#111111
CSS (Wert)	:	#cccccc	CSS (Wert)	:	#111111
CSS (kürzest)	:	#ccc	CSS (kürzest)	:	#111
CSS (RGB)	:	rgb(204,204,204)	CSS (RGB)	:	rgb(17,17,17)
CSS (%RGB)	:	rgb(80%,80%,80%)	CSS (%RGB)	:	rgb(6%,6%,6%)

Verlauf Hintergrundfarbe gray204 nach Schriftfarbwert #111111
#cccccc	#b1b1b1	#969696	#7b7b7b	#616161	#464646	#2b2b2b	#111111
#cccccc	#b1b1b1	#969696	#7b7b7b	#616161	#464646	#2b2b2b	#111111

Kombination von gray204 und #111111
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Die Ähnlichkeit von #111111 und gray204 beträgt 44.01%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 55.99%. #111111 eignet sich als Schriftfarbe auf Hintergrund gray204, weil Helligkeitsunterschied und Unterschied in den Farben in Ordnung sind.

Hintergrundfarbe gray204				Schriftfarbwert #111111
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#cccccc	#cccccc	#cccccc	#cccccc	#111111	#111111	#111111	#111111
#d3d3d3	#d3d3d3	#aeaeae	#aeaeae	#333333	#333333	#0e0e0e	#0e0e0e
#dadada	#dadada	#919191	#919191	#555555	#555555	#0c0c0c	#0c0c0c
#e1e1e1	#e1e1e1	#747474	#747474	#777777	#777777	#090909	#090909
#e9e9e9	#e9e9e9	#575757	#575757	#999999	#999999	#070707	#070707
#f0f0f0	#f0f0f0	#3a3a3a	#3a3a3a	#bbbbbb	#bbbbbb	#040404	#040404
#f7f7f7	#f7f7f7	#1d1d1d	#1d1d1d	#dddddd	#dddddd	#020202	#020202
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray204 und Farbwert #111111

Füllen und Umranden bei HTML-Tag q

Für dieses Beispiel umranden wir <q> mit einem 1 Punkte dicken, gefurchten Rahmen in Farbwert #111111 . Die Hintergrundfarbe für <q> färben wir entsprechend mit Farbe gray204. In HTML geht dies nicht. Deshalb nutzen wir hier CSS.

<style type="text/css"><!--
  q { border:1pt groove #111; background-color:gray204; }
//-->
</style>

Mehr zum hier gezeigten Tag q ist in der HTML Referenz unter <q> zusammengestellt.

Wechsel der Unterstreichung bei Hover mit Befehl caption

Die Unterstreichungsfarbe soll sich von Farbe gray204 auf Farbwert #111111 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Formatierung von <caption> in Farbe gray204 vor.

In diesem Beispiel unterstreichen wir <caption> mit Hilfe eines einfallenden Rahmens mit 1 Pixel Dicke in Farbe gray204.

<style type="text/css"><!--
  caption { border-bottom:1px inset gray204; }
//-->
</style>

Jetzt fordern wir, dass bei Berührung mit der Maus die Farbe der Unterstreichung auf #111111 gesetzt wird.

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

Die Idee ist, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu verwenden. Manchmal sieht man diesen Effekt bei Verweisen. Der Text ist in einer Farbe. Die Unterstreichung in einer anderen. Das ist jedoch keine "wirkliche" Unterstreichung, der Text selbst hat keine Unterstreichung. Sie wird mit einem Rahmen simuliert und dieser ist unabhängig vom Text.

Mehr zu caption erfahren Sie in Tabellen in HTML. Weiteres zum hier verwendeten HTML-Befehl caption erfahren Sie in der HTML Referenz unter <caption>.