Ressourcen: 256 Graustufen in HTML - Kombination von Farbwert #fefefe und Farbe gray221

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 #fefefe			Schriftfarbe gray221
Detail	:	Hintergrund #fefefe	Detail	:	Schrift gray221
Farbwert	:	#fefefe	Farbe	:	gray221
Farbe	:	gray254	Farbwert	:	#dddddd
HTML	:	#fefefe	HTML	:	gray221
HTML (Wert)	:	#fefefe	HTML (Wert)	:	#dddddd
CSS	:	#fefefe	CSS	:	gray221
CSS (Wert)	:	#fefefe	CSS (Wert)	:	#dddddd
CSS (kürzest)	:	#fefefe	CSS (kürzest)	:	#ddd
CSS (RGB)	:	rgb(254,254,254)	CSS (RGB)	:	rgb(221,221,221)
CSS (%RGB)	:	rgb(99%,99%,99%)	CSS (%RGB)	:	rgb(86%,86%,86%)

Verlauf Hintergrundfarbwert #fefefe nach Schriftfarbe gray221
#fefefe	#f9f9f9	#f4f4f4	#efefef	#ebebeb	#e6e6e6	#e1e1e1	#dddddd
#fefefe	#f9f9f9	#f4f4f4	#efefef	#ebebeb	#e6e6e6	#e1e1e1	#dddddd

Kombination von #fefefe und gray221
Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				gray221 eignet sich nicht als Schriftfarbe auf Hintergrund #fefefe, weil weder der Helligkeitsunterschied noch der Farbunterschied gross genug sind. Die Ähnlichkeit von gray221 und #fefefe ergibt sich zu 93.59%. Die Lesbarkeit dieser Kombination liegt damit bei 6.41%.

Hintergrundfarbwert #fefefe				Schriftfarbe gray221
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#fefefe	#fefefe	#fefefe	#fefefe	#dddddd	#dddddd	#dddddd	#dddddd
#fefefe	#fefefe	#d9d9d9	#d9d9d9	#e1e1e1	#e1e1e1	#bdbdbd	#bdbdbd
#fefefe	#fefefe	#b5b5b5	#b5b5b5	#e6e6e6	#e6e6e6	#9d9d9d	#9d9d9d
#fefefe	#fefefe	#919191	#919191	#ebebeb	#ebebeb	#7e7e7e	#7e7e7e
#fefefe	#fefefe	#6c6c6c	#6c6c6c	#f0f0f0	#f0f0f0	#5e5e5e	#5e5e5e
#fefefe	#fefefe	#484848	#484848	#f5f5f5	#f5f5f5	#3f3f3f	#3f3f3f
#fefefe	#fefefe	#242424	#242424	#fafafa	#fafafa	#1f1f1f	#1f1f1f
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #fefefe und Farbe gray221

Zebra-Effekt bei HTML-Befehl td

Man redet von einem Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Er unterstützt das Auge, etwa die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ungerade und .gerade für <td> mit unterschiedlichen Hintergrundfarben Farbwert #fefefe und Farbe gray221.

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

Diese werden abwechselnd verwendet.

<table>
<tr><td class="ungerade">C1,1</td><td class="gerade">C2,1</td><td class="ungerade">C3,1</td></tr>
<tr><td class="ungerade">C1,2</td><td class="gerade">C2,2</td><td class="ungerade">C3,2</td></tr>
<tr><td class="ungerade">C1,3</td><td class="gerade">C2,3</td><td class="ungerade">C3,3</td></tr>
</table>

Weiteres zum Thema td lesen Sie in Tabellen in HTML. Der hier gezeigte HTML-Befehl td ist in der HTML Referenz bei <td> ausführlich gezeigt.

Wechsel der Textfarbe bei Hover von Tag a

Einen Hyperlink erzeugt man mit HTML-Befehl <a>. Dieser kann hervorgehoben und farblich gestaltet werden.

Die Textfarbe soll sich von Farbwert #fefefe auf Farbe gray221 ändern, wenn man mit der Maus auf <a> zeigt. Bereiten wir zunächst eine Formatierung von <a> in Farbwert #fefefe vor.

In diesem Beispiel legen wir die Textfarbe von <a> auf Farbwert #fefefe fest. Zwar lassen wir die Hintergrundfarbe unverändert, setzen jedoch die Schriftart auf verdana und verkleinern die Schriftgröße auf 88%:

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

Jetzt fordern wir, dass bei Hover die Textfarbe auf gray221 geändert wird.

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

Mehr zu a finden Sie in Verweise und Protokolle in HTML. Einzelheiten vom Befehl a sind in der HTML Referenz bei <a> ausführlich gezeigt.