Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #ffffff und Farbe gray58

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).

Hintergrundfarbwert #ffffff			Schriftfarbe gray58
Detail	:	Hintergrund #ffffff	Detail	:	Schrift gray58
Farbwert	:	#ffffff	Farbe	:	gray58
Farbe	:	white	Farbwert	:	#3a3a3a
HTML	:	#ffffff	HTML	:	gray58
HTML (Wert)	:	#ffffff	HTML (Wert)	:	#3a3a3a
CSS	:	#ffffff	CSS	:	gray58
CSS (Wert)	:	#ffffff	CSS (Wert)	:	#3a3a3a
CSS (kürzest)	:	#fff	CSS (kürzest)	:	#3a3a3a
CSS (RGB)	:	rgb(255,255,255)	CSS (RGB)	:	rgb(58,58,58)
CSS (%RGB)	:	rgb(100%,100%,100%)	CSS (%RGB)	:	rgb(22%,22%,22%)

Verlauf Hintergrundfarbwert #ffffff nach Schriftfarbe gray58
#ffffff	#e2e2e2	#c6c6c6	#aaaaaa	#8e8e8e	#727272	#565656	#3a3a3a
#ffffff	#e2e2e2	#c6c6c6	#aaaaaa	#8e8e8e	#727272	#565656	#3a3a3a

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

Hintergrundfarbwert #ffffff				Schriftfarbe gray58
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ffffff	#ffffff	#ffffff	#ffffff	#3a3a3a	#3a3a3a	#3a3a3a	#3a3a3a
#ffffff	#ffffff	#dadada	#dadada	#565656	#565656	#313131	#313131
#ffffff	#ffffff	#b6b6b6	#b6b6b6	#727272	#727272	#292929	#292929
#ffffff	#ffffff	#919191	#919191	#8e8e8e	#8e8e8e	#212121	#212121
#ffffff	#ffffff	#6d6d6d	#6d6d6d	#aaaaaa	#aaaaaa	#181818	#181818
#ffffff	#ffffff	#484848	#484848	#c6c6c6	#c6c6c6	#101010	#101010
#ffffff	#ffffff	#242424	#242424	#e2e2e2	#e2e2e2	#080808	#080808
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #ffffff und Farbe gray58

Füllen und Umranden mit Tag samp

Bei diesem Beispiel umranden wir <samp> mit einem . Die Hintergrundfarbe für <samp> färben wir mit Farbwert #ffffff. Dies geht in HTML nicht. Wir verwenden daher CSS zur Formatierung.

<style type="text/css"><!--
  samp { 
    border-width:3pt; 
    border-style:ridge; 
    background-color:#fff; 
    border-color:gray58;
  }
//-->
</style>

Weiteres zum Thema samp finden Sie in Text in HTML. Weiteres zum hier gezeigten Befehl <samp>.

Wechsel der Unterstreichung bei Hover bei Befehl caption

Die Unterstreichungsfarbe soll sich von Farbwert #ffffff auf Farbe gray58 ändern, wenn man mit der Maus auf <caption> zeigt. Wir bereiten zunächst eine Formatierung von <caption> in Farbwert #ffffff vor.

Beispielsweise unterstreichen wir <caption> mit einem gezahnten Rahmen mit 3 Pixel Dicke in Farbwert #ffffff.

<style type="text/css"><!--
  caption { border-bottom:3px ridge #ffffff; }
//-->
</style>

Nun stellen wir ein, dass sich bei Mausberührung die Unterstreichungsfarbe auf gray58 ändert.

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

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

Weiteres zum Thema caption finden Sie in Tabellen in HTML. Einzelheiten des Tag caption lesen Sie in der HTML Referenz unter <caption>.