Ressourcen: 16 Graustufen in HTML - Kombination von Farbe gray68 und Farbwert #333333

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.

Hintergrundfarbe gray68			Schriftfarbwert #333333
Detail	:	Hintergrund gray68	Detail	:	Schrift #333333
Farbe	:	gray68	Farbwert	:	#333333
Farbwert	:	#444444	Farbe	:	gray51
HTML	:	gray68	HTML	:	#333333
HTML (Wert)	:	#444444	HTML (Wert)	:	#333333
CSS	:	gray68	CSS	:	#333333
CSS (Wert)	:	#444444	CSS (Wert)	:	#333333
CSS (kürzest)	:	#444	CSS (kürzest)	:	#333
CSS (RGB)	:	rgb(68,68,68)	CSS (RGB)	:	rgb(51,51,51)
CSS (%RGB)	:	rgb(26%,26%,26%)	CSS (%RGB)	:	rgb(20%,20%,20%)

Verlauf Hintergrundfarbe gray68 nach Schriftfarbwert #333333
#444444	#414141	#3f3f3f	#3c3c3c	#3a3a3a	#373737	#353535	#333333
#444444	#414141	#3f3f3f	#3c3c3c	#3a3a3a	#373737	#353535	#333333

Kombination von gray68 und #333333
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Die Ähnlichkeit von #333333 und gray68 beträgt 93.82%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 6.18%. Auf Hintergrund gray68 ist #333333 ungeeignet. Die Unterschiede in der Helligkeit und Farbe sind zu gering.

Hintergrundfarbe gray68				Schriftfarbwert #333333
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#444444	#444444	#444444	#444444	#333333	#333333	#333333	#333333
#5e5e5e	#5e5e5e	#3a3a3a	#3a3a3a	#505050	#505050	#2b2b2b	#2b2b2b
#797979	#797979	#303030	#303030	#6d6d6d	#6d6d6d	#242424	#242424
#949494	#949494	#262626	#262626	#8a8a8a	#8a8a8a	#1d1d1d	#1d1d1d
#aeaeae	#aeaeae	#1d1d1d	#1d1d1d	#a7a7a7	#a7a7a7	#151515	#151515
#c9c9c9	#c9c9c9	#131313	#131313	#c4c4c4	#c4c4c4	#0e0e0e	#0e0e0e
#e4e4e4	#e4e4e4	#090909	#090909	#e1e1e1	#e1e1e1	#070707	#070707
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray68 und Farbwert #333333

Wechsel der Umrandung bei Hover mit HTML-Tag center

Die Rahmenfarbe soll sich von Farbe gray68 auf Farbwert #333333 ändern, wenn man mit der Maus auf <center> zeigt. Wir bereiten zunächst die Formatierung von <center> in Farbe gray68 vor.

In diesem Beispiel umranden wir <center> mit einem 3 Pixel dicken, gefurchten Rahmen in Farbe gray68.

<style type="text/css"><!--
  center { border:3px groove gray68; }
//-->
</style>

Jetzt fordern wir, dass bei Berührung mit der Maus die Rahmenfarbe auf #333333 geändert wird.

<style type="text/css"><!--
  center: hover { 
    border-color: #333;
  }
//-->
</style>

Weiteres zum Thema lesen Sie in Grundlegende Gestaltungselemente in HTML. Mehr zum hier genutzten HTML-Tag center erfahren Sie in der HTML Referenz unter <center>.

Text- und Unterstreichungsfarben bei HTML-Tag a

Einen Hyperlink erzeugen Sie mit HTML-Befehl <a>. Diesen können Sie farblich gestalten und hervorheben.

Hier ändern wir die Textfarbe von <a> auf Farbwert #333333 und lassen die Hintergrundfarbe unverändert. Die Schriftart setzen wir auf verdana und ändern die Schriftgröße auf 13px. Wir unterstreichen den Inhalt von <a> mit Hilfe eines gefurchten Rahmens mit 3 Pixel Dicke in Farbe gray68. Mit HTML geht das kaum. Deshalb formatieren wir mit CSS.

<style type="text/css"><!--
  a { 
    font-size:13px; 
    font-family:verdana; 
    color:#333333; 
    border-bottom-color:gray68; 
    border-bottom-width:3px; 
    border-bottom-style:groove;
  }
//-->
</style>

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

Weiteres zu a können Sie in Verweise und Protokolle in HTML nachsehen. Weiteres zum hier gezeigten HTML-Tag <a>.