Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray78 und Farbwert #f9f9f9

Graustufen enthalten natürlich alle 16 Graustufen und insbesondere die unbunten Grundfarben Schwarz und Weiß.

Um 256 Graustufen in HTML bzw. CSS zu erzeugen, wählen wir Farbwerte rr, gg und bb mit Werten von 0 bis 255 (d.h. hexadezimal 00 bis ff).

Hintergrundfarbe gray78			Schriftfarbwert #f9f9f9
Detail	:	Hintergrund gray78	Detail	:	Schrift #f9f9f9
Farbe	:	gray78	Farbwert	:	#f9f9f9
Farbwert	:	#4e4e4e	Farbe	:	gray249
HTML	:	gray78	HTML	:	#f9f9f9
HTML (Wert)	:	#4e4e4e	HTML (Wert)	:	#f9f9f9
CSS	:	gray78	CSS	:	#f9f9f9
CSS (Wert)	:	#4e4e4e	CSS (Wert)	:	#f9f9f9
CSS (kürzest)	:	#4e4e4e	CSS (kürzest)	:	#f9f9f9
CSS (RGB)	:	rgb(78,78,78)	CSS (RGB)	:	rgb(249,249,249)
CSS (%RGB)	:	rgb(30%,30%,30%)	CSS (%RGB)	:	rgb(97%,97%,97%)

Verlauf Hintergrundfarbe gray78 nach Schriftfarbwert #f9f9f9
#4e4e4e	#666666	#7e7e7e	#979797	#afafaf	#c8c8c8	#e0e0e0	#f9f9f9
#4e4e4e	#666666	#7e7e7e	#979797	#afafaf	#c8c8c8	#e0e0e0	#f9f9f9

Kombination von gray78 und #f9f9f9
Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. 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.				#f9f9f9 eignet sich als Schriftfarbe auf Hintergrund gray78, weil Unterschied in den Helligkeiten und Farbenunterschied in Ordnung sind. Die Ähnlichkeit der Farben #f9f9f9 und gray78 ergibt sich zu 62.36%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 37.64%.

Hintergrundfarbe gray78				Schriftfarbwert #f9f9f9
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#4e4e4e	#4e4e4e	#4e4e4e	#4e4e4e	#f9f9f9	#f9f9f9	#f9f9f9	#f9f9f9
#676767	#676767	#424242	#424242	#f9f9f9	#f9f9f9	#d5d5d5	#d5d5d5
#808080	#808080	#373737	#373737	#fafafa	#fafafa	#b1b1b1	#b1b1b1
#999999	#999999	#2c2c2c	#2c2c2c	#fbfbfb	#fbfbfb	#8e8e8e	#8e8e8e
#b3b3b3	#b3b3b3	#212121	#212121	#fcfcfc	#fcfcfc	#6a6a6a	#6a6a6a
#cccccc	#cccccc	#161616	#161616	#fdfdfd	#fdfdfd	#474747	#474747
#e5e5e5	#e5e5e5	#0b0b0b	#0b0b0b	#fefefe	#fefefe	#232323	#232323
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray78 und Farbwert #f9f9f9

Wechsel der Umrandung bei Hover bei HTML-Tag frame

Die Rahmenfarbe soll sich von Farbe gray78 auf Farbwert #f9f9f9 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Darstellung von <frame> in Farbe gray78 vor.

In diesem Beispiel umranden wir <frame> mit einem 2 Pixel dicken, gepunkteten Rahmen in Farbe gray78.

<style type="text/css"><!--
  frame { border:2px dotted gray78; }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Hover die Rahmenfarbe zu #f9f9f9 ändert.

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

Der hier gezeigte HTML-Befehl frame ist in der HTML Referenz bei <frame> zusammengestellt.

Wechsel der Hintergrundfarbe bei Hover mit Tag legend

Die Hintergrundfarbe soll sich von Farbe gray78 auf Farbwert #f9f9f9 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Darstellung von <legend> in Farbe gray78 vor.

Für dieses Beispiel legen wir Farbe gray78 als Hintergrundfarbe von <legend> fest. Die Textfarbe behalten wir bei. Die Schriftart ändern wir auf arial. Die Größe der Schrift setzen wir auf 13px:

<style type="text/css"><!--
  legend { 
    background-color:gray78; 
    font-family:arial; 
    font-size:13px;
  }
//-->
</style>

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

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

Weiteres zu legend erfahren Sie in Formulare in HTML. Möglichkeiten des hier gezeigten Befehl legend lesen Sie in der HTML Referenz unter <legend>.