Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray68 und Farbe gray174

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 gray68			Schriftfarbe gray174
Detail	:	Hintergrund gray68	Detail	:	Schrift gray174
Farbe	:	gray68	Farbe	:	gray174
Farbwert	:	#444444	Farbwert	:	#aeaeae
HTML	:	gray68	HTML	:	gray174
HTML (Wert)	:	#444444	HTML (Wert)	:	#aeaeae
CSS	:	gray68	CSS	:	gray174
CSS (Wert)	:	#444444	CSS (Wert)	:	#aeaeae
CSS (kürzest)	:	#444	CSS (kürzest)	:	#aeaeae
CSS (RGB)	:	rgb(68,68,68)	CSS (RGB)	:	rgb(174,174,174)
CSS (%RGB)	:	rgb(26%,26%,26%)	CSS (%RGB)	:	rgb(68%,68%,68%)

Verlauf Hintergrundfarbe gray68 nach Schriftfarbe gray174
#444444	#535353	#626262	#717171	#808080	#8f8f8f	#9e9e9e	#aeaeae
#444444	#535353	#626262	#717171	#808080	#8f8f8f	#9e9e9e	#aeaeae

Kombination von gray68 und gray174
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. Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in.				gray174 eignet sich nicht als Schriftfarbe auf Hintergrund gray68. Die Unterschiede in der Helligkeit und Farbe sind zu gering. Die Ähnlichkeit von gray174 und gray68 ergibt sich zu 79.10%. Die Lesbarkeit dieser Kombination bewerte ich mit 20.90%.

Hintergrundfarbe gray68				Schriftfarbe gray174
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#444444	#444444	#444444	#444444	#aeaeae	#aeaeae	#aeaeae	#aeaeae
#5e5e5e	#5e5e5e	#3a3a3a	#3a3a3a	#b9b9b9	#b9b9b9	#959595	#959595
#797979	#797979	#303030	#303030	#c5c5c5	#c5c5c5	#7c7c7c	#7c7c7c
#949494	#949494	#262626	#262626	#d0d0d0	#d0d0d0	#636363	#636363
#aeaeae	#aeaeae	#1d1d1d	#1d1d1d	#dcdcdc	#dcdcdc	#4a4a4a	#4a4a4a
#c9c9c9	#c9c9c9	#131313	#131313	#e7e7e7	#e7e7e7	#313131	#313131
#e4e4e4	#e4e4e4	#090909	#090909	#f3f3f3	#f3f3f3	#181818	#181818
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray68 und Farbe gray174

Wechsel der Umrandung bei Hover mit HTML-Befehl h3

Mit Befehl <h3> setzen Sie eine Überschrift der 3. Stufe. Diese kann man farblich gestalten.

Die Rahmenfarbe soll sich von Farbe gray68 auf Farbe gray174 ändern, wenn man mit der Maus auf <h3> zeigt. Wir bereiten zunächst die Darstellung von <h3> in Farbe gray68 vor.

In diesem Beispiel umranden wir <h3> mit einem 1 Pixel dicken, doppelten Rahmen in Farbe gray68.

<style type="text/css"><!--
  h3 { border:1px double gray68; }
//-->
</style>

Jetzt fordern wir, dass sich bei Berührung mit der Maus die Rahmenfarbe zu gray174 ändert.

<style type="text/css"><!--
  h3:hover { 
    border-color:gray174;
  }
//-->
</style>

Weiteres zu h3 können Sie in Grundlegende Gestaltungselemente in HTML erfahren. Weiteres zum Befehl h3 lesen Sie in der HTML Referenz unter <h3>.

Füllen und Umranden mit HTML-Tag div

Einen Kontainer setzen Sie mit HTML-Befehl <div> und kann hervorgehoben und farblich gestaltet werden.

Hier umranden wir <div> mit einem 5 Punkte dicken, doppelten Rahmen in Farbe gray174 . Die Hintergrundfarbe für <div> färben wir mit Farbe gray68. In HTML ist dies nicht möglich. Daher formatieren wir hier mit CSS.

<style type="text/css"><!--
  div { 
    border-style: double; 
    background-color: gray68; 
    border-width: 5pt; 
    border-color: gray174;
  }
//-->
</style>

Beschreibung vom hier gezeigten HTML-Befehl <div>.