Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray141 und Farbe gray64

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 gray141			Schriftfarbe gray64
Detail	:	Hintergrund gray141	Detail	:	Schrift gray64
Farbe	:	gray141	Farbe	:	gray64
Farbwert	:	#8d8d8d	Farbwert	:	#404040
HTML	:	gray141	HTML	:	gray64
HTML (Wert)	:	#8d8d8d	HTML (Wert)	:	#404040
CSS	:	gray141	CSS	:	gray64
CSS (Wert)	:	#8d8d8d	CSS (Wert)	:	#404040
CSS (kürzest)	:	#8d8d8d	CSS (kürzest)	:	#404040
CSS (RGB)	:	rgb(141,141,141)	CSS (RGB)	:	rgb(64,64,64)
CSS (%RGB)	:	rgb(55%,55%,55%)	CSS (%RGB)	:	rgb(25%,25%,25%)

Verlauf Hintergrundfarbe gray141 nach Schriftfarbe gray64
#8d8d8d	#828282	#777777	#6c6c6c	#616161	#565656	#4b4b4b	#404040
#8d8d8d	#828282	#777777	#6c6c6c	#616161	#565656	#4b4b4b	#404040

Kombination von gray141 und gray64
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras vestibulum tristique erat, ac interdum justo cursus in.				gray64 eignet sich nicht als Schriftfarbe auf Hintergrund gray141. Die Unterschiede in der Helligkeit und Farbe sind nicht ausreichend. Die Ähnlichkeit von gray64 und gray141 beträgt 85.12%. Die Lesbarkeit dieser Kombination ergibt sich zu 14.88%.

Hintergrundfarbe gray141				Schriftfarbe gray64
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#8d8d8d	#8d8d8d	#8d8d8d	#8d8d8d	#404040	#404040	#404040	#404040
#9d9d9d	#9d9d9d	#787878	#787878	#5b5b5b	#5b5b5b	#363636	#363636
#adadad	#adadad	#646464	#646464	#767676	#767676	#2d2d2d	#2d2d2d
#bdbdbd	#bdbdbd	#505050	#505050	#919191	#919191	#242424	#242424
#cecece	#cecece	#3c3c3c	#3c3c3c	#adadad	#adadad	#1b1b1b	#1b1b1b
#dedede	#dedede	#282828	#282828	#c8c8c8	#c8c8c8	#121212	#121212
#eeeeee	#eeeeee	#141414	#141414	#e3e3e3	#e3e3e3	#090909	#090909
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray141 und Farbe gray64

Füllen und Umranden mit Tag tbody

Hier umranden wir <tbody> mit einem 2 Pixel dicken, gezahnten Rahmen in Farbe gray64 . Die Hintergrundfarbe für <tbody> färben wir entsprechend mit Farbe gray141. Das ist mit HTML nicht möglich. Wir nutzen deshalb CSS zur Formatierung.

<style type="text/css"><!--
  tbody { 
    border-style:ridge; 
    background-color:gray141; 
    border-color:gray64; 
    border-width:2px;
  }
//-->
</style>

Weiteres zum Thema tbody erfahren Sie in Tabellen in HTML. Der Befehl tbody ist in der HTML Referenz bei <tbody> gezeigt.

Wechsel der Unterstreichung bei Hover mit Tag legend

Die Farbe der Unterstreichung soll sich von Farbe gray141 auf Farbe gray64 ändern, wenn man mit der Maus auf <legend> zeigt. Wir bereiten zunächst eine Formatierung von <legend> in Farbe gray141 vor.

Beispielsweise unterstreichen wir <legend> mit einem gezahnten Rahmen mit 3 Pixel Dicke in Farbe gray141.

<style type="text/css"><!--
  legend { 
    border-bottom-color: gray141; 
    border-bottom-width: 3px; 
    border-bottom-style: ridge;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Mausberührung die Farbe der Unterstreichung zu gray64 ändert.

<style type="text/css"><!--
  legend: hover { 
    border-bottom-color: gray64;
  }
//-->
</style>

Die Idee ist hierbei, unabhängige Formatierungen für Inhalt und Unterstreichung zu nutzen. Manchmal sieht man das bei Links. Der Text wird in einer Farbe dargestellt. Die Unterstreichung in einer anderen. Das ist jedoch keine "normale" Unterstreichung, der Text selbst ist überhaupt nicht unterstrichen. Die Unterstreichung wird mit einem Rahmen simuliert und dieser Rahmen ist unabhängig vom Text.

Mehr zu legend können Sie in Formulare in HTML erfahren. Einzelheiten des Tag legend erfahren Sie in der HTML Referenz unter <legend>.