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

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 gray221			Schriftfarbwert #ffffff
Detail	:	Hintergrund gray221	Detail	:	Schrift #ffffff
Farbe	:	gray221	Farbwert	:	#ffffff
Farbwert	:	#dddddd	Farbe	:	white
HTML	:	gray221	HTML	:	#ffffff
HTML (Wert)	:	#dddddd	HTML (Wert)	:	#ffffff
CSS	:	gray221	CSS	:	#ffffff
CSS (Wert)	:	#dddddd	CSS (Wert)	:	#ffffff
CSS (kürzest)	:	#ddd	CSS (kürzest)	:	#fff
CSS (RGB)	:	rgb(221,221,221)	CSS (RGB)	:	rgb(255,255,255)
CSS (%RGB)	:	rgb(86%,86%,86%)	CSS (%RGB)	:	rgb(100%,100%,100%)

Verlauf Hintergrundfarbe gray221 nach Schriftfarbwert #ffffff
#dddddd	#e1e1e1	#e6e6e6	#ebebeb	#f0f0f0	#f5f5f5	#fafafa	#ffffff
#dddddd	#e1e1e1	#e6e6e6	#ebebeb	#f0f0f0	#f5f5f5	#fafafa	#ffffff

Kombination von gray221 und #ffffff
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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit der Farben #ffffff und gray221 beträgt 93.53%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 6.47%. #ffffff eignet sich nicht als Schriftfarbe auf Hintergrund gray221, da die Unterschiede in der Helligkeit und Farbe nicht ausreichend sind.

Hintergrundfarbe gray221				Schriftfarbwert #ffffff
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#dddddd	#dddddd	#dddddd	#dddddd	#ffffff	#ffffff	#ffffff	#ffffff
#e1e1e1	#e1e1e1	#bdbdbd	#bdbdbd	#ffffff	#ffffff	#dadada	#dadada
#e6e6e6	#e6e6e6	#9d9d9d	#9d9d9d	#ffffff	#ffffff	#b6b6b6	#b6b6b6
#ebebeb	#ebebeb	#7e7e7e	#7e7e7e	#ffffff	#ffffff	#919191	#919191
#f0f0f0	#f0f0f0	#5e5e5e	#5e5e5e	#ffffff	#ffffff	#6d6d6d	#6d6d6d
#f5f5f5	#f5f5f5	#3f3f3f	#3f3f3f	#ffffff	#ffffff	#484848	#484848
#fafafa	#fafafa	#1f1f1f	#1f1f1f	#ffffff	#ffffff	#242424	#242424
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiel zur Kombination von Farbe gray221 und Farbwert #ffffff

Wechsel der Hintergrundfarbe bei Hover mit Tag blockquote

Die Hintergrundfarbe soll sich von Farbe gray221 auf Farbwert #ffffff ändern, wenn man mit der Maus auf <blockquote> zeigt. Wir bereiten zunächst die Formatierung von <blockquote> in Farbe gray221 vor.

Wir legen als Beispiel die Hintergrundfarbe von <blockquote> auf Farbe gray221 fest. Zwar lassen wir die Textfarbe unverändert, ändern jedoch die Schriftart auf sans-serif:

<style type="text/css"><!--
  blockquote { 
    background-color:gray221; 
    font-family:sans-serif;
  }
//-->
</style>

Jetzt fordern wir, dass bei Mausberührung die Hintergrundfarbe auf #ffffff geändert wird.

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

Mehr zum Thema lesen Sie in Blockorientierte Elemente in HTML. Einzelheiten des HTML-Befehl blockquote sind in der HTML Referenz unter <blockquote> ausführlich beschrieben.