Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #414141 und Farbwert #6d6d6d

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 #414141			Schriftfarbwert #6d6d6d
Detail	:	Hintergrund #414141	Detail	:	Schrift #6d6d6d
Farbwert	:	#414141	Farbwert	:	#6d6d6d
Farbe	:	gray65	Farbe	:	gray109
HTML	:	#414141	HTML	:	#6d6d6d
HTML (Wert)	:	#414141	HTML (Wert)	:	#6d6d6d
CSS	:	#414141	CSS	:	#6d6d6d
CSS (Wert)	:	#414141	CSS (Wert)	:	#6d6d6d
CSS (kürzest)	:	#414141	CSS (kürzest)	:	#6d6d6d
CSS (RGB)	:	rgb(65,65,65)	CSS (RGB)	:	rgb(109,109,109)
CSS (%RGB)	:	rgb(25%,25%,25%)	CSS (%RGB)	:	rgb(42%,42%,42%)

Verlauf Hintergrundfarbwert #414141 nach Schriftfarbwert #6d6d6d
#414141	#474747	#4d4d4d	#535353	#5a5a5a	#606060	#666666	#6d6d6d
#414141	#474747	#4d4d4d	#535353	#5a5a5a	#606060	#666666	#6d6d6d

Kombination von #414141 und #6d6d6d
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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.				#6d6d6d ist nicht als Schriftfarbe auf Hintergrund #414141 geeignet. Weder der Helligkeitsunterschied noch der Farbunterschied sind geeignet. Die Ähnlichkeit der Farben #6d6d6d und #414141 ergibt sich zu 90.61%. Die Lesbarkeit dieser Kombination ergibt sich zu 9.39%.

Hintergrundfarbwert #414141				Schriftfarbwert #6d6d6d
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#414141	#414141	#414141	#414141	#6d6d6d	#6d6d6d	#6d6d6d	#6d6d6d
#5c5c5c	#5c5c5c	#373737	#373737	#818181	#818181	#5d5d5d	#5d5d5d
#777777	#777777	#2e2e2e	#2e2e2e	#969696	#969696	#4d4d4d	#4d4d4d
#929292	#929292	#252525	#252525	#ababab	#ababab	#3e3e3e	#3e3e3e
#adadad	#adadad	#1b1b1b	#1b1b1b	#c0c0c0	#c0c0c0	#2e2e2e	#2e2e2e
#c8c8c8	#c8c8c8	#121212	#121212	#d5d5d5	#d5d5d5	#1f1f1f	#1f1f1f
#e3e3e3	#e3e3e3	#090909	#090909	#eaeaea	#eaeaea	#0f0f0f	#0f0f0f
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #414141 und Farbwert #6d6d6d

Wechsel der Hintergrundfarbe bei Hover von Tag blockquote

Die Hintergrundfarbe soll sich von Farbwert #414141 auf Farbwert #6d6d6d ändern, wenn man mit der Maus auf <blockquote> zeigt. Bereiten wir zunächst die Darstellung von <blockquote> in Farbwert #414141 vor.

Für dieses Beispiel legen wir Farbwert #414141 als Hintergrundfarbe von <blockquote> fest. Zwar lassen wir die Textfarbe unverändert, setzen jedoch die Schriftart auf monospace:

<style type="text/css"><!--
  blockquote { 
    font-family:monospace; 
    background-color:#414141;
  }
//-->
</style>

Nun fordern wir, dass bei Berührung mit der Maus die Hintergrundfarbe auf #6d6d6d geändert wird.

<style type="text/css"><!--
  blockquote:hover { 
    background-color:#6d6d6d;
  }
//-->
</style>

Mehr zu blockquote lesen Sie in Blockorientierte Elemente in HTML. Einzelheiten vom HTML-Tag blockquote sind in der HTML Referenz bei <blockquote> gezeigt.

Füllen und Umranden von Tag a

Mit Tag <a> erzeugen Sie einen Verweis. Diesen können Sie farblich gestalten und hervorheben.

Hier umranden wir <a> mit einem 5 Punkte dicken, gepunkteten Rahmen in Farbwert #6d6d6d . Die Hintergrundfarbe für <a> setzen wir entsprechend auf Farbwert #414141. Das geht mit HTML nicht. Wir nutzen deshalb CSS.

<style type="text/css"><!--
  a { 
    border-color:#6d6d6d; 
    border-style:dotted; 
    border-width:5pt; 
    background-color:#414141;
  }
//-->
</style>

Mehr zum Thema a können Sie in Verweise und Protokolle in HTML erfahren. Möglichkeiten vom hier genutzten Tag a finden Sie in der HTML Referenz unter <a>.