Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #d3d3d3 und Farbwert #b22222

Netscape führte seinerzeit die websicheren Farben ein. Neben diesen, einem bestimmten Schema folgenden, Farbwerten, definierte man noch 120 Werte und ordnete ihnen Namen zu. Zusammen mit den 17 Standard-HTML-Farben, die ebenfalls Namen haben, ergeben sich so 137 HTML Farbnamen.

Hintergrundfarbwert #d3d3d3			Schriftfarbwert #b22222
Detail	:	Hintergrund #d3d3d3	Detail	:	Schrift #b22222
Farbwert	:	#d3d3d3	Farbwert	:	#b22222
Farbe	:	lightgrey	Farbe	:	firebrick
HTML	:	#d3d3d3	HTML	:	#b22222
HTML (Wert)	:	#d3d3d3	HTML (Wert)	:	#b22222
CSS	:	#d3d3d3	CSS	:	#b22222
CSS (Wert)	:	#d3d3d3	CSS (Wert)	:	#b22222
CSS (kürzest)	:	#d3d3d3	CSS (kürzest)	:	#b22222
CSS (RGB)	:	rgb(211,211,211)	CSS (RGB)	:	rgb(178,34,34)
CSS (%RGB)	:	rgb(82%,82%,82%)	CSS (%RGB)	:	rgb(69%,13%,13%)

Verlauf Hintergrundfarbwert #d3d3d3 nach Schriftfarbwert #b22222
#d3d3d3	#ceb9b9	#c9a0a0	#c48787	#c06d6d	#bb5454	#b63b3b	#b22222
#d3d3d3	#ceb9b9	#c9a0a0	#c48787	#c06d6d	#bb5454	#b63b3b	#b22222

Kombination von #d3d3d3 und #b22222
Cras vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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.				Die Ähnlichkeit der Farben #b22222 und #d3d3d3 beträgt 78.76%. Die Lesbarkeit dieser Kombination liegt damit bei 21.24%. #b22222 ist nicht als Schriftfarbe auf Hintergrund #d3d3d3 geeignet, weil der Farbunterschied nicht ausreichend ist

Hintergrundfarbwert #d3d3d3				Schriftfarbwert #b22222
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#d3d3d3	#d3d3d3	#d3d3d3	#d3d3d3	#b22222	#b22222	#b22222	#b22222
#d9d9d9	#d9d9d9	#b4b4b4	#b4b4b4	#bd4141	#bd4141	#981d1d	#981d1d
#dfdfdf	#dfdfdf	#969696	#969696	#c86161	#c86161	#7f1818	#7f1818
#e5e5e5	#e5e5e5	#787878	#787878	#d38080	#d38080	#651313	#651313
#ececec	#ececec	#5a5a5a	#5a5a5a	#dea0a0	#dea0a0	#4c0e0e	#4c0e0e
#f2f2f2	#f2f2f2	#3c3c3c	#3c3c3c	#e9bfbf	#e9bfbf	#320909	#320909
#f8f8f8	#f8f8f8	#1e1e1e	#1e1e1e	#f4dfdf	#f4dfdf	#190404	#190404
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #d3d3d3 und Farbwert #b22222

Wechsel der Umrandung bei Hover von Befehl a

Einen Verweis setzen Sie mit HTML-Befehl <a>. Diesen können Sie hervorheben und farblich gestalten.

Die Rahmenfarbe soll sich von Farbwert #d3d3d3 auf Farbwert #b22222 ändern, wenn man mit der Maus auf <a> zeigt. Bereiten wir zunächst die Formatierung von <a> in Farbwert #d3d3d3 vor.

In diesem Beispiel umranden wir <a> mit einem 2 Pixel dicken, gepunkteten Rahmen in Farbwert #d3d3d3.

<style type="text/css"><!--
  a { 
    border-color:#d3d3d3; 
    border-width:2px; 
    border-style:dotted;
  }
//-->
</style>

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

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

Mehr zu a lesen Sie in Verweise und Protokolle in HTML. Möglichkeiten des Befehl a sind in der HTML Referenz unter <a> ausführlich zusammengestellt.

Zebra-Effekt mit Tag td

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, spricht man vom so genannten Zebra-Effekt. Dieser Effekt unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .even und .odd für <td> mit unterschiedlichen Hintergrundfarben Farbwert #d3d3d3 und Farbwert #b22222.

<style type="text/css"><!--
  td.even { 
    background-color: #d3d3d3;
  }
  td.odd { 
    background-color: #b22222;
  }
//-->
</style>

Diese werden dann abwechselnd genutzt.

<table>
<tr><td class="even">Ta.a</td><td class="odd">Tb.a</td><td class="even">Tc.a</td></tr>
<tr><td class="even">Ta.b</td><td class="odd">Tb.b</td><td class="even">Tc.b</td></tr>
<tr><td class="even">Ta.c</td><td class="odd">Tb.c</td><td class="even">Tc.c</td></tr>
</table>

Weiteres zum Thema td erfahren Sie in Tabellen in HTML. Weiteres zum hier verwendeten Befehl <td>.