Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray156 und Farbwert #303030

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 gray156			Schriftfarbwert #303030
Detail	:	Hintergrund gray156	Detail	:	Schrift #303030
Farbe	:	gray156	Farbwert	:	#303030
Farbwert	:	#9c9c9c	Farbe	:	gray48
HTML	:	gray156	HTML	:	#303030
HTML (Wert)	:	#9c9c9c	HTML (Wert)	:	#303030
CSS	:	gray156	CSS	:	#303030
CSS (Wert)	:	#9c9c9c	CSS (Wert)	:	#303030
CSS (kürzest)	:	#9c9c9c	CSS (kürzest)	:	#303030
CSS (RGB)	:	rgb(156,156,156)	CSS (RGB)	:	rgb(48,48,48)
CSS (%RGB)	:	rgb(61%,61%,61%)	CSS (%RGB)	:	rgb(18%,18%,18%)

Verlauf Hintergrundfarbe gray156 nach Schriftfarbwert #303030
#9c9c9c	#8c8c8c	#7d7d7d	#6d6d6d	#5e5e5e	#4e4e4e	#3f3f3f	#303030
#9c9c9c	#8c8c8c	#7d7d7d	#6d6d6d	#5e5e5e	#4e4e4e	#3f3f3f	#303030

Kombination von gray156 und #303030
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante.				Die Ähnlichkeit von #303030 und gray156 beträgt 77.11%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 22.89%. #303030 ist nicht als Schriftfarbe auf Hintergrund gray156 geeignet. Die Unterschiede in der Helligkeit und Farbe sind zu gering.

Hintergrundfarbe gray156				Schriftfarbwert #303030
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#9c9c9c	#9c9c9c	#9c9c9c	#9c9c9c	#303030	#303030	#303030	#303030
#aaaaaa	#aaaaaa	#858585	#858585	#4d4d4d	#4d4d4d	#292929	#292929
#b8b8b8	#b8b8b8	#6f6f6f	#6f6f6f	#6b6b6b	#6b6b6b	#222222	#222222
#c6c6c6	#c6c6c6	#595959	#595959	#888888	#888888	#1b1b1b	#1b1b1b
#d4d4d4	#d4d4d4	#424242	#424242	#a6a6a6	#a6a6a6	#141414	#141414
#e2e2e2	#e2e2e2	#2c2c2c	#2c2c2c	#c3c3c3	#c3c3c3	#0d0d0d	#0d0d0d
#f0f0f0	#f0f0f0	#161616	#161616	#e1e1e1	#e1e1e1	#060606	#060606
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray156 und Farbwert #303030

Wechsel der Unterstreichung bei Hover bei HTML-Tag h3

Mit Befehl <h3> setzen Sie eine Überschrift der 3. Stufe. Diese kann farblich gestaltet und hervorgehoben werden.

Die Unterstreichungsfarbe soll sich von Farbe gray156 auf Farbwert #303030 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst die Formatierung von <h3> in Farbe gray156 vor.

In diesem Beispiel unterstreichen wir <h3> mit Hilfe eines gezahnten Rahmens mit 3 Pixel Dicke in Farbe gray156.

<style type="text/css"><!--
  h3 { border-bottom:3px ridge gray156; }
//-->
</style>

Jetzt fordern wir, dass sich bei Mausberührung die Unterstreichungsfarbe auf #303030 ändert.

<style type="text/css"><!--
  h3:hover { 
    border-bottom-color:#303030;
  }
//-->
</style>

Die Idee ist dabei, voneinander unabhängige Formatierungen für Inhalt und Unterstreichung zu nutzen. Öfter sehen Sie dies bei Links. Der Text ist in einer Farbe. Und die Unterstreichung in einer anderen. Hierbei handelt es sich aber nicht um eine "normale" Unterstreichung, der Text selbst ist nicht unterstrichen. Sie wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Mehr zum Thema finden Sie in Grundlegende Gestaltungselemente in HTML. Möglichkeiten vom HTML-Befehl <h3>.

Füllen und Umranden mit Befehl select

Für dieses Beispiel umranden wir <select> mit einem 5 Pixel dicken, herausstehenden Rahmen in Farbwert #303030 . Die Hintergrundfarbe für <select> färben wir entsprechend mit Farbe gray156. In HTML ist dies nicht machbar. Wir nutzen daher CSS zur Formatierung.

<style type="text/css"><!--
  select { border:5px outset #303030; background-color:gray156; }
//-->
</style>

Weiteres zum Thema erfahren Sie in Formulare in HTML. Mehr zum HTML-Tag select lesen Sie in der HTML Referenz unter <select>.