Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray221 und Farbe gray20

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 gray221			Schriftfarbe gray20
Detail	:	Hintergrund gray221	Detail	:	Schrift gray20
Farbe	:	gray221	Farbe	:	gray20
Farbwert	:	#dddddd	Farbwert	:	#141414
HTML	:	gray221	HTML	:	gray20
HTML (Wert)	:	#dddddd	HTML (Wert)	:	#141414
CSS	:	gray221	CSS	:	gray20
CSS (Wert)	:	#dddddd	CSS (Wert)	:	#141414
CSS (kürzest)	:	#ddd	CSS (kürzest)	:	#141414
CSS (RGB)	:	rgb(221,221,221)	CSS (RGB)	:	rgb(20,20,20)
CSS (%RGB)	:	rgb(86%,86%,86%)	CSS (%RGB)	:	rgb(7%,7%,7%)

Verlauf Hintergrundfarbe gray221 nach Schriftfarbe gray20
#dddddd	#c0c0c0	#a3a3a3	#868686	#6a6a6a	#4d4d4d	#303030	#141414
#dddddd	#c0c0c0	#a3a3a3	#868686	#6a6a6a	#4d4d4d	#303030	#141414

Kombination von gray221 und gray20
Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Die Ähnlichkeit der Farben gray20 und gray221 ergibt sich zu 35.41%. Die Lesbarkeit dieser Farbkombination liegt damit bei 64.59%. gray20 eignet sich als Schriftfarbe auf Hintergrund gray221, weil der Helligkeitsunterschied geeignet ist, der Unterschied in den Farben auch.

Hintergrundfarbe gray221				Schriftfarbe gray20
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#dddddd	#dddddd	#dddddd	#dddddd	#141414	#141414	#141414	#141414
#e1e1e1	#e1e1e1	#bdbdbd	#bdbdbd	#353535	#353535	#111111	#111111
#e6e6e6	#e6e6e6	#9d9d9d	#9d9d9d	#575757	#575757	#0e0e0e	#0e0e0e
#ebebeb	#ebebeb	#7e7e7e	#7e7e7e	#787878	#787878	#0b0b0b	#0b0b0b
#f0f0f0	#f0f0f0	#5e5e5e	#5e5e5e	#9a9a9a	#9a9a9a	#080808	#080808
#f5f5f5	#f5f5f5	#3f3f3f	#3f3f3f	#bbbbbb	#bbbbbb	#050505	#050505
#fafafa	#fafafa	#1f1f1f	#1f1f1f	#dddddd	#dddddd	#020202	#020202
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray221 und Farbe gray20

Wechsel der Unterstreichung bei Hover von Befehl ins

Die Farbe der Unterstreichung soll sich von Farbe gray221 auf Farbe gray20 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Darstellung von <ins> in Farbe gray221 vor.

Hier unterstreichen wir <ins> mit einem gefurchten Rahmen mit 2 Pixel Dicke in Farbe gray221.

<style type="text/css"><!--
  ins { 
    border-bottom-color:gray221; 
    border-bottom-width:2px; 
    border-bottom-style:groove;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Hover die Farbe der Unterstreichung zu gray20 ändert.

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

Die Idee ist, voneinander unabhängige Formatierungen für Inhalt und Unterstreichung zu verwenden. Öfter sehen Sie diesen Effekt bei Links. Der Text ist in einer Farbe. Und die Unterstreichung in einer anderen. Dies ist aber keine wirkliche Unterstreichung, der Text hat überhaupt keine Unterstreichung. Die Unterstreichung wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Mehr zum hier verwendeten HTML-Befehl <ins>.

Zebra-Effekt von Tag tr

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, spricht man vom so genannten Zebra-Effekt. Dieser Effekt unterstützt das Auge, etwa die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ying und .yang für <tr> mit unterschiedlichen Hintergrundfarben Farbe gray221 und Farbe gray20.

<style type="text/css"><!--
  tr.ying { 
    background-color:gray221;
  }
  tr.yang { 
    background-color: gray20;
  }
//-->
</style>

Diese Klassen werden abwechselnd angewendet.

<table>
<tr class="ying"><td><tt>A.A</td><td></tt>B.A</td><td><tt>C.A</td></tr>
<tr class="yang"><td></tt>A.B</td><td><tt>B.B</td><td></tt>C.B</td></tr>
<tr class="ying"><td><tt>A.C</td><td></tt>B.C</td><td>@C.C</td></tr>
</table>

Weiteres zum Thema können Sie in Tabellen in HTML finden. Mehr zum HTML-Tag tr finden Sie in der HTML Referenz unter <tr>.