Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #d3d3d3 und Farbe tomato

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 #d3d3d3			Schriftfarbe tomato
Detail	:	Hintergrund #d3d3d3	Detail	:	Schrift tomato
Farbwert	:	#d3d3d3	Farbe	:	tomato
Farbe	:	lightgrey	Farbwert	:	#ff6347
HTML	:	#d3d3d3	HTML	:	tomato
HTML (Wert)	:	#d3d3d3	HTML (Wert)	:	#ff6347
CSS	:	#d3d3d3	CSS	:	tomato
CSS (Wert)	:	#d3d3d3	CSS (Wert)	:	#ff6347
CSS (kürzest)	:	#d3d3d3	CSS (kürzest)	:	#ff6347
CSS (RGB)	:	rgb(211,211,211)	CSS (RGB)	:	rgb(255,99,71)
CSS (%RGB)	:	rgb(82%,82%,82%)	CSS (%RGB)	:	rgb(100%,38%,27%)

Verlauf Hintergrundfarbwert #d3d3d3 nach Schriftfarbe tomato
#d3d3d3	#d9c3bf	#dfb3ab	#e5a397	#ec9383	#f2836f	#f8735b	#ff6347
#d3d3d3	#d9c3bf	#dfb3ab	#e5a397	#ec9383	#f2836f	#f8735b	#ff6347

Kombination von #d3d3d3 und tomato
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.				tomato ist nicht als Schriftfarbe auf Hintergrund #d3d3d3 geeignet. Sowohl Helligkeit als auch die Farben sind sich zu ähnlich. Die Ähnlichkeit der Farben tomato und #d3d3d3 beträgt 90.63%. Die Lesbarkeit dieser Farbkombination liegt damit bei 9.37%.

Hintergrundfarbwert #d3d3d3				Schriftfarbe tomato
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#d3d3d3	#d3d3d3	#d3d3d3	#d3d3d3	#ff6347	#ff6347	#ff6347	#ff6347
#d9d9d9	#d9d9d9	#b4b4b4	#b4b4b4	#ff7961	#ff7961	#da543c	#da543c
#dfdfdf	#dfdfdf	#969696	#969696	#ff8f7b	#ff8f7b	#b64632	#b64632
#e5e5e5	#e5e5e5	#787878	#787878	#ffa595	#ffa595	#913828	#913828
#ececec	#ececec	#5a5a5a	#5a5a5a	#ffbcb0	#ffbcb0	#6d2a1e	#6d2a1e
#f2f2f2	#f2f2f2	#3c3c3c	#3c3c3c	#ffd2ca	#ffd2ca	#481c14	#481c14
#f8f8f8	#f8f8f8	#1e1e1e	#1e1e1e	#ffe8e4	#ffe8e4	#240e0a	#240e0a
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #d3d3d3 und Farbe tomato

Zebra-Effekt von HTML-Befehl td

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

<style type="text/css"><!--
  td.ung { 
    background-color: #d3d3d3;
  }
  td.ger { 
    background-color: tomato;
  }
//-->
</style>

Diese Klassen werden abwechselnd verwendet.

<table>
<tr><td class="ung">Ba~a</td><td class="ger">Bb~a</td><td class="ung">Bc~a</td></tr>
<tr><td class="ung">Ba~b</td><td class="ger">Bb~b</td><td class="ung">Bc~b</td></tr>
<tr><td class="ung">Ba~c</td><td class="ger">Bb~c</td><td class="ung">Bc~c</td></tr>
</table>

Weiteres zu td erfahren Sie in Tabellen in HTML. Der hier genutzte HTML-Befehl td ist in der HTML Referenz bei <td> genau beschrieben.

Wechsel der Unterstreichung bei Hover mit HTML-Tag a

Einen Hyperlink erzeugen Sie mit Befehl <a>. Diesen können Sie hervorheben und farblich gestalten.

Die Unterstreichungsfarbe soll sich von Farbwert #d3d3d3 auf Farbe tomato ändern, wenn man mit der Maus auf <a> zeigt. Wir bereiten zunächst die Formatierung von <a> in Farbwert #d3d3d3 vor.

Beispielsweise unterstreichen wir <a> mit einem doppelten Rahmen mit 4 Pixel Dicke in Farbwert #d3d3d3.

<style type="text/css"><!--
  a { border-bottom:4px double #d3d3d3; }
//-->
</style>

Nun fordern wir, dass bei Hover die Farbe der Unterstreichung auf tomato geändert wird.

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

Die Idee ist hierbei, voneinander unabhängige Formatierungen für Inhalt und Unterstreichung zu haben. Manchmal sieht man diesen Effekt bei Verweisen. Der Text ist in einer Farbe. Die Unterstreichung in einer anderen. Hierbei handelt es sich jedoch nicht um eine "normale" Unterstreichung, der Text ist gar nicht unterstrichen. Die Unterstreichung wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Weiteres zum Thema erfahren Sie in Verweise und Protokolle in HTML. Weiteres zum hier verwendeten HTML-Tag a ist in der HTML Referenz unter <a> ausführlich gezeigt.