Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray3 und Farbe gray184

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 gray3			Schriftfarbe gray184
Detail	:	Hintergrund gray3	Detail	:	Schrift gray184
Farbe	:	gray3	Farbe	:	gray184
Farbwert	:	#030303	Farbwert	:	#b8b8b8
HTML	:	gray3	HTML	:	gray184
HTML (Wert)	:	#030303	HTML (Wert)	:	#b8b8b8
CSS	:	gray3	CSS	:	gray184
CSS (Wert)	:	#030303	CSS (Wert)	:	#b8b8b8
CSS (kürzest)	:	#030303	CSS (kürzest)	:	#b8b8b8
CSS (RGB)	:	rgb(3,3,3)	CSS (RGB)	:	rgb(184,184,184)
CSS (%RGB)	:	rgb(1%,1%,1%)	CSS (%RGB)	:	rgb(72%,72%,72%)

Verlauf Hintergrundfarbe gray3 nach Schriftfarbe gray184
#030303	#1c1c1c	#363636	#505050	#6a6a6a	#848484	#9e9e9e	#b8b8b8
#030303	#1c1c1c	#363636	#505050	#6a6a6a	#848484	#9e9e9e	#b8b8b8

Kombination von gray3 und gray184
Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. 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.				Die Ähnlichkeit der Farben gray184 und gray3 ergibt sich zu 50.49%. Die Lesbarkeit dieser Kombination bewerte ich mit 49.51%. gray184 eignet sich als Schriftfarbe auf Hintergrund gray3, weil der Unterschied in den Farben gut ist, der Unterschied in den Helligkeiten ebenso.

Hintergrundfarbe gray3				Schriftfarbe gray184
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#030303	#030303	#030303	#030303	#b8b8b8	#b8b8b8	#b8b8b8	#b8b8b8
#272727	#272727	#020202	#020202	#c2c2c2	#c2c2c2	#9d9d9d	#9d9d9d
#4b4b4b	#4b4b4b	#020202	#020202	#cccccc	#cccccc	#838383	#838383
#6f6f6f	#6f6f6f	#010101	#010101	#d6d6d6	#d6d6d6	#696969	#696969
#939393	#939393	#010101	#010101	#e0e0e0	#e0e0e0	#4e4e4e	#4e4e4e
#b7b7b7	#b7b7b7	#000000	#000000	#eaeaea	#eaeaea	#343434	#343434
#dbdbdb	#dbdbdb	#000000	#000000	#f4f4f4	#f4f4f4	#1a1a1a	#1a1a1a
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray3 und Farbe gray184

Wechsel der Unterstreichung bei Hover mit HTML-Befehl legend

Die Unterstreichungsfarbe soll sich von Farbe gray3 auf Farbe gray184 ändern, wenn man mit der Maus auf <legend> zeigt. Wir bereiten zunächst die Formatierung von <legend> in Farbe gray3 vor.

Beispielsweise unterstreichen wir <legend> mit Hilfe eines gepunkteten Rahmens mit 1 Pixel Dicke in Farbe gray3.

<style type="text/css"><!--
  legend { border-bottom:1px dotted gray3; }
//-->
</style>

Nun stellen wir ein, dass sich bei Hover die Unterstreichungsfarbe zu gray184 ändert.

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

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

Weiteres zu legend können Sie in Formulare in HTML erfahren. Möglichkeiten des hier gezeigten HTML-Befehl legend sind in der HTML Referenz unter <legend> genau gezeigt.

Füllen und Umranden von Tag hr

Hier umranden wir <hr> mit einem 3 Punkte dicken, gefurchten Rahmen in Farbe gray184 . Die Hintergrundfarbe für <hr> setzen wir auf Farbe gray3. Das ist mit HTML nicht möglich. Wir verwenden daher CSS.

<style type="text/css"><!--
  hr { border:3pt groove gray184; background-color:gray3; }
//-->
</style>

Mehr zu hr erfahren Sie in Grundlegende Gestaltungselemente in HTML. Möglichkeiten des hier genutzten HTML-Befehl hr lesen Sie in der HTML Referenz unter <hr>.