Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray91 und Farbe gray218

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 gray91			Schriftfarbe gray218
Detail	:	Hintergrund gray91	Detail	:	Schrift gray218
Farbe	:	gray91	Farbe	:	gray218
Farbwert	:	#5b5b5b	Farbwert	:	#dadada
HTML	:	gray91	HTML	:	gray218
HTML (Wert)	:	#5b5b5b	HTML (Wert)	:	#dadada
CSS	:	gray91	CSS	:	gray218
CSS (Wert)	:	#5b5b5b	CSS (Wert)	:	#dadada
CSS (kürzest)	:	#5b5b5b	CSS (kürzest)	:	#dadada
CSS (RGB)	:	rgb(91,91,91)	CSS (RGB)	:	rgb(218,218,218)
CSS (%RGB)	:	rgb(35%,35%,35%)	CSS (%RGB)	:	rgb(85%,85%,85%)

Verlauf Hintergrundfarbe gray91 nach Schriftfarbe gray218
#5b5b5b	#6d6d6d	#7f7f7f	#919191	#a3a3a3	#b5b5b5	#c7c7c7	#dadada
#5b5b5b	#6d6d6d	#7f7f7f	#919191	#a3a3a3	#b5b5b5	#c7c7c7	#dadada

Kombination von gray91 und gray218
Cras vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. 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.				gray218 eignet sich nicht als Schriftfarbe auf Hintergrund gray91. Zwar ist der Helligkeitsunterschied gross genug, die Farben selbst sind jedoch zu ähnlich. Die Ähnlichkeit der Farben gray218 und gray91 ergibt sich zu 76.87%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 23.13%.

Hintergrundfarbe gray91				Schriftfarbe gray218
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#5b5b5b	#5b5b5b	#5b5b5b	#5b5b5b	#dadada	#dadada	#dadada	#dadada
#727272	#727272	#4e4e4e	#4e4e4e	#dfdfdf	#dfdfdf	#bababa	#bababa
#898989	#898989	#414141	#414141	#e4e4e4	#e4e4e4	#9b9b9b	#9b9b9b
#a1a1a1	#a1a1a1	#343434	#343434	#e9e9e9	#e9e9e9	#7c7c7c	#7c7c7c
#b8b8b8	#b8b8b8	#272727	#272727	#efefef	#efefef	#5d5d5d	#5d5d5d
#d0d0d0	#d0d0d0	#1a1a1a	#1a1a1a	#f4f4f4	#f4f4f4	#3e3e3e	#3e3e3e
#e7e7e7	#e7e7e7	#0d0d0d	#0d0d0d	#f9f9f9	#f9f9f9	#1f1f1f	#1f1f1f
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray91 und Farbe gray218

Wechsel der Umrandung bei Hover mit HTML-Tag a

Einen Verweis setzt man mit Befehl <a>. Dieser kann farblich gestaltet werden.

Die Rahmenfarbe soll sich von Farbe gray91 auf Farbe gray218 ändern, wenn man mit der Maus auf <a> zeigt. Wir bereiten zunächst eine Formatierung von <a> in Farbe gray91 vor.

In diesem Beispiel umranden wir <a> mit einem 2 Pixel dicken, einfallenden Rahmen in Farbe gray91.

<style type="text/css"><!--
  a { 
    border-style: inset; 
    border-color: gray91; 
    border-width: 2px;
  }
//-->
</style>

Nun stellen wir ein, dass bei Mausberührung die Rahmenfarbe auf gray218 gesetzt wird.

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

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

Text- und Unterstreichungsfarben bei Tag fieldset

Hier ändern wir die Textfarbe von <fieldset> auf Farbe gray218. Die Schriftart ändern wir auf sans-serif und setzen die Schriftgröße auf 13px. Wir unterstreichen den Inhalt von <fieldset> mit Hilfe eines einfallenden Rahmens mit 1 Punkte Dicke in Farbe gray91. Das geht mit HTML kaum. Wir verwenden deshalb CSS zur Formatierung.

<style type="text/css"><!--
  fieldset { 
    color: gray218; 
    font-size: 13px; 
    border-bottom-style: inset; 
    font-family: sans-serif; 
    border-bottom-color: gray91; 
    border-bottom-width: 1pt;
  }
//-->
</style>

Die Idee ist, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben.

Weiteres zum Thema können Sie in Formulare in HTML erfahren. Möglichkeiten vom hier verwendeten Tag fieldset erfahren Sie in der HTML Referenz unter <fieldset>.