Ressourcen: 16 Graustufen in HTML - Kombination von Farbwert #dddddd und Farbwert #000000

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 #dddddd			Schriftfarbwert #000000
Detail	:	Hintergrund #dddddd	Detail	:	Schrift #000000
Farbwert	:	#dddddd	Farbwert	:	#000000
Farbe	:	gray221	Farbe	:	black
HTML	:	#dddddd	HTML	:	#000000
HTML (Wert)	:	#dddddd	HTML (Wert)	:	#000000
CSS	:	#dddddd	CSS	:	#000000
CSS (Wert)	:	#dddddd	CSS (Wert)	:	#000000
CSS (kürzest)	:	#ddd	CSS (kürzest)	:	#000
CSS (RGB)	:	rgb(221,221,221)	CSS (RGB)	:	rgb(0,0,0)
CSS (%RGB)	:	rgb(86%,86%,86%)	CSS (%RGB)	:	rgb(0%,0%,0%)

Verlauf Hintergrundfarbwert #dddddd nach Schriftfarbwert #000000
#dddddd	#bdbdbd	#9d9d9d	#7e7e7e	#5e5e5e	#3f3f3f	#1f1f1f	#000000
#dddddd	#bdbdbd	#9d9d9d	#7e7e7e	#5e5e5e	#3f3f3f	#1f1f1f	#000000

Kombination von #dddddd und #000000
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.				#000000 eignet sich als Schriftfarbe auf Hintergrund #dddddd. Die Unterschiede in Helligkeit und Farbe sind in Ordnung. Die Ähnlichkeit von #000000 und #dddddd beträgt 26.38%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 73.62%.

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

Beispiele zur Kombination von Farbwert #dddddd und Farbwert #000000

Wechsel der Hintergrundfarbe bei Hover von Tag center

Die Hintergrundfarbe soll sich von Farbwert #dddddd auf Farbwert #000000 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Formatierung von <center> in Farbwert #dddddd vor.

Wir legen z.B. bei <center> die Hintergrundfarbe auf Farbwert #dddddd fest. Die Textfarbe lassen wir unverändert. Die Schriftart setzen wir auf monospace:

<style type="text/css"><!--
  center { 
    background-color:#ddd; 
    font-family:monospace;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Mausberührung die Hintergrundfarbe zu #000000 ändert.

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

Mehr zum Thema erfahren Sie in Grundlegende Gestaltungselemente in HTML. Mehr zum hier verwendeten Befehl center erfahren Sie in der HTML Referenz unter <center>.

Wechsel der Textfarbe bei Hover von Befehl p

Die Textfarbe soll sich von Farbwert #dddddd auf Farbwert #000000 ändern, wenn man mit der Maus auf <p> zeigt. Wir bereiten zunächst eine Darstellung von <p> in Farbwert #dddddd vor.

In diesem Beispiel legen wir die Textfarbe von <p> auf Farbwert #dddddd fest und setzen die Größe der Schrift auf 10px:

<style type="text/css"><!--
  p { 
    font-size:10px; 
    color:#ddd;
  }
//-->
</style>

Nun fordern wir, dass sich bei Mausberührung die Textfarbe auf #000000 ändert.

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

Mehr zum Thema erfahren Sie in Grundlegende Gestaltungselemente in HTML. Zur Beschreibung des hier verwendeten HTML-Befehl <p>.