Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray46 und Farbe gray207

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 gray46			Schriftfarbe gray207
Detail	:	Hintergrund gray46	Detail	:	Schrift gray207
Farbe	:	gray46	Farbe	:	gray207
Farbwert	:	#2e2e2e	Farbwert	:	#cfcfcf
HTML	:	gray46	HTML	:	gray207
HTML (Wert)	:	#2e2e2e	HTML (Wert)	:	#cfcfcf
CSS	:	gray46	CSS	:	gray207
CSS (Wert)	:	#2e2e2e	CSS (Wert)	:	#cfcfcf
CSS (kürzest)	:	#2e2e2e	CSS (kürzest)	:	#cfcfcf
CSS (RGB)	:	rgb(46,46,46)	CSS (RGB)	:	rgb(207,207,207)
CSS (%RGB)	:	rgb(18%,18%,18%)	CSS (%RGB)	:	rgb(81%,81%,81%)

Verlauf Hintergrundfarbe gray46 nach Schriftfarbe gray207
#2e2e2e	#454545	#5c5c5c	#737373	#8a8a8a	#a1a1a1	#b8b8b8	#cfcfcf
#2e2e2e	#454545	#5c5c5c	#737373	#8a8a8a	#a1a1a1	#b8b8b8	#cfcfcf

Kombination von gray46 und gray207
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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in.				Auf Hintergrund gray46 ist gray207 ungeeignet, da der Unterschied in den Farben nicht ausreichend ist Die Ähnlichkeit von gray207 und gray46 beträgt 58.49%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 41.51%.

Hintergrundfarbe gray46				Schriftfarbe gray207
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#2e2e2e	#2e2e2e	#2e2e2e	#2e2e2e	#cfcfcf	#cfcfcf	#cfcfcf	#cfcfcf
#4b4b4b	#4b4b4b	#272727	#272727	#d5d5d5	#d5d5d5	#b1b1b1	#b1b1b1
#696969	#696969	#202020	#202020	#dcdcdc	#dcdcdc	#939393	#939393
#878787	#878787	#1a1a1a	#1a1a1a	#e3e3e3	#e3e3e3	#767676	#767676
#a5a5a5	#a5a5a5	#131313	#131313	#eaeaea	#eaeaea	#585858	#585858
#c3c3c3	#c3c3c3	#0d0d0d	#0d0d0d	#f1f1f1	#f1f1f1	#3b3b3b	#3b3b3b
#e1e1e1	#e1e1e1	#060606	#060606	#f8f8f8	#f8f8f8	#1d1d1d	#1d1d1d
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray46 und Farbe gray207

Füllen und Umranden bei HTML-Tag a

Einen Link setzt man mit HTML-Befehl <a>. Dieser kann farblich gestaltet und hervorgehoben werden.

Hier umranden wir <a> mit einem gezahnten, 3 Punkte dicken Rahmen in Farbe gray207 . Die Hintergrundfarbe für <a> setzen wir entsprechend auf Farbe gray46. In HTML geht das nicht. Wir nutzen daher CSS.

<style type="text/css"><!--
  a { 
    border-style: ridge; 
    background-color: gray46; 
    border-width: 3pt; 
    border-color: gray207;
  }
//-->
</style>

Mehr zum Thema können Sie in Verweise und Protokolle in HTML nachlesen. Weiteres zum Tag <a>.

Wechsel der Hintergrundfarbe bei Hover mit Befehl code

Die Hintergrundfarbe soll sich von Farbe gray46 auf Farbe gray207 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <code> in Farbe gray46 vor.

Wir legen hier Farbe gray46 als Hintergrundfarbe von <code> fest:

<style type="text/css"><!--
  code { 
    background-color:gray46;
  }
//-->
</style>

Nun stellen wir ein, dass bei Hover die Hintergrundfarbe auf gray207 gesetzt wird.

<style type="text/css"><!--
  code:hover { 
    background-color:gray207;
  }
//-->
</style>

Weiteres zum Thema erfahren Sie in Text in HTML. Einzelheiten vom Tag <code>.