Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #777777 und Farbe gray36

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 #777777			Schriftfarbe gray36
Detail	:	Hintergrund #777777	Detail	:	Schrift gray36
Farbwert	:	#777777	Farbe	:	gray36
Farbe	:	gray119	Farbwert	:	#242424
HTML	:	#777777	HTML	:	gray36
HTML (Wert)	:	#777777	HTML (Wert)	:	#242424
CSS	:	#777777	CSS	:	gray36
CSS (Wert)	:	#777777	CSS (Wert)	:	#242424
CSS (kürzest)	:	#777	CSS (kürzest)	:	#242424
CSS (RGB)	:	rgb(119,119,119)	CSS (RGB)	:	rgb(36,36,36)
CSS (%RGB)	:	rgb(46%,46%,46%)	CSS (%RGB)	:	rgb(14%,14%,14%)

Verlauf Hintergrundfarbwert #777777 nach Schriftfarbe gray36
#777777	#6b6b6b	#5f5f5f	#535353	#474747	#3b3b3b	#2f2f2f	#242424
#777777	#6b6b6b	#5f5f5f	#535353	#474747	#3b3b3b	#2f2f2f	#242424

Kombination von #777777 und gray36
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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit der Farben gray36 und #777777 ergibt sich zu 83.49%. Die Lesbarkeit dieser Farbkombination liegt damit bei 16.51%. gray36 ist nicht als Schriftfarbe auf Hintergrund #777777 geeignet. Die Unterschiede in der Helligkeit und Farbe sind zu gering.

Hintergrundfarbwert #777777				Schriftfarbe gray36
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#777777	#777777	#777777	#777777	#242424	#242424	#242424	#242424
#8a8a8a	#8a8a8a	#666666	#666666	#434343	#434343	#1e1e1e	#1e1e1e
#9d9d9d	#9d9d9d	#555555	#555555	#626262	#626262	#191919	#191919
#b1b1b1	#b1b1b1	#444444	#444444	#818181	#818181	#141414	#141414
#c4c4c4	#c4c4c4	#333333	#333333	#a1a1a1	#a1a1a1	#0f0f0f	#0f0f0f
#d8d8d8	#d8d8d8	#222222	#222222	#c0c0c0	#c0c0c0	#0a0a0a	#0a0a0a
#ebebeb	#ebebeb	#111111	#111111	#dfdfdf	#dfdfdf	#050505	#050505
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiel zur Kombination von Farbwert #777777 und Farbe gray36

Wechsel der Unterstreichung bei Hover von HTML-Befehl h4

Eine Überschrift der 4. Stufe wird mit HTML-Befehl <h4> gesetzt. Diese kann man hervorheben und farblich gestalten.

Die Unterstreichungsfarbe soll sich von Farbwert #777777 auf Farbe gray36 ändern, wenn man mit der Maus auf <h4> zeigt. Wir bereiten zunächst die Darstellung von <h4> in Farbwert #777777 vor.

In diesem Beispiel unterstreichen wir <h4> mit Hilfe eines gezahnten Rahmens mit 1 Pixel Dicke in Farbwert #777777.

<style type="text/css"><!--
  h4 { 
    border-bottom-width:1px; 
    border-bottom-color:#777; 
    border-bottom-style:ridge;
  }
//-->
</style>

Jetzt stellen wir ein, dass bei Hover die Unterstreichungsfarbe auf gray36 geändert wird.

<style type="text/css"><!--
  h4:hover { 
    border-bottom-color:gray36;
  }
//-->
</style>

Die Idee ist, verschiedene Formatierungen für Inhalt und Unterstreichung zu verwenden. Öfter sehen Sie diesen Effekt bei Hyperlinks. Der Text ist in einer Farbe. Die Unterstreichung in einer anderen. Hierbei handelt es sich jedoch nicht um eine "wirkliche" Unterstreichung, der Text selbst hat gar keine Unterstreichung. Die Unterstreichung wird mit einem Rahmen simuliert und dieser Rahmen ist unabhängig vom Text.

Mehr zu h4 können Sie in Grundlegende Gestaltungselemente in HTML erfahren. Der HTML-Befehl h4 ist in der HTML Referenz unter <h4> genau beschrieben.