Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray157 und Farbwert #dedede

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 gray157			Schriftfarbwert #dedede
Detail	:	Hintergrund gray157	Detail	:	Schrift #dedede
Farbe	:	gray157	Farbwert	:	#dedede
Farbwert	:	#9d9d9d	Farbe	:	gray222
HTML	:	gray157	HTML	:	#dedede
HTML (Wert)	:	#9d9d9d	HTML (Wert)	:	#dedede
CSS	:	gray157	CSS	:	#dedede
CSS (Wert)	:	#9d9d9d	CSS (Wert)	:	#dedede
CSS (kürzest)	:	#9d9d9d	CSS (kürzest)	:	#dedede
CSS (RGB)	:	rgb(157,157,157)	CSS (RGB)	:	rgb(222,222,222)
CSS (%RGB)	:	rgb(61%,61%,61%)	CSS (%RGB)	:	rgb(87%,87%,87%)

Verlauf Hintergrundfarbe gray157 nach Schriftfarbwert #dedede
#9d9d9d	#a6a6a6	#afafaf	#b8b8b8	#c2c2c2	#cbcbcb	#d4d4d4	#dedede
#9d9d9d	#a6a6a6	#afafaf	#b8b8b8	#c2c2c2	#cbcbcb	#d4d4d4	#dedede

Kombination von gray157 und #dedede
Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. 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 id velit ante.				Die Ähnlichkeit der Farben #dedede und gray157 ergibt sich zu 90.40%. Die Lesbarkeit dieser Farbkombination liegt damit bei 9.60%. Auf Hintergrund gray157 ist #dedede ungeeignet. Die Helligkeit und Farben sind zu ähnlich.

Hintergrundfarbe gray157				Schriftfarbwert #dedede
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#9d9d9d	#9d9d9d	#9d9d9d	#9d9d9d	#dedede	#dedede	#dedede	#dedede
#ababab	#ababab	#868686	#868686	#e2e2e2	#e2e2e2	#bebebe	#bebebe
#b9b9b9	#b9b9b9	#707070	#707070	#e7e7e7	#e7e7e7	#9e9e9e	#9e9e9e
#c7c7c7	#c7c7c7	#595959	#595959	#ececec	#ececec	#7e7e7e	#7e7e7e
#d5d5d5	#d5d5d5	#434343	#434343	#f0f0f0	#f0f0f0	#5f5f5f	#5f5f5f
#e3e3e3	#e3e3e3	#2c2c2c	#2c2c2c	#f5f5f5	#f5f5f5	#3f3f3f	#3f3f3f
#f1f1f1	#f1f1f1	#161616	#161616	#fafafa	#fafafa	#1f1f1f	#1f1f1f
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray157 und Farbwert #dedede

Füllen und Umranden von Tag strike

In diesem Beispiel umranden wir <strike> mit einem einfallenden, 4 Punkte dicken Rahmen in Farbwert #dedede . Die Hintergrundfarbe für <strike> setzen wir entsprechend auf Farbe gray157. Mit HTML ist dies kaum machbar. Wir verwenden daher CSS zur Formatierung.

<style type="text/css"><!--
  strike { border:4pt inset #dedede; background-color:gray157; }
//-->
</style>

Weiteres zum Thema strike können Sie in Text in HTML erfahren. Die Beschreibung des hier gezeigten HTML-Tag strike lesen Sie in der HTML Referenz unter <strike>.

Wechsel der Umrandung bei Hover mit Tag div

Einen Kontainer setzt man mit Befehl <div>. Er kann farblich gestaltet werden.

Die Rahmenfarbe soll sich von Farbe gray157 auf Farbwert #dedede ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Darstellung von <div> in Farbe gray157 vor.

In diesem Beispiel umranden wir <div> mit einem 1 Pixel dicken, einfallenden Rahmen in Farbe gray157.

<style type="text/css"><!--
  div { border:1px inset gray157; }
//-->
</style>

Nun stellen wir ein, dass bei Hover die Rahmenfarbe auf #dedede geändert wird.

<style type="text/css"><!--
  div: hover { 
    border-color: #dedede;
  }
//-->
</style>

Die Beschreibung vom hier gezeigten Tag div finden Sie in der HTML Referenz unter <div>.