Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #dcdcdc und Farbwert #ff4500

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 #dcdcdc			Schriftfarbwert #ff4500
Detail	:	Hintergrund #dcdcdc	Detail	:	Schrift #ff4500
Farbwert	:	#dcdcdc	Farbwert	:	#ff4500
Farbe	:	gainsboro	Farbe	:	orangered
HTML	:	#dcdcdc	HTML	:	#ff4500
HTML (Wert)	:	#dcdcdc	HTML (Wert)	:	#ff4500
CSS	:	#dcdcdc	CSS	:	#ff4500
CSS (Wert)	:	#dcdcdc	CSS (Wert)	:	#ff4500
CSS (kürzest)	:	#dcdcdc	CSS (kürzest)	:	#ff4500
CSS (RGB)	:	rgb(220,220,220)	CSS (RGB)	:	rgb(255,69,0)
CSS (%RGB)	:	rgb(86%,86%,86%)	CSS (%RGB)	:	rgb(100%,27%,0%)

Verlauf Hintergrundfarbwert #dcdcdc nach Schriftfarbwert #ff4500
#dcdcdc	#e1c6bc	#e6b09d	#eb9b7d	#f0855e	#f5703e	#fa5a1f	#ff4500
#dcdcdc	#e1c6bc	#e6b09d	#eb9b7d	#f0855e	#f5703e	#fa5a1f	#ff4500

Kombination von #dcdcdc und #ff4500
Cras vestibulum tristique erat, ac interdum justo cursus in. 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. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				#ff4500 eignet sich nicht als Schriftfarbe auf Hintergrund #dcdcdc. Weder der Helligkeitsunterschied noch der Farbunterschied sind ausreichend. Die Ähnlichkeit von #ff4500 und #dcdcdc beträgt 88.05%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 11.95%.

Hintergrundfarbwert #dcdcdc				Schriftfarbwert #ff4500
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#dcdcdc	#dcdcdc	#dcdcdc	#dcdcdc	#ff4500	#ff4500	#ff4500	#ff4500
#e1e1e1	#e1e1e1	#bcbcbc	#bcbcbc	#ff5f24	#ff5f24	#da3b00	#da3b00
#e6e6e6	#e6e6e6	#9d9d9d	#9d9d9d	#ff7a48	#ff7a48	#b63100	#b63100
#ebebeb	#ebebeb	#7d7d7d	#7d7d7d	#ff946d	#ff946d	#912700	#912700
#f0f0f0	#f0f0f0	#5e5e5e	#5e5e5e	#ffaf91	#ffaf91	#6d1d00	#6d1d00
#f5f5f5	#f5f5f5	#3e3e3e	#3e3e3e	#ffc9b6	#ffc9b6	#481300	#481300
#fafafa	#fafafa	#1f1f1f	#1f1f1f	#ffe4da	#ffe4da	#240900	#240900
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #dcdcdc und Farbwert #ff4500

Zebra-Effekt von HTML-Tag tr

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

<style type="text/css"><!--
  tr.ung { 
    background-color:#dcdcdc;
  }
  tr.ger { 
    background-color: #ff4500;
  }
//-->
</style>

Diese Klassen werden abwechselnd verwendet.

<table>
<tr class="ung"><td>La,a</td><td>Lb,a</td><td>Lc,a</td></tr>
<tr class="ger"><td>La,b</td><td>Lb,b</td><td>Lc,b</td></tr>
<tr class="ung"><td>La,c</td><td>Lb,c</td><td>Lc,c</td></tr>
</table>

Weiteres zu tr können Sie in Tabellen in HTML nachsehen. Weiteres zum Befehl tr lesen Sie in der HTML Referenz unter <tr>.

Wechsel der Hintergrundfarbe bei Hover mit HTML-Tag legend

Die Hintergrundfarbe soll sich von Farbwert #dcdcdc auf Farbwert #ff4500 ändern, wenn man mit der Maus auf <legend> zeigt. Wir bereiten zunächst eine Darstellung von <legend> in Farbwert #dcdcdc vor.

Wir setzen als Beispiel die Hintergrundfarbe von <legend> auf Farbwert #dcdcdc. Die Textfarbe behalten wir bei, setzen jedoch die Schriftart auf verdana.

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

Nun stellen wir ein, dass bei Berührung mit der Maus die Hintergrundfarbe auf #ff4500 gesetzt wird.

<style type="text/css"><!--
  legend: hover { 
    background-color: #ff4500;
  }
//-->
</style>

Weiteres zum Thema können Sie in Formulare in HTML finden. Möglichkeiten des HTML-Befehl legend sind in der HTML Referenz unter <legend> ausführlich beschrieben.