Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray195 und Farbe gray3

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 gray195			Schriftfarbe gray3
Detail	:	Hintergrund gray195	Detail	:	Schrift gray3
Farbe	:	gray195	Farbe	:	gray3
Farbwert	:	#c3c3c3	Farbwert	:	#030303
HTML	:	gray195	HTML	:	gray3
HTML (Wert)	:	#c3c3c3	HTML (Wert)	:	#030303
CSS	:	gray195	CSS	:	gray3
CSS (Wert)	:	#c3c3c3	CSS (Wert)	:	#030303
CSS (kürzest)	:	#c3c3c3	CSS (kürzest)	:	#030303
CSS (RGB)	:	rgb(195,195,195)	CSS (RGB)	:	rgb(3,3,3)
CSS (%RGB)	:	rgb(76%,76%,76%)	CSS (%RGB)	:	rgb(1%,1%,1%)

Verlauf Hintergrundfarbe gray195 nach Schriftfarbe gray3
#c3c3c3	#a7a7a7	#8c8c8c	#707070	#555555	#393939	#1e1e1e	#030303
#c3c3c3	#a7a7a7	#8c8c8c	#707070	#555555	#393939	#1e1e1e	#030303

Kombination von gray195 und gray3
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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Die Ähnlichkeit der Farben gray3 und gray195 ergibt sich zu 44.28%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 55.72%. gray3 eignet sich als Schriftfarbe auf Hintergrund gray195. Helligkeitsunterschied und Farbenunterschied sind ok.

Hintergrundfarbe gray195				Schriftfarbe gray3
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#c3c3c3	#c3c3c3	#c3c3c3	#c3c3c3	#030303	#030303	#030303	#030303
#cbcbcb	#cbcbcb	#a7a7a7	#a7a7a7	#272727	#272727	#020202	#020202
#d4d4d4	#d4d4d4	#8b8b8b	#8b8b8b	#4b4b4b	#4b4b4b	#020202	#020202
#dcdcdc	#dcdcdc	#6f6f6f	#6f6f6f	#6f6f6f	#6f6f6f	#010101	#010101
#e5e5e5	#e5e5e5	#535353	#535353	#939393	#939393	#010101	#010101
#ededed	#ededed	#373737	#373737	#b7b7b7	#b7b7b7	#000000	#000000
#f6f6f6	#f6f6f6	#1b1b1b	#1b1b1b	#dbdbdb	#dbdbdb	#000000	#000000
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray195 und Farbe gray3

Füllen und Umranden mit Tag p

Für dieses Beispiel umranden wir <p> mit einem 3 Punkte dicken, herausstehenden Rahmen in Farbe gray3 . Die Hintergrundfarbe für <p> setzen wir entsprechend auf Farbe gray195. In HTML geht das nicht. Daher formatieren wir mit CSS.

<style type="text/css"><!--
  p { border:3pt outset gray3; background-color:gray195; }
//-->
</style>

Mehr zum Thema können Sie in Grundlegende Gestaltungselemente in HTML erfahren. Zur Beschreibung des hier genutzten Befehl <p>.

Wechsel der Unterstreichung bei Hover mit Befehl fieldset

Die Farbe der Unterstreichung soll sich von Farbe gray195 auf Farbe gray3 ändern, wenn man mit der Maus auf <fieldset> zeigt. Bereiten wir zunächst die Darstellung von <fieldset> in Farbe gray195 vor.

Hier unterstreichen wir <fieldset> mit einem einfallenden Rahmen mit 2 Pixel Dicke in Farbe gray195.

<style type="text/css"><!--
  fieldset { border-bottom:2px inset gray195; }
//-->
</style>

Nun stellen wir ein, dass sich bei Hover die Farbe der Unterstreichung zu gray3 ändert.

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

Die Idee ist dabei, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben. Öfter sieht man dies bei Verweisen. Der Text wird in einer Farbe dargestellt. Die Unterstreichung in einer anderen. Es ist jedoch keine "normale" Unterstreichung, der Text selbst hat gar keine Unterstreichung. Die Unterstreichung wird mit einem Rahmen simuliert und dieser ist unabhängig vom Text.

Weiteres zu fieldset erfahren Sie in Formulare in HTML. Weiteres zum hier gezeigten Befehl fieldset ist in der HTML Referenz unter <fieldset> genau gezeigt.