Ressourcen: 120 HTML Farbnamen - Kombination von Farbe crimson und Farbe gainsboro

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.

Hintergrundfarbe crimson			Schriftfarbe gainsboro
Detail	:	Hintergrund crimson	Detail	:	Schrift gainsboro
Farbe	:	crimson	Farbe	:	gainsboro
Farbwert	:	#dc143c	Farbwert	:	#dcdcdc
HTML	:	crimson	HTML	:	gainsboro
HTML (Wert)	:	#dc143c	HTML (Wert)	:	#dcdcdc
CSS	:	crimson	CSS	:	gainsboro
CSS (Wert)	:	#dc143c	CSS (Wert)	:	#dcdcdc
CSS (kürzest)	:	#dc143c	CSS (kürzest)	:	#dcdcdc
CSS (RGB)	:	rgb(220,20,60)	CSS (RGB)	:	rgb(220,220,220)
CSS (%RGB)	:	rgb(86%,7%,23%)	CSS (%RGB)	:	rgb(86%,86%,86%)

Verlauf Hintergrundfarbe crimson nach Schriftfarbe gainsboro
#dc143c	#dc3052	#dc4d69	#dc6980	#dc8697	#dca2ae	#dcbfc5	#dcdcdc
#dc143c	#dc3052	#dc4d69	#dc6980	#dc8697	#dca2ae	#dcbfc5	#dcdcdc

Kombination von crimson und gainsboro
Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante.				Die Ähnlichkeit der Farben gainsboro und crimson ergibt sich zu 82.67%. Die Lesbarkeit dieser Kombination ergibt sich zu 17.33%. Auf Hintergrund crimson ist gainsboro ungeeignet, da der Farbunterschied zu gering ist

Hintergrundfarbe crimson				Schriftfarbe gainsboro
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#dc143c	#dc143c	#dc143c	#dc143c	#dcdcdc	#dcdcdc	#dcdcdc	#dcdcdc
#e13557	#e13557	#bc1133	#bc1133	#e1e1e1	#e1e1e1	#bcbcbc	#bcbcbc
#e65773	#e65773	#9d0e2a	#9d0e2a	#e6e6e6	#e6e6e6	#9d9d9d	#9d9d9d
#eb788f	#eb788f	#7d0b22	#7d0b22	#ebebeb	#ebebeb	#7d7d7d	#7d7d7d
#f09aab	#f09aab	#5e0819	#5e0819	#f0f0f0	#f0f0f0	#5e5e5e	#5e5e5e
#f5bbc7	#f5bbc7	#3e0511	#3e0511	#f5f5f5	#f5f5f5	#3e3e3e	#3e3e3e
#fadde3	#fadde3	#1f0208	#1f0208	#fafafa	#fafafa	#1f1f1f	#1f1f1f
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe crimson und Farbe gainsboro

Zebra-Effekt mit Tag th

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, spricht man vom so genannten Zebra-Effekt. Dieser Effekt unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ying und .yang für <th> mit den Hintergrundfarben Farbe crimson und Farbe gainsboro.

<style type="text/css"><!--
  th.ying { 
    background-color:crimson;
  }
  th.yang { 
    background-color:gainsboro;
  }
//-->
</style>

Diese CSS-Klassen werden abwechselnd genutzt.

<table>
<tr><td class="ying">VA~A</td><td class="yang">VB~A</td><td class="ying">VC~A</td></tr>
<tr><td class="ying">VA~B</td><td class="yang">VB~B</td><td class="ying">VC~B</td></tr>
<tr><td class="ying">VA~C</td><td class="yang">VB~C</td><td class="ying">VC~C</td></tr>
</table>

Mehr zum Thema können Sie in Tabellen in HTML lesen. Möglichkeiten vom hier genutzten HTML-Befehl th finden Sie in der HTML Referenz unter <th>.

Wechsel der Hintergrundfarbe bei Hover mit HTML-Tag tr

Die Hintergrundfarbe soll sich von Farbe crimson auf Farbe gainsboro ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <tr> in Farbe crimson vor.

Wir ändern zum Beispiel die Hintergrundfarbe von <tr> auf Farbe crimson. Die Textfarbe lassen wir unverändert, ändern jedoch die Schriftart auf sans-serif und setzen die Schriftgröße auf 91%.

<style type="text/css"><!--
  tr { 
    font-size: 91%; 
    background-color: crimson; 
    font-family: sans-serif;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Mausberührung die Hintergrundfarbe zu gainsboro ändert.

<style type="text/css"><!--
  tr: hover { 
    background-color: gainsboro;
  }
//-->
</style>

Weiteres zum Thema tr können Sie in Tabellen in HTML nachlesen. Die Beschreibung des hier verwendeten Befehl tr erfahren Sie in der HTML Referenz unter <tr>.