Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray65 und Farbwert #363636

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 gray65			Schriftfarbwert #363636
Detail	:	Hintergrund gray65	Detail	:	Schrift #363636
Farbe	:	gray65	Farbwert	:	#363636
Farbwert	:	#414141	Farbe	:	gray54
HTML	:	gray65	HTML	:	#363636
HTML (Wert)	:	#414141	HTML (Wert)	:	#363636
CSS	:	gray65	CSS	:	#363636
CSS (Wert)	:	#414141	CSS (Wert)	:	#363636
CSS (kürzest)	:	#414141	CSS (kürzest)	:	#363636
CSS (RGB)	:	rgb(65,65,65)	CSS (RGB)	:	rgb(54,54,54)
CSS (%RGB)	:	rgb(25%,25%,25%)	CSS (%RGB)	:	rgb(21%,21%,21%)

Verlauf Hintergrundfarbe gray65 nach Schriftfarbwert #363636
#414141	#3f3f3f	#3d3d3d	#3c3c3c	#3a3a3a	#393939	#373737	#363636
#414141	#3f3f3f	#3d3d3d	#3c3c3c	#3a3a3a	#393939	#373737	#363636

Kombination von gray65 und #363636
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras vestibulum tristique erat, ac interdum justo cursus in.				Auf Hintergrund gray65 ist #363636 ungeeignet. Die Unterschiede in der Helligkeit und Farbe sind zu gering. Die Ähnlichkeit der Farben #363636 und gray65 ergibt sich zu 94.36%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 5.64%.

Hintergrundfarbe gray65				Schriftfarbwert #363636
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#414141	#414141	#414141	#414141	#363636	#363636	#363636	#363636
#5c5c5c	#5c5c5c	#373737	#373737	#525252	#525252	#2e2e2e	#2e2e2e
#777777	#777777	#2e2e2e	#2e2e2e	#6f6f6f	#6f6f6f	#262626	#262626
#929292	#929292	#252525	#252525	#8c8c8c	#8c8c8c	#1e1e1e	#1e1e1e
#adadad	#adadad	#1b1b1b	#1b1b1b	#a8a8a8	#a8a8a8	#171717	#171717
#c8c8c8	#c8c8c8	#121212	#121212	#c5c5c5	#c5c5c5	#0f0f0f	#0f0f0f
#e3e3e3	#e3e3e3	#090909	#090909	#e2e2e2	#e2e2e2	#070707	#070707
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray65 und Farbwert #363636

Wechsel der Textfarbe bei Hover von HTML-Tag a

Ein Verweis wird mit HTML-Befehl <a> gesetzt. Er kann hervorgehoben und farblich gestaltet werden.

Die Textfarbe soll sich von Farbe gray65 auf Farbwert #363636 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Darstellung von <a> in Farbe gray65 vor.

Hier ändern wir die Textfarbe von <a> auf Farbe gray65. Die Größe der Schrift setzen wir auf 13px:

<style type="text/css"><!--
  a { 
    font-size: 13px; 
    color: gray65;
  }
//-->
</style>

Jetzt fordern wir, dass bei Berührung mit der Maus die Textfarbe auf #363636 geändert wird.

<style type="text/css"><!--
  a: hover { 
    color: #363636;
  }
//-->
</style>

Mehr zum Thema a lesen Sie in Verweise und Protokolle in HTML. Möglichkeiten des hier gezeigten Tag <a>.

Füllen und Umranden mit Befehl blockquote

In diesem Beispiel umranden wir <blockquote> mit einem 1 Punkte dicken, einfallenden Rahmen in Farbwert #363636 . Die Hintergrundfarbe für <blockquote> setzen wir auf Farbe gray65. In HTML geht das kaum. Wir nutzen daher CSS zur Formatierung.

<style type="text/css"><!--
  blockquote { 
    border-style:inset; 
    border-width:1pt; 
    background-color:gray65; 
    border-color:#363636;
  }
//-->
</style>

Mehr zum Thema können Sie in Blockorientierte Elemente in HTML nachlesen. Möglichkeiten des hier genutzten HTML-Tag blockquote sind in der HTML Referenz unter <blockquote> ausführlich beschrieben.