Ressourcen: 16 Graustufen in HTML - Kombination von Farbwert #ffffff und Farbwert #666666

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 #ffffff			Schriftfarbwert #666666
Detail	:	Hintergrund #ffffff	Detail	:	Schrift #666666
Farbwert	:	#ffffff	Farbwert	:	#666666
Farbe	:	white	Farbe	:	gray102
HTML	:	#ffffff	HTML	:	#666666
HTML (Wert)	:	#ffffff	HTML (Wert)	:	#666666
CSS	:	#ffffff	CSS	:	#666666
CSS (Wert)	:	#ffffff	CSS (Wert)	:	#666666
CSS (kürzest)	:	#fff	CSS (kürzest)	:	#666
CSS (RGB)	:	rgb(255,255,255)	CSS (RGB)	:	rgb(102,102,102)
CSS (%RGB)	:	rgb(100%,100%,100%)	CSS (%RGB)	:	rgb(40%,40%,40%)

Verlauf Hintergrundfarbwert #ffffff nach Schriftfarbwert #666666
#ffffff	#e9e9e9	#d3d3d3	#bdbdbd	#a7a7a7	#919191	#7b7b7b	#666666
#ffffff	#e9e9e9	#d3d3d3	#bdbdbd	#a7a7a7	#919191	#7b7b7b	#666666

Kombination von #ffffff und #666666
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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Die Ähnlichkeit der Farben #666666 und #ffffff beträgt 72.66%. Die Lesbarkeit dieser Farbkombination liegt damit bei 27.34%. #666666 ist nicht als Schriftfarbe auf Hintergrund #ffffff geeignet. Zwar ist der Helligkeitsunterschied ok, doch die Farben selbst sind zu ähnlich.

Hintergrundfarbwert #ffffff				Schriftfarbwert #666666
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ffffff	#ffffff	#ffffff	#ffffff	#666666	#666666	#666666	#666666
#ffffff	#ffffff	#dadada	#dadada	#7b7b7b	#7b7b7b	#575757	#575757
#ffffff	#ffffff	#b6b6b6	#b6b6b6	#919191	#919191	#484848	#484848
#ffffff	#ffffff	#919191	#919191	#a7a7a7	#a7a7a7	#3a3a3a	#3a3a3a
#ffffff	#ffffff	#6d6d6d	#6d6d6d	#bdbdbd	#bdbdbd	#2b2b2b	#2b2b2b
#ffffff	#ffffff	#484848	#484848	#d3d3d3	#d3d3d3	#1d1d1d	#1d1d1d
#ffffff	#ffffff	#242424	#242424	#e9e9e9	#e9e9e9	#0e0e0e	#0e0e0e
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #ffffff und Farbwert #666666

Füllen und Umranden mit Tag frame

Bei diesem Beispiel umranden wir <frame> mit einem 3 Pixel dicken, gezahnten Rahmen in Farbwert #666666 . Die Hintergrundfarbe für <frame> färben wir mit Farbwert #ffffff. Mit HTML ist dies nicht machbar. Wir verwenden deshalb CSS.

<style type="text/css"><!--
  frame { 
    border-width:3px; 
    border-color:#666666; 
    border-style:ridge; 
    background-color:#ffffff;
  }
//-->
</style>

Einzelheiten vom hier gezeigten Befehl <frame>.

Wechsel der Hintergrundfarbe bei Hover bei Befehl a

Mit HTML-Tag <a> wird ein Hyperlink gesetzt. Dieser kann hervorgehoben und farblich gestaltet werden.

Die Hintergrundfarbe soll sich von Farbwert #ffffff auf Farbwert #666666 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Darstellung von <a> in Farbwert #ffffff vor.

Als Beispiel ändern wir bei <a> die Hintergrundfarbe auf Farbwert #ffffff und setzen die Größe der Schrift auf 93%:

<style type="text/css"><!--
  a { 
    font-size: 93%; 
    background-color: #fff;
  }
//-->
</style>

Nun fordern wir, dass bei Mausberührung die Hintergrundfarbe auf #666666 gesetzt wird.

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

Weiteres zum Thema a finden Sie in Verweise und Protokolle in HTML. Einzelheiten vom HTML-Befehl a erfahren Sie in der HTML Referenz unter <a>.