Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #fffff0 und Farbe darkred

Netscape führte seinerzeit die websicheren Farben ein. Neben diesen Farbwerten, die einem bestimmten Schema folgen, definierte man noch 120 Werte und ordnete ihnen Namen zu.

Hintergrundfarbwert #fffff0			Schriftfarbe darkred
Detail	:	Hintergrund #fffff0	Detail	:	Schrift darkred
Farbwert	:	#fffff0	Farbe	:	darkred
Farbe	:	ivory	Farbwert	:	#8b0000
HTML	:	#fffff0	HTML	:	darkred
HTML (Wert)	:	#fffff0	HTML (Wert)	:	#8b0000
CSS	:	#fffff0	CSS	:	darkred
CSS (Wert)	:	#fffff0	CSS (Wert)	:	#8b0000
CSS (kürzest)	:	#fffff0	CSS (kürzest)	:	#8b0000
CSS (RGB)	:	rgb(255,255,240)	CSS (RGB)	:	rgb(139,0,0)
CSS (%RGB)	:	rgb(100%,100%,94%)	CSS (%RGB)	:	rgb(54%,0%,0%)

Verlauf Hintergrundfarbwert #fffff0 nach Schriftfarbe darkred
#fffff0	#eedacd	#ddb6ab	#cd9189	#bc6d66	#ac4844	#9b2422	#8b0000
#fffff0	#eedacd	#ddb6ab	#cd9189	#bc6d66	#ac4844	#9b2422	#8b0000

Kombination von #fffff0 und darkred
Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				Die Ähnlichkeit der Farben darkred und #fffff0 ergibt sich zu 52.75%. Die Lesbarkeit dieser Kombination ergibt sich zu 47.25%. darkred eignet sich als Schriftfarbe auf Hintergrund #fffff0, da sowohl der Helligkeitsunterschied als auch der Unterschied in den Farben gut sind.

Hintergrundfarbwert #fffff0				Schriftfarbe darkred
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#fffff0	#fffff0	#fffff0	#fffff0	#8b0000	#8b0000	#8b0000	#8b0000
#fffff2	#fffff2	#dadacd	#dadacd	#9b2424	#9b2424	#770000	#770000
#fffff4	#fffff4	#b6b6ab	#b6b6ab	#ac4848	#ac4848	#630000	#630000
#fffff6	#fffff6	#919189	#919189	#bc6d6d	#bc6d6d	#4f0000	#4f0000
#fffff8	#fffff8	#6d6d66	#6d6d66	#cd9191	#cd9191	#3b0000	#3b0000
#fffffa	#fffffa	#484844	#484844	#ddb6b6	#ddb6b6	#270000	#270000
#fffffc	#fffffc	#242422	#242422	#eedada	#eedada	#130000	#130000
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #fffff0 und Farbe darkred

Zebra-Effekt mit HTML-Tag th

Man spricht vom Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Dieser Effekt unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ger und .ung für <th> mit den Hintergrundfarben Farbwert #fffff0 und Farbe darkred.

<style type="text/css"><!--
  th.ger { 
    background-color:#fffff0;
  }
  th.ung { 
    background-color:darkred;
  }
//-->
</style>

Diese werden abwechselnd angewendet.

<table>
<tr><td class="ger">YA/A</td><td class="ung">YB/A</td><td class="ger">YC/A</td></tr>
<tr><td class="ger">YA/B</td><td class="ung">YB/B</td><td class="ger">YC/B</td></tr>
<tr><td class="ger">YA/C</td><td class="ung">YB/C</td><td class="ger">YC/C</td></tr>
</table>

Weiteres zum Thema th finden Sie in Tabellen in HTML. Einzelheiten des hier gezeigten HTML-Befehl th sind in der HTML Referenz bei <th> gezeigt.

Wechsel der Textfarbe bei Hover bei Tag h1

Eine Überschrift setzt man mit HTML-Befehl <h1>. Diese kann farblich gestaltet und hervorgehoben werden.

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

Wir setzen hier bei <h1> die Textfarbe auf Farbwert #fffff0. Die Hintergrundfarbe lassen wir unverändert. Die Schriftart setzen wir auf monospace.

<style type="text/css"><!--
  h1 { 
    color: #fffff0; 
    font-family: monospace;
  }
//-->
</style>

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

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

Weiteres zu h1 können Sie in Grundlegende Gestaltungselemente in HTML nachsehen. Einzelheiten vom hier gezeigten Tag h1 sind in der HTML Referenz bei <h1> beschrieben.