Ressourcen: 256 Graustufen in HTML - Kombination von Farbe gray90 und Farbe gray85

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 gray90			Schriftfarbe gray85
Detail	:	Hintergrund gray90	Detail	:	Schrift gray85
Farbe	:	gray90	Farbe	:	gray85
Farbwert	:	#5a5a5a	Farbwert	:	#555555
HTML	:	gray90	HTML	:	gray85
HTML (Wert)	:	#5a5a5a	HTML (Wert)	:	#555555
CSS	:	gray90	CSS	:	gray85
CSS (Wert)	:	#5a5a5a	CSS (Wert)	:	#555555
CSS (kürzest)	:	#5a5a5a	CSS (kürzest)	:	#555
CSS (RGB)	:	rgb(90,90,90)	CSS (RGB)	:	rgb(85,85,85)
CSS (%RGB)	:	rgb(35%,35%,35%)	CSS (%RGB)	:	rgb(33%,33%,33%)

Verlauf Hintergrundfarbe gray90 nach Schriftfarbe gray85
#5a5a5a	#595959	#585858	#575757	#575757	#565656	#555555	#555555
#5a5a5a	#595959	#585858	#575757	#575757	#565656	#555555	#555555

Kombination von gray90 und gray85
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. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				Auf Hintergrund gray90 ist gray85 ungeeignet. Weder der Helligkeitsunterschied noch der Farbunterschied sind geeignet. Die Ähnlichkeit von gray85 und gray90 ergibt sich zu 94.85%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 5.15%.

Hintergrundfarbe gray90				Schriftfarbe gray85
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#5a5a5a	#5a5a5a	#5a5a5a	#5a5a5a	#555555	#555555	#555555	#555555
#717171	#717171	#4d4d4d	#4d4d4d	#6d6d6d	#6d6d6d	#484848	#484848
#898989	#898989	#404040	#404040	#858585	#858585	#3c3c3c	#3c3c3c
#a0a0a0	#a0a0a0	#333333	#333333	#9d9d9d	#9d9d9d	#303030	#303030
#b8b8b8	#b8b8b8	#262626	#262626	#b6b6b6	#b6b6b6	#242424	#242424
#cfcfcf	#cfcfcf	#191919	#191919	#cecece	#cecece	#181818	#181818
#e7e7e7	#e7e7e7	#0c0c0c	#0c0c0c	#e6e6e6	#e6e6e6	#0c0c0c	#0c0c0c
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe gray90 und Farbe gray85

Wechsel der Hintergrundfarbe bei Hover von Befehl code

Die Hintergrundfarbe soll sich von Farbe gray90 auf Farbe gray85 ändern, wenn man mit der Maus auf <code> zeigt. Bereiten wir zunächst die Darstellung von <code> in Farbe gray90 vor.

Z.B. legen wir bei <code> die Hintergrundfarbe auf Farbe gray90 fest und ändern die Schriftgröße auf 10px.

<style type="text/css"><!--
  code { 
    font-size: 10px; 
    background-color: gray90;
  }
//-->
</style>

Nun stellen wir ein, dass bei Berührung mit der Maus die Hintergrundfarbe auf gray85 gesetzt wird.

<style type="text/css"><!--
  code: hover { 
    background-color: gray85;
  }
//-->
</style>

Weiteres zu code finden Sie in Text in HTML. Zur Beschreibung vom HTML-Befehl <code>.

Text- und Unterstreichungsfarben mit Befehl a

Einen Hyperlink erzeugen Sie mit Befehl <a>. Diesen kann man farblich gestalten und hervorheben.

Wir ändern bei diesem Beispiel die Textfarbe von <a> auf Farbe gray85. Die Schriftart setzen wir auf sans-serif. Die Schriftgröße verringern wir auf 80%. Wir unterstreichen den Inhalt von <a> mit Hilfe eines einfallenden Rahmens mit 4 Punkte Dicke in Farbe gray90. In HTML geht das nicht. Deshalb nutzen wir hierfür CSS.

<style type="text/css"><!--
  a { 
    color: gray85; 
    font-size: 80%; 
    font-family: sans-serif; 
    border-bottom: 4pt inset gray90;
  }
//-->
</style>

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

Mehr zu a können Sie in Verweise und Protokolle in HTML lesen. Der Tag a ist in der HTML Referenz unter <a> beschrieben.