Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray93 und Farbwert #030303

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 gray93			Schriftfarbwert #030303
Detail	:	Hintergrund gray93	Detail	:	Schrift #030303
Farbe	:	gray93	Farbwert	:	#030303
Farbwert	:	#5d5d5d	Farbe	:	gray3
HTML	:	gray93	HTML	:	#030303
HTML (Wert)	:	#5d5d5d	HTML (Wert)	:	#030303
CSS	:	gray93	CSS	:	#030303
CSS (Wert)	:	#5d5d5d	CSS (Wert)	:	#030303
CSS (kürzest)	:	#5d5d5d	CSS (kürzest)	:	#030303
CSS (RGB)	:	rgb(93,93,93)	CSS (RGB)	:	rgb(3,3,3)
CSS (%RGB)	:	rgb(36%,36%,36%)	CSS (%RGB)	:	rgb(1%,1%,1%)

Verlauf Hintergrundfarbe gray93 nach Schriftfarbwert #030303
#5d5d5d	#505050	#434343	#363636	#292929	#1c1c1c	#0f0f0f	#030303
#5d5d5d	#505050	#434343	#363636	#292929	#1c1c1c	#0f0f0f	#030303

Kombination von gray93 und #030303
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 #030303 und gray93 ergibt sich zu 85.08%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 14.92%. #030303 ist nicht als Schriftfarbe auf Hintergrund gray93 geeignet. Die Helligkeit und Farben sind zu ähnlich.

Hintergrundfarbe gray93				Schriftfarbwert #030303
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#5d5d5d	#5d5d5d	#5d5d5d	#5d5d5d	#030303	#030303	#030303	#030303
#747474	#747474	#4f4f4f	#4f4f4f	#272727	#272727	#020202	#020202
#8b8b8b	#8b8b8b	#424242	#424242	#4b4b4b	#4b4b4b	#020202	#020202
#a2a2a2	#a2a2a2	#353535	#353535	#6f6f6f	#6f6f6f	#010101	#010101
#b9b9b9	#b9b9b9	#272727	#272727	#939393	#939393	#010101	#010101
#d0d0d0	#d0d0d0	#1a1a1a	#1a1a1a	#b7b7b7	#b7b7b7	#000000	#000000
#e7e7e7	#e7e7e7	#0d0d0d	#0d0d0d	#dbdbdb	#dbdbdb	#000000	#000000
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray93 und Farbwert #030303

Text- und Unterstreichungsfarben von Tag fieldset

Hier ändern wir die Textfarbe von <fieldset> auf Farbwert #030303 und lassen die Hintergrundfarbe unverändert. Die Schriftart setzen wir auf courier new. Die Schriftgröße verringern wir auf 86%. Wir unterstreichen den Inhalt von <fieldset> mit Hilfe eines herausstehenden Rahmens mit 2 Pixel Dicke in Farbe gray93. In HTML geht das nicht. Deshalb formatieren wir hier mit CSS.

<style type="text/css"><!--
  fieldset { 
    color:#030303; 
    font-size:86%; 
    border-bottom:2px outset gray93; 
    font-family:courier new;
  }
//-->
</style>

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

Mehr zum Thema fieldset finden Sie in Formulare in HTML. Möglichkeiten vom hier verwendeten HTML-Tag fieldset erfahren Sie in der HTML Referenz unter <fieldset>.

Wechsel der Hintergrundfarbe bei Hover mit HTML-Befehl a

Mit Tag <a> wird ein Hyperlink erzeugt. Diesen kann man hervorheben und farblich gestalten.

Die Hintergrundfarbe soll sich von Farbe gray93 auf Farbwert #030303 ändern, wenn man mit der Maus auf <a> zeigt. Bereiten wir zunächst die Formatierung von <a> in Farbe gray93 vor.

Zum Beispiel setzen wir die Hintergrundfarbe von <a> auf Farbe gray93. Die Textfarbe behalten wir bei, ändern jedoch die Schriftart auf sans-serif.

<style type="text/css"><!--
  a { 
    background-color: gray93; 
    font-family: sans-serif;
  }
//-->
</style>

Nun fordern wir, dass bei Berührung mit der Maus die Hintergrundfarbe auf #030303 gesetzt wird.

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

Weiteres zu a können Sie in Verweise und Protokolle in HTML finden. Einzelheiten vom hier genutzten Befehl a lesen Sie in der HTML Referenz unter <a>.