Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #070707 und Farbe gray187

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).

Hintergrundfarbwert #070707			Schriftfarbe gray187
Detail	:	Hintergrund #070707	Detail	:	Schrift gray187
Farbwert	:	#070707	Farbe	:	gray187
Farbe	:	gray7	Farbwert	:	#bbbbbb
HTML	:	#070707	HTML	:	gray187
HTML (Wert)	:	#070707	HTML (Wert)	:	#bbbbbb
CSS	:	#070707	CSS	:	gray187
CSS (Wert)	:	#070707	CSS (Wert)	:	#bbbbbb
CSS (kürzest)	:	#070707	CSS (kürzest)	:	#bbb
CSS (RGB)	:	rgb(7,7,7)	CSS (RGB)	:	rgb(187,187,187)
CSS (%RGB)	:	rgb(2%,2%,2%)	CSS (%RGB)	:	rgb(73%,73%,73%)

Verlauf Hintergrundfarbwert #070707 nach Schriftfarbe gray187
#070707	#202020	#3a3a3a	#545454	#6d6d6d	#878787	#a1a1a1	#bbbbbb
#070707	#202020	#3a3a3a	#545454	#6d6d6d	#878787	#a1a1a1	#bbbbbb

Kombination von #070707 und gray187
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. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit der Farben gray187 und #070707 beträgt 50.03%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 49.97%. gray187 eignet sich als Schriftfarbe auf Hintergrund #070707, weil sowohl der Helligkeitsunterschied als auch der Unterschied in den Farben ok sind.

Hintergrundfarbwert #070707				Schriftfarbe gray187
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#070707	#070707	#070707	#070707	#bbbbbb	#bbbbbb	#bbbbbb	#bbbbbb
#2a2a2a	#2a2a2a	#060606	#060606	#c4c4c4	#c4c4c4	#a0a0a0	#a0a0a0
#4d4d4d	#4d4d4d	#050505	#050505	#cecece	#cecece	#858585	#858585
#717171	#717171	#040404	#040404	#d8d8d8	#d8d8d8	#6a6a6a	#6a6a6a
#949494	#949494	#030303	#030303	#e1e1e1	#e1e1e1	#505050	#505050
#b8b8b8	#b8b8b8	#020202	#020202	#ebebeb	#ebebeb	#353535	#353535
#dbdbdb	#dbdbdb	#010101	#010101	#f5f5f5	#f5f5f5	#1a1a1a	#1a1a1a
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #070707 und Farbe gray187

Text- und Unterstreichungsfarben mit Befehl h6

Eine Überschrift der 6. Stufe erzeugt man mit HTML-Befehl <h6>. Diese können Sie hervorheben und farblich gestalten.

Bei diesem Beispiel ändern wir die Textfarbe von <h6> auf Farbe gray187 und lassen die Hintergrundfarbe unverändert. Die Schriftart ändern wir auf sans-serif. Die Schriftgröße setzen wir auf 90%. Wir unterstreichen den Inhalt von <h6> mit Hilfe eines gepunkteten Rahmens mit 5 Pixel Dicke in Farbwert #070707. Das ist in HTML so kaum möglich. Deshalb verwenden wir CSS.

<style type="text/css"><!--
  h6 { 
    border-bottom:5px dotted #070707; 
    color:gray187; 
    font-family:sans-serif; 
    font-size:90%;
  }
//-->
</style>

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

Mehr zum Thema h6 lesen Sie in Grundlegende Gestaltungselemente in HTML. Einzelheiten vom HTML-Befehl h6 finden Sie in der HTML Referenz unter <h6>.

Wechsel der Hintergrundfarbe bei Hover von Tag li

Die Hintergrundfarbe soll sich von Farbwert #070707 auf Farbe gray187 ändern, wenn man mit der Maus auf <li> zeigt. Wir bereiten zunächst die Darstellung von <li> in Farbwert #070707 vor.

In diesem Beispiel ändern wir bei <li> die Hintergrundfarbe auf Farbwert #070707.

<style type="text/css"><!--
  li { 
    background-color: #070707;
  }
//-->
</style>

Jetzt fordern wir, dass bei Mausberührung die Hintergrundfarbe auf gray187 geändert wird.

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

Mehr zum Thema li lesen Sie in Listen und Glossare in HTML. Mehr zum HTML-Befehl li lesen Sie in der HTML Referenz unter <li>.