Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #cfcfcf und Farbwert #3e3e3e

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 #cfcfcf			Schriftfarbwert #3e3e3e
Detail	:	Hintergrund #cfcfcf	Detail	:	Schrift #3e3e3e
Farbwert	:	#cfcfcf	Farbwert	:	#3e3e3e
Farbe	:	gray207	Farbe	:	gray62
HTML	:	#cfcfcf	HTML	:	#3e3e3e
HTML (Wert)	:	#cfcfcf	HTML (Wert)	:	#3e3e3e
CSS	:	#cfcfcf	CSS	:	#3e3e3e
CSS (Wert)	:	#cfcfcf	CSS (Wert)	:	#3e3e3e
CSS (kürzest)	:	#cfcfcf	CSS (kürzest)	:	#3e3e3e
CSS (RGB)	:	rgb(207,207,207)	CSS (RGB)	:	rgb(62,62,62)
CSS (%RGB)	:	rgb(81%,81%,81%)	CSS (%RGB)	:	rgb(24%,24%,24%)

Verlauf Hintergrundfarbwert #cfcfcf nach Schriftfarbwert #3e3e3e
#cfcfcf	#bababa	#a5a5a5	#909090	#7c7c7c	#676767	#525252	#3e3e3e
#cfcfcf	#bababa	#a5a5a5	#909090	#7c7c7c	#676767	#525252	#3e3e3e

Kombination von #cfcfcf und #3e3e3e
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante.				Die Ähnlichkeit der Farben #3e3e3e und #cfcfcf ergibt sich zu 67.31%. Die Lesbarkeit dieser Farbkombination liegt damit bei 32.69%. Auf Hintergrund #cfcfcf ist #3e3e3e ungeeignet. Zwar ist der Helligkeitsunterschied gross genug, die Farben selbst sind zu ähnlich.

Hintergrundfarbwert #cfcfcf				Schriftfarbwert #3e3e3e
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#cfcfcf	#cfcfcf	#cfcfcf	#cfcfcf	#3e3e3e	#3e3e3e	#3e3e3e	#3e3e3e
#d5d5d5	#d5d5d5	#b1b1b1	#b1b1b1	#595959	#595959	#353535	#353535
#dcdcdc	#dcdcdc	#939393	#939393	#757575	#757575	#2c2c2c	#2c2c2c
#e3e3e3	#e3e3e3	#767676	#767676	#909090	#909090	#232323	#232323
#eaeaea	#eaeaea	#585858	#585858	#acacac	#acacac	#1a1a1a	#1a1a1a
#f1f1f1	#f1f1f1	#3b3b3b	#3b3b3b	#c7c7c7	#c7c7c7	#111111	#111111
#f8f8f8	#f8f8f8	#1d1d1d	#1d1d1d	#e3e3e3	#e3e3e3	#080808	#080808
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #cfcfcf und Farbwert #3e3e3e

Wechsel der Unterstreichung bei Hover mit HTML-Tag blockquote

Die Farbe der Unterstreichung soll sich von Farbwert #cfcfcf auf Farbwert #3e3e3e ändern, wenn man mit der Maus auf <blockquote> zeigt. Bereiten wir zunächst eine Darstellung von <blockquote> in Farbwert #cfcfcf vor.

Beispielsweise unterstreichen wir <blockquote> mit Hilfe eines gestrichelten Rahmens mit 5 Pixel Dicke in Farbwert #cfcfcf.

<style type="text/css"><!--
  blockquote { border-bottom:5px dashed #cfcfcf; }
//-->
</style>

Jetzt fordern wir, dass sich bei Berührung mit der Maus die Farbe der Unterstreichung zu #3e3e3e ändert.

<style type="text/css"><!--
  blockquote:hover { 
    border-bottom-color:#3e3e3e;
  }
//-->
</style>

Die Idee ist, verschiedene Formatierungen für Inhalt und Unterstreichung zu haben. Öfter sieht man das bei Verweisen. Der Text ist in einer Farbe. Die Unterstreichung in einer anderen. Hierbei handelt es sich jedoch nicht um eine wirkliche Unterstreichung, der Text ist überhaupt nicht unterstrichen. Sie wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Weiteres zum Thema finden Sie in Blockorientierte Elemente in HTML. Die Beschreibung vom HTML-Tag blockquote finden Sie in der HTML Referenz unter <blockquote>.

Wechsel der Textfarbe bei Hover von Befehl address

Die Textfarbe soll sich von Farbwert #cfcfcf auf Farbwert #3e3e3e ändern, wenn man mit der Maus auf <address> zeigt. Wir bereiten zunächst die Darstellung von <address> in Farbwert #cfcfcf vor.

Wir ändern z.B. die Textfarbe von <address> auf Farbwert #cfcfcf und setzen die Schriftgröße auf 13px:

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

Nun stellen wir ein, dass sich bei Berührung mit der Maus die Textfarbe auf #3e3e3e ändert.

<style type="text/css"><!--
  address: hover { 
    color: #3e3e3e;
  }
//-->
</style>

Mehr zu address lesen Sie in Blockorientierte Elemente in HTML. Einzelheiten vom Befehl address erfahren Sie in der HTML Referenz unter <address>.