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

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).

Hintergrundfarbwert #bbbbbb			Schriftfarbe gray78
Detail	:	Hintergrund #bbbbbb	Detail	:	Schrift gray78
Farbwert	:	#bbbbbb	Farbe	:	gray78
Farbe	:	gray187	Farbwert	:	#4e4e4e
HTML	:	#bbbbbb	HTML	:	gray78
HTML (Wert)	:	#bbbbbb	HTML (Wert)	:	#4e4e4e
CSS	:	#bbbbbb	CSS	:	gray78
CSS (Wert)	:	#bbbbbb	CSS (Wert)	:	#4e4e4e
CSS (kürzest)	:	#bbb	CSS (kürzest)	:	#4e4e4e
CSS (RGB)	:	rgb(187,187,187)	CSS (RGB)	:	rgb(78,78,78)
CSS (%RGB)	:	rgb(73%,73%,73%)	CSS (%RGB)	:	rgb(30%,30%,30%)

Verlauf Hintergrundfarbwert #bbbbbb nach Schriftfarbe gray78
#bbbbbb	#ababab	#9b9b9b	#8c8c8c	#7c7c7c	#6d6d6d	#5d5d5d	#4e4e4e
#bbbbbb	#ababab	#9b9b9b	#8c8c8c	#7c7c7c	#6d6d6d	#5d5d5d	#4e4e4e

Kombination von #bbbbbb und gray78
Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in. 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.				Die Ähnlichkeit von gray78 und #bbbbbb ergibt sich zu 79.36%. Die Lesbarkeit dieser Farbkombination liegt damit bei 20.64%. Auf Hintergrund #bbbbbb ist gray78 ungeeignet. Die Helligkeit und Farben sind sich zu ähnlich.

Hintergrundfarbwert #bbbbbb				Schriftfarbe gray78
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#bbbbbb	#bbbbbb	#bbbbbb	#bbbbbb	#4e4e4e	#4e4e4e	#4e4e4e	#4e4e4e
#c4c4c4	#c4c4c4	#a0a0a0	#a0a0a0	#676767	#676767	#424242	#424242
#cecece	#cecece	#858585	#858585	#808080	#808080	#373737	#373737
#d8d8d8	#d8d8d8	#6a6a6a	#6a6a6a	#999999	#999999	#2c2c2c	#2c2c2c
#e1e1e1	#e1e1e1	#505050	#505050	#b3b3b3	#b3b3b3	#212121	#212121
#ebebeb	#ebebeb	#353535	#353535	#cccccc	#cccccc	#161616	#161616
#f5f5f5	#f5f5f5	#1a1a1a	#1a1a1a	#e5e5e5	#e5e5e5	#0b0b0b	#0b0b0b
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #bbbbbb und Farbe gray78

Füllen und Umranden mit HTML-Befehl hr

Bei diesem Beispiel umranden wir <hr> mit einem . Die Hintergrundfarbe für <hr> setzen wir entsprechend auf Farbwert #bbbbbb. In HTML geht dies nicht. Wir nutzen daher CSS zur Formatierung.

<style type="text/css"><!--
  hr { border:2px dashed gray78; background-color:#bbb; }
//-->
</style>

Weiteres zum Thema können Sie in Grundlegende Gestaltungselemente in HTML nachsehen. Möglichkeiten vom HTML-Befehl <hr>.

Wechsel der Hintergrundfarbe bei Hover mit HTML-Befehl a

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

Die Hintergrundfarbe soll sich von Farbwert #bbbbbb auf Farbe gray78 ändern, wenn man mit der Maus auf <a> zeigt. Bereiten wir zunächst eine Formatierung von <a> in Farbwert #bbbbbb vor.

Wir legen als Beispiel Farbwert #bbbbbb als Hintergrundfarbe von <a> fest. Zwar lassen wir die Textfarbe unverändert, ändern jedoch die Schriftart auf arial und setzen die Größe der Schrift auf 13px:

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

Nun fordern wir, dass bei Hover die Hintergrundfarbe auf gray78 geändert wird.

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

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