Ressourcen: 16 Graustufen in HTML - Kombination von Farbwert #444444 und Farbwert #888888

Graustufen enthalten insbesondere die unbunten Grundfarben Schwarz und Weiß.

Um 16 Graustufen in HTML bzw. CSS zu erzeugen, wählen wir Farbwerte rr, gg und bb mit Werten von 0 bis 15 (d.h. hexadezimal 0 bis f) für r, g und b.

Hintergrundfarbwert #444444			Schriftfarbwert #888888
Detail	:	Hintergrund #444444	Detail	:	Schrift #888888
Farbwert	:	#444444	Farbwert	:	#888888
Farbe	:	gray68	Farbe	:	gray136
HTML	:	#444444	HTML	:	#888888
HTML (Wert)	:	#444444	HTML (Wert)	:	#888888
CSS	:	#444444	CSS	:	#888888
CSS (Wert)	:	#444444	CSS (Wert)	:	#888888
CSS (kürzest)	:	#444	CSS (kürzest)	:	#888
CSS (RGB)	:	rgb(68,68,68)	CSS (RGB)	:	rgb(136,136,136)
CSS (%RGB)	:	rgb(26%,26%,26%)	CSS (%RGB)	:	rgb(53%,53%,53%)

Verlauf Hintergrundfarbwert #444444 nach Schriftfarbwert #888888
#444444	#4d4d4d	#575757	#616161	#6a6a6a	#747474	#7e7e7e	#888888
#444444	#4d4d4d	#575757	#616161	#6a6a6a	#747474	#7e7e7e	#888888

Kombination von #444444 und #888888
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit von #888888 und #444444 ergibt sich zu 86.92%. Die Lesbarkeit dieser Kombination bewerte ich mit 13.08%. Auf Hintergrund #444444 ist #888888 ungeeignet, da die Helligkeit und Farben zu ähnlich sind.

Hintergrundfarbwert #444444				Schriftfarbwert #888888
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#444444	#444444	#444444	#444444	#888888	#888888	#888888	#888888
#5e5e5e	#5e5e5e	#3a3a3a	#3a3a3a	#999999	#999999	#747474	#747474
#797979	#797979	#303030	#303030	#aaaaaa	#aaaaaa	#616161	#616161
#949494	#949494	#262626	#262626	#bbbbbb	#bbbbbb	#4d4d4d	#4d4d4d
#aeaeae	#aeaeae	#1d1d1d	#1d1d1d	#cccccc	#cccccc	#3a3a3a	#3a3a3a
#c9c9c9	#c9c9c9	#131313	#131313	#dddddd	#dddddd	#262626	#262626
#e4e4e4	#e4e4e4	#090909	#090909	#eeeeee	#eeeeee	#131313	#131313
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #444444 und Farbwert #888888

Text- und Unterstreichungsfarben von Befehl blockquote

Wir ändern Hher die Textfarbe von <blockquote> auf Farbwert #888888. Die Schriftart ändern wir auf courier new. Die Schriftgröße ändern wir auf 9pt. Wir unterstreichen den Inhalt von <blockquote> mit Hilfe eines gestrichelten Rahmens mit 5 Punkte Dicke in Farbwert #444444. Das ist in HTML so kaum möglich. Wir nutzen daher CSS zur Formatierung.

<style type="text/css"><!--
  blockquote { 
    color:#888; 
    font-size:9pt; 
    font-family:courier new; 
    border-bottom:5pt dashed #444;
  }
//-->
</style>

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

Mehr zu blockquote erfahren Sie in Blockorientierte Elemente in HTML. Mehr zum hier verwendeten Tag <blockquote>.

Wechsel der Textfarbe bei Hover bei HTML-Befehl h2

Mit HTML-Befehl <h2> erzeugen Sie eine Überschrift der 2. Stufe. Diese kann man farblich gestalten.

Die Textfarbe soll sich von Farbwert #444444 auf Farbwert #888888 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Darstellung von <h2> in Farbwert #444444 vor.

Wir legen als Beispiel Farbwert #444444 als Textfarbe von <h2> fest.

<style type="text/css"><!--
  h2 { 
    color:#444444;
  }
//-->
</style>

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

<style type="text/css"><!--
  h2: hover { 
    color: #888888;
  }
//-->
</style>

Mehr zu h2 können Sie in Grundlegende Gestaltungselemente in HTML nachlesen. Möglichkeiten vom Befehl h2 sind in der HTML Referenz unter <h2> ausführlich gezeigt.