Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray110 und Farbwert #f4f4f4

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 gray110			Schriftfarbwert #f4f4f4
Detail	:	Hintergrund gray110	Detail	:	Schrift #f4f4f4
Farbe	:	gray110	Farbwert	:	#f4f4f4
Farbwert	:	#6e6e6e	Farbe	:	gray244
HTML	:	gray110	HTML	:	#f4f4f4
HTML (Wert)	:	#6e6e6e	HTML (Wert)	:	#f4f4f4
CSS	:	gray110	CSS	:	#f4f4f4
CSS (Wert)	:	#6e6e6e	CSS (Wert)	:	#f4f4f4
CSS (kürzest)	:	#6e6e6e	CSS (kürzest)	:	#f4f4f4
CSS (RGB)	:	rgb(110,110,110)	CSS (RGB)	:	rgb(244,244,244)
CSS (%RGB)	:	rgb(43%,43%,43%)	CSS (%RGB)	:	rgb(95%,95%,95%)

Verlauf Hintergrundfarbe gray110 nach Schriftfarbwert #f4f4f4
#6e6e6e	#818181	#949494	#a7a7a7	#bababa	#cdcdcd	#e0e0e0	#f4f4f4
#6e6e6e	#818181	#949494	#a7a7a7	#bababa	#cdcdcd	#e0e0e0	#f4f4f4

Kombination von gray110 und #f4f4f4
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna.				Die Ähnlichkeit der Farben #f4f4f4 und gray110 beträgt 77.92%. Die Lesbarkeit dieser Kombination bewerte ich mit 22.08%. #f4f4f4 ist nicht als Schriftfarbe auf Hintergrund gray110 geeignet, da sich die Farben zu ähnlich sind.

Hintergrundfarbe gray110				Schriftfarbwert #f4f4f4
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#6e6e6e	#6e6e6e	#6e6e6e	#6e6e6e	#f4f4f4	#f4f4f4	#f4f4f4	#f4f4f4
#828282	#828282	#5e5e5e	#5e5e5e	#f5f5f5	#f5f5f5	#d1d1d1	#d1d1d1
#979797	#979797	#4e4e4e	#4e4e4e	#f7f7f7	#f7f7f7	#aeaeae	#aeaeae
#acacac	#acacac	#3e3e3e	#3e3e3e	#f8f8f8	#f8f8f8	#8b8b8b	#8b8b8b
#c0c0c0	#c0c0c0	#2f2f2f	#2f2f2f	#fafafa	#fafafa	#686868	#686868
#d5d5d5	#d5d5d5	#1f1f1f	#1f1f1f	#fbfbfb	#fbfbfb	#454545	#454545
#eaeaea	#eaeaea	#0f0f0f	#0f0f0f	#fdfdfd	#fdfdfd	#222222	#222222
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray110 und Farbwert #f4f4f4

Text- und Unterstreichungsfarben mit HTML-Befehl blockquote

Hier ändern wir die Textfarbe von <blockquote> auf Farbwert #f4f4f4. Die Schriftart ändern wir auf courier new. Die Schriftgröße setzen wir auf 86%. Wir unterstreichen den Inhalt von <blockquote> mit Hilfe eines gestrichelten Rahmens mit 5 Pixel Dicke in Farbe gray110. Dies geht in HTML nicht. Deshalb nutzen wir hierfür CSS.

<style type="text/css"><!--
  blockquote { 
    color:#f4f4f4; 
    font-size:86%; 
    border-bottom-style:dashed; 
    border-bottom-color:gray110; 
    font-family:courier new; 
    border-bottom-width:5px;
  }
//-->
</style>

Die Idee ist, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben.

Mehr zum Thema blockquote erfahren Sie in Blockorientierte Elemente in HTML. Einzelheiten des hier gezeigten HTML-Tag <blockquote>.

Wechsel der Hintergrundfarbe bei Hover von Tag button

Die Hintergrundfarbe soll sich von Farbe gray110 auf Farbwert #f4f4f4 ändern, wenn man mit der Maus auf <button> zeigt. Bereiten wir zunächst die Darstellung von <button> in Farbe gray110 vor.

Wir setzen hier bei <button> die Hintergrundfarbe auf Farbe gray110. Zwar lassen wir die Textfarbe unverändert, ändern jedoch die Schriftart auf sans-serif und vergrößern die Schriftgröße auf 115%.

<style type="text/css"><!--
  button { 
    font-family:sans-serif; 
    font-size:115%; 
    background-color:gray110;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Berührung mit der Maus die Hintergrundfarbe zu #f4f4f4 ändert.

<style type="text/css"><!--
  button: hover { 
    background-color: #f4f4f4;
  }
//-->
</style>

Mehr zum Thema können Sie in Formulare in HTML nachlesen. Die Beschreibung des HTML-Tag button lesen Sie in der HTML Referenz unter <button>.