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

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 gray83			Schriftfarbwert #bbbbbb
Detail	:	Hintergrund gray83	Detail	:	Schrift #bbbbbb
Farbe	:	gray83	Farbwert	:	#bbbbbb
Farbwert	:	#535353	Farbe	:	gray187
HTML	:	gray83	HTML	:	#bbbbbb
HTML (Wert)	:	#535353	HTML (Wert)	:	#bbbbbb
CSS	:	gray83	CSS	:	#bbbbbb
CSS (Wert)	:	#535353	CSS (Wert)	:	#bbbbbb
CSS (kürzest)	:	#535353	CSS (kürzest)	:	#bbb
CSS (RGB)	:	rgb(83,83,83)	CSS (RGB)	:	rgb(187,187,187)
CSS (%RGB)	:	rgb(32%,32%,32%)	CSS (%RGB)	:	rgb(73%,73%,73%)

Verlauf Hintergrundfarbe gray83 nach Schriftfarbwert #bbbbbb
#535353	#616161	#707070	#7f7f7f	#8e8e8e	#9d9d9d	#acacac	#bbbbbb
#535353	#616161	#707070	#7f7f7f	#8e8e8e	#9d9d9d	#acacac	#bbbbbb

Kombination von gray83 und #bbbbbb
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. Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				Die Ähnlichkeit von #bbbbbb und gray83 ergibt sich zu 80.92%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 19.08%. #bbbbbb eignet sich nicht als Schriftfarbe auf Hintergrund gray83. Die Unterschiede in der Helligkeit und Farbe sind nicht ausreichend.

Hintergrundfarbe gray83				Schriftfarbwert #bbbbbb
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#535353	#535353	#535353	#535353	#bbbbbb	#bbbbbb	#bbbbbb	#bbbbbb
#6b6b6b	#6b6b6b	#474747	#474747	#c4c4c4	#c4c4c4	#a0a0a0	#a0a0a0
#848484	#848484	#3b3b3b	#3b3b3b	#cecece	#cecece	#858585	#858585
#9c9c9c	#9c9c9c	#2f2f2f	#2f2f2f	#d8d8d8	#d8d8d8	#6a6a6a	#6a6a6a
#b5b5b5	#b5b5b5	#232323	#232323	#e1e1e1	#e1e1e1	#505050	#505050
#cdcdcd	#cdcdcd	#171717	#171717	#ebebeb	#ebebeb	#353535	#353535
#e6e6e6	#e6e6e6	#0b0b0b	#0b0b0b	#f5f5f5	#f5f5f5	#1a1a1a	#1a1a1a
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray83 und Farbwert #bbbbbb

Füllen und Umranden bei Tag frameset

In diesem Beispiel umranden wir <frameset> mit einem doppelten, 4 Pixel dicken Rahmen in Farbwert #bbbbbb . Die Hintergrundfarbe für <frameset> färben wir entsprechend mit Farbe gray83. In HTML geht dies nicht. Deshalb verwenden wir CSS zur Formatierung.

<style type="text/css"><!--
  frameset { 
    border-style: double; 
    border-width: 4px; 
    border-color: #bbb; 
    background-color: gray83;
  }
//-->
</style>

Einzelheiten vom hier gezeigten HTML-Befehl frameset sind in der HTML Referenz bei <frameset> genau beschrieben.

Wechsel der Hintergrundfarbe bei Hover mit HTML-Befehl table

Die Hintergrundfarbe soll sich von Farbe gray83 auf Farbwert #bbbbbb ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <table> in Farbe gray83 vor.

Zum Beispiel setzen wir bei <table> die Hintergrundfarbe auf Farbe gray83. Die Textfarbe lassen wir unverändert. Die Schriftart ändern wir auf sans-serif und verringern die Größe der Schrift auf 86%.

<style type="text/css"><!--
  table { 
    background-color: gray83; 
    font-family: sans-serif; 
    font-size: 86%;
  }
//-->
</style>

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

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

Mehr zum Thema können Sie in Tabellen in HTML nachsehen. Zur Beschreibung vom hier genutzten HTML-Befehl <table>.