Ressourcen: 16 Graustufen in HTML - Kombination von Farbwert #555555 und Farbwert #bbbbbb

Graustufen enthalten insbesondere die unbunten Grundfarben Schwarz und Weiß.

Um 16 Graustufen in HTML bzw. CSS zu erzeugen, wählen wir Farbwerte rr, gg und bb mit Werten von 0 bis 15 (d.h. hexadezimal 0 bis f) für r, g und b.

Hintergrundfarbwert #555555			Schriftfarbwert #bbbbbb
Detail	:	Hintergrund #555555	Detail	:	Schrift #bbbbbb
Farbwert	:	#555555	Farbwert	:	#bbbbbb
Farbe	:	gray85	Farbe	:	gray187
HTML	:	#555555	HTML	:	#bbbbbb
HTML (Wert)	:	#555555	HTML (Wert)	:	#bbbbbb
CSS	:	#555555	CSS	:	#bbbbbb
CSS (Wert)	:	#555555	CSS (Wert)	:	#bbbbbb
CSS (kürzest)	:	#555	CSS (kürzest)	:	#bbb
CSS (RGB)	:	rgb(85,85,85)	CSS (RGB)	:	rgb(187,187,187)
CSS (%RGB)	:	rgb(33%,33%,33%)	CSS (%RGB)	:	rgb(73%,73%,73%)

Verlauf Hintergrundfarbwert #555555 nach Schriftfarbwert #bbbbbb
#555555	#636363	#727272	#808080	#8f8f8f	#9d9d9d	#acacac	#bbbbbb
#555555	#636363	#727272	#808080	#8f8f8f	#9d9d9d	#acacac	#bbbbbb

Kombination von #555555 und #bbbbbb
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. Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				#bbbbbb ist nicht als Schriftfarbe auf Hintergrund #555555 geeignet, weil weder der Helligkeitsunterschied noch der Farbunterschied ausreichend sind. Die Ähnlichkeit von #bbbbbb und #555555 beträgt 81.51%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 18.49%.

Hintergrundfarbwert #555555				Schriftfarbwert #bbbbbb
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#555555	#555555	#555555	#555555	#bbbbbb	#bbbbbb	#bbbbbb	#bbbbbb
#6d6d6d	#6d6d6d	#484848	#484848	#c4c4c4	#c4c4c4	#a0a0a0	#a0a0a0
#858585	#858585	#3c3c3c	#3c3c3c	#cecece	#cecece	#858585	#858585
#9d9d9d	#9d9d9d	#303030	#303030	#d8d8d8	#d8d8d8	#6a6a6a	#6a6a6a
#b6b6b6	#b6b6b6	#242424	#242424	#e1e1e1	#e1e1e1	#505050	#505050
#cecece	#cecece	#181818	#181818	#ebebeb	#ebebeb	#353535	#353535
#e6e6e6	#e6e6e6	#0c0c0c	#0c0c0c	#f5f5f5	#f5f5f5	#1a1a1a	#1a1a1a
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #555555 und Farbwert #bbbbbb

Wechsel der Textfarbe bei Hover mit Befehl a

Ein Verweis wird mit HTML-Befehl <a> erzeugt. Diesen können Sie farblich gestalten.

Die Textfarbe soll sich von Farbwert #555555 auf Farbwert #bbbbbb ändern, wenn man mit der Maus auf <a> zeigt. Wir bereiten zunächst eine Formatierung von <a> in Farbwert #555555 vor.

Wir legen z.B. Farbwert #555555 als Textfarbe von <a> fest. Zwar behalten wir die Hintergrundfarbe bei, ändern jedoch die Schriftart auf verdana:

<style type="text/css"><!--
  a { 
    color: #555555; 
    font-family: verdana;
  }
//-->
</style>

Nun fordern wir, dass bei Mausberührung die Textfarbe auf #bbbbbb geändert wird.

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

Weiteres zum Thema erfahren Sie in Verweise und Protokolle in HTML. Mehr zum hier gezeigten Befehl <a>.

Zebra-Effekt von Tag td

Man redet vom Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Der Effekt unterstützt das Auge zum Beispiel die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ungerade und .gerade für <td> mit unterschiedlichen Hintergrundfarben Farbwert #555555 und Farbwert #bbbbbb.

<style type="text/css"><!--
  td.ungerade { 
    background-color:#555;
  }
  td.gerade { 
    background-color: #bbbbbb;
  }
//-->
</style>

Diese Klassen werden abwechselnd angewendet.

<table>
<tr><td class="ungerade">Ea~a</td><td class="gerade">Eb~a</td><td class="ungerade">Ec~a</td></tr>
<tr><td class="ungerade">Ea~b</td><td class="gerade">Eb~b</td><td class="ungerade">Ec~b</td></tr>
<tr><td class="ungerade">Ea~c</td><td class="gerade">Eb~c</td><td class="ungerade">Ec~c</td></tr>
</table>

Weiteres zum Thema finden Sie in Tabellen in HTML. Die Beschreibung des HTML-Tag td lesen Sie in der HTML Referenz unter <td>.