Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #535353 und Farbe gray249

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 #535353			Schriftfarbe gray249
Detail	:	Hintergrund #535353	Detail	:	Schrift gray249
Farbwert	:	#535353	Farbe	:	gray249
Farbe	:	gray83	Farbwert	:	#f9f9f9
HTML	:	#535353	HTML	:	gray249
HTML (Wert)	:	#535353	HTML (Wert)	:	#f9f9f9
CSS	:	#535353	CSS	:	gray249
CSS (Wert)	:	#535353	CSS (Wert)	:	#f9f9f9
CSS (kürzest)	:	#535353	CSS (kürzest)	:	#f9f9f9
CSS (RGB)	:	rgb(83,83,83)	CSS (RGB)	:	rgb(249,249,249)
CSS (%RGB)	:	rgb(32%,32%,32%)	CSS (%RGB)	:	rgb(97%,97%,97%)

Verlauf Hintergrundfarbwert #535353 nach Schriftfarbe gray249
#535353	#6a6a6a	#828282	#9a9a9a	#b1b1b1	#c9c9c9	#e1e1e1	#f9f9f9
#535353	#6a6a6a	#828282	#9a9a9a	#b1b1b1	#c9c9c9	#e1e1e1	#f9f9f9

Kombination von #535353 und gray249
Cras vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. 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.				Auf Hintergrund #535353 ist gray249 ungeeignet. Zwar ist der Helligkeitsunterschied ausreichend, doch die Farben selbst sind zu ähnlich. Die Ähnlichkeit der Farben gray249 und #535353 beträgt 65.21%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 34.79%.

Hintergrundfarbwert #535353				Schriftfarbe gray249
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#535353	#535353	#535353	#535353	#f9f9f9	#f9f9f9	#f9f9f9	#f9f9f9
#6b6b6b	#6b6b6b	#474747	#474747	#f9f9f9	#f9f9f9	#d5d5d5	#d5d5d5
#848484	#848484	#3b3b3b	#3b3b3b	#fafafa	#fafafa	#b1b1b1	#b1b1b1
#9c9c9c	#9c9c9c	#2f2f2f	#2f2f2f	#fbfbfb	#fbfbfb	#8e8e8e	#8e8e8e
#b5b5b5	#b5b5b5	#232323	#232323	#fcfcfc	#fcfcfc	#6a6a6a	#6a6a6a
#cdcdcd	#cdcdcd	#171717	#171717	#fdfdfd	#fdfdfd	#474747	#474747
#e6e6e6	#e6e6e6	#0b0b0b	#0b0b0b	#fefefe	#fefefe	#232323	#232323
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #535353 und Farbe gray249

Füllen und Umranden mit Tag h3

Eine Überschrift der 3. Stufe erzeugt man mit Befehl <h3>. Diese kann man farblich gestalten und hervorheben.

Für dieses Beispiel umranden wir <h3> mit einem gefurchten, 4 Punkte dicken Rahmen in Farbe gray249 . Den Hintergrund von <h3> färben wir entsprechend mit Farbwert #535353. Dies ist mit HTML so kaum möglich. Deshalb nutzen wir hier CSS.

<style type="text/css"><!--
  h3 { border:4pt groove gray249; background-color:#535353; }
//-->
</style>

Weiteres zum Thema h3 können Sie in Grundlegende Gestaltungselemente in HTML finden. Beschreibung vom hier verwendeten Befehl <h3>.

Wechsel der Textfarbe bei Hover von Tag blockquote

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

Wir legen als Beispiel Farbwert #535353 als Textfarbe von <blockquote> fest. Die Hintergrundfarbe behalten wir bei. Die Schriftart ändern wir auf verdana und erhöhen die Schriftgröße auf 119%.

<style type="text/css"><!--
  blockquote { 
    color: #535353; 
    font-family: verdana; 
    font-size: 119%;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Hover die Textfarbe auf gray249 ändert.

<style type="text/css"><!--
  blockquote: hover { 
    color: gray249;
  }
//-->
</style>

Weiteres zum Thema finden Sie in Blockorientierte Elemente in HTML. Möglichkeiten vom hier genutzten HTML-Befehl blockquote erfahren Sie in der HTML Referenz unter <blockquote>.