Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #0000ff und Farbwert #fa8072

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 #0000ff			Schriftfarbwert #fa8072
Detail	:	Hintergrund #0000ff	Detail	:	Schrift #fa8072
Farbwert	:	#0000ff	Farbwert	:	#fa8072
Farbe	:	blue	Farbe	:	salmon
HTML	:	#0000ff	HTML	:	#fa8072
HTML (Wert)	:	#0000ff	HTML (Wert)	:	#fa8072
CSS	:	#0000ff	CSS	:	#fa8072
CSS (Wert)	:	#0000ff	CSS (Wert)	:	#fa8072
CSS (kürzest)	:	#00f	CSS (kürzest)	:	#fa8072
CSS (RGB)	:	rgb(0,0,255)	CSS (RGB)	:	rgb(250,128,114)
CSS (%RGB)	:	rgb(0%,0%,100%)	CSS (%RGB)	:	rgb(98%,50%,44%)

Verlauf Hintergrundfarbwert #0000ff nach Schriftfarbwert #fa8072
#0000ff	#2312ea	#4724d6	#6b36c2	#8e49ae	#b25b9a	#d66d86	#fa8072
#0000ff	#2312ea	#4724d6	#6b36c2	#8e49ae	#b25b9a	#d66d86	#fa8072

Kombination von #0000ff und #fa8072
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.				#fa8072 eignet sich als Schriftfarbe auf Hintergrund #0000ff, da die Unterschiede in Helligkeit und Farbe geeignet sind. Die Ähnlichkeit von #fa8072 und #0000ff beträgt 83.64%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 16.36%.

Hintergrundfarbwert #0000ff				Schriftfarbwert #fa8072
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#0000ff	#0000ff	#0000ff	#0000ff	#fa8072	#fa8072	#fa8072	#fa8072
#2424ff	#2424ff	#0000da	#0000da	#fa9286	#fa9286	#d66d61	#d66d61
#4848ff	#4848ff	#0000b6	#0000b6	#fba49a	#fba49a	#b25b51	#b25b51
#6d6dff	#6d6dff	#000091	#000091	#fcb6ae	#fcb6ae	#8e4941	#8e4941
#9191ff	#9191ff	#00006d	#00006d	#fcc8c2	#fcc8c2	#6b3630	#6b3630
#b6b6ff	#b6b6ff	#000048	#000048	#fddad6	#fddad6	#472420	#472420
#dadaff	#dadaff	#000024	#000024	#feecea	#feecea	#231210	#231210
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #0000ff und Farbwert #fa8072

Wechsel der Hintergrundfarbe bei Hover mit Befehl thead

Die Hintergrundfarbe soll sich von Farbwert #0000ff auf Farbwert #fa8072 ändern, wenn man mit der Maus auf <thead> zeigt. Bereiten wir zunächst die Darstellung von <thead> in Farbwert #0000ff vor.

In diesem Beispiel legen wir bei <thead> die Hintergrundfarbe auf Farbwert #0000ff fest. Die Textfarbe behalten wir bei, ändern jedoch die Schriftart auf arial. Die Größe der Schrift verringern wir auf 85S%:

<style type="text/css"><!--
  thead { 
    background-color: #00f; 
    font-family: arial; 
    font-size: 85S%;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Berührung mit der Maus die Hintergrundfarbe zu #fa8072 ändert.

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

Mehr zum Thema thead finden Sie in Tabellen in HTML. Der HTML-Befehl thead ist in der HTML Referenz unter <thead> ausführlich gezeigt.

Zebra-Effekt von Tag td

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, spricht man von einem Zebra-Effekt. Der Effekt unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .yang und .ying für <td> mit unterschiedlichen Hintergrundfarben Farbwert #0000ff und Farbwert #fa8072.

<style type="text/css"><!--
  td.yang { 
    background-color:#00f;
  }
  td.ying { 
    background-color:#fa8072;
  }
//-->
</style>

Diese Klassen werden abwechselnd genutzt.

<table>
<tr><td class="yang">M1.1</td><td class="ying">M2.1</td><td class="yang">M3.1</td></tr>
<tr><td class="yang">M1.2</td><td class="ying">M2.2</td><td class="yang">M3.2</td></tr>
<tr><td class="yang">M1.3</td><td class="ying">M2.3</td><td class="yang">M3.3</td></tr>
</table>

Weiteres zum Thema erfahren Sie in Tabellen in HTML. Möglichkeiten vom hier verwendeten HTML-Tag td sind in der HTML Referenz bei <td> ausführlich beschrieben.