Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #d3d3d3 und Farbe gray73

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 #d3d3d3			Schriftfarbe gray73
Detail	:	Hintergrund #d3d3d3	Detail	:	Schrift gray73
Farbwert	:	#d3d3d3	Farbe	:	gray73
Farbe	:	gray211	Farbwert	:	#494949
HTML	:	#d3d3d3	HTML	:	gray73
HTML (Wert)	:	#d3d3d3	HTML (Wert)	:	#494949
CSS	:	#d3d3d3	CSS	:	gray73
CSS (Wert)	:	#d3d3d3	CSS (Wert)	:	#494949
CSS (kürzest)	:	#d3d3d3	CSS (kürzest)	:	#494949
CSS (RGB)	:	rgb(211,211,211)	CSS (RGB)	:	rgb(73,73,73)
CSS (%RGB)	:	rgb(82%,82%,82%)	CSS (%RGB)	:	rgb(28%,28%,28%)

Verlauf Hintergrundfarbwert #d3d3d3 nach Schriftfarbe gray73
#d3d3d3	#bfbfbf	#ababab	#979797	#848484	#707070	#5c5c5c	#494949
#d3d3d3	#bfbfbf	#ababab	#979797	#848484	#707070	#5c5c5c	#494949

Kombination von #d3d3d3 und gray73
Cras id velit ante. 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit der Farben gray73 und #d3d3d3 ergibt sich zu 71.36%. Die Lesbarkeit dieser Farbkombination liegt damit bei 28.64%. Auf Hintergrund #d3d3d3 ist gray73 ungeeignet, weil die Farben zu ähnlich sind.

Hintergrundfarbwert #d3d3d3				Schriftfarbe gray73
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#d3d3d3	#d3d3d3	#d3d3d3	#d3d3d3	#494949	#494949	#494949	#494949
#d9d9d9	#d9d9d9	#b4b4b4	#b4b4b4	#636363	#636363	#3e3e3e	#3e3e3e
#dfdfdf	#dfdfdf	#969696	#969696	#7d7d7d	#7d7d7d	#343434	#343434
#e5e5e5	#e5e5e5	#787878	#787878	#979797	#979797	#292929	#292929
#ececec	#ececec	#5a5a5a	#5a5a5a	#b1b1b1	#b1b1b1	#1f1f1f	#1f1f1f
#f2f2f2	#f2f2f2	#3c3c3c	#3c3c3c	#cbcbcb	#cbcbcb	#141414	#141414
#f8f8f8	#f8f8f8	#1e1e1e	#1e1e1e	#e5e5e5	#e5e5e5	#0a0a0a	#0a0a0a
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #d3d3d3 und Farbe gray73

Wechsel der Unterstreichung bei Hover von Tag em

Die Unterstreichungsfarbe soll sich von Farbwert #d3d3d3 auf Farbe gray73 ändern, wenn man mit der Maus auf <em> zeigt. Wir bereiten zunächst die Formatierung von <em> in Farbwert #d3d3d3 vor.

In diesem Beispiel unterstreichen wir <em> mit Hilfe eines gefurchten Rahmens mit 1 Pixel Dicke in Farbwert #d3d3d3.

<style type="text/css"><!--
  em { 
    border-bottom-style:groove; 
    border-bottom-color:#d3d3d3; 
    border-bottom-width:1px;
  }
//-->
</style>

Nun fordern wir, dass bei Mausberührung die Farbe der Unterstreichung auf gray73 gesetzt wird.

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

Die Idee ist dabei, unabhängige Formatierungen für Inhalt und Unterstreichung zu haben. Öfter sieht man das bei Hyperlinks. Der Text wird in einer Farbe dargestellt. Und die Unterstreichung in einer anderen. Es ist aber keine normale Unterstreichung, der Text hat keine Unterstreichung. Sie wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Mehr zum Thema können Sie in Text in HTML erfahren. Weiteres zum hier verwendeten HTML-Tag em erfahren Sie in der HTML Referenz unter <em>.

Füllen und Umranden mit HTML-Tag samp

Für dieses Beispiel umranden wir <samp> mit einem einfallenden, 3 Punkte dicken Rahmen in Farbe gray73 . Den Hintergrund von <samp> setzen wir auf Farbwert #d3d3d3. Dies ist mit HTML so kaum möglich. Deshalb nutzen wir hier CSS.

<style type="text/css"><!--
  samp { 
    border-style: inset; 
    border-width: 3pt; 
    background-color: #d3d3d3; 
    border-color: gray73;
  }
//-->
</style>

Weiteres zum Thema samp erfahren Sie in Text in HTML. Weiteres zum Befehl samp ist in der HTML Referenz bei <samp> beschrieben.