Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #dc143c und Farbe pink

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 #dc143c			Schriftfarbe pink
Detail	:	Hintergrund #dc143c	Detail	:	Schrift pink
Farbwert	:	#dc143c	Farbe	:	pink
Farbe	:	crimson	Farbwert	:	#ffc0cb
HTML	:	#dc143c	HTML	:	pink
HTML (Wert)	:	#dc143c	HTML (Wert)	:	#ffc0cb
CSS	:	#dc143c	CSS	:	pink
CSS (Wert)	:	#dc143c	CSS (Wert)	:	#ffc0cb
CSS (kürzest)	:	#dc143c	CSS (kürzest)	:	#ffc0cb
CSS (RGB)	:	rgb(220,20,60)	CSS (RGB)	:	rgb(255,192,203)
CSS (%RGB)	:	rgb(86%,7%,23%)	CSS (%RGB)	:	rgb(100%,75%,79%)

Verlauf Hintergrundfarbwert #dc143c nach Schriftfarbe pink
#dc143c	#e12c50	#e64564	#eb5d79	#f0768d	#f58ea2	#faa7b6	#ffc0cb
#dc143c	#e12c50	#e64564	#eb5d79	#f0768d	#f58ea2	#faa7b6	#ffc0cb

Kombination von #dc143c und pink
Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. 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.				Auf Hintergrund #dc143c ist pink ungeeignet. Zwar ist der Helligkeitsunterschied gross genug, doch die Farben selbst sind zu ähnlich. Die Ähnlichkeit der Farben pink und #dc143c beträgt 84.55%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 15.45%.

Hintergrundfarbwert #dc143c				Schriftfarbe pink
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#dc143c	#dc143c	#dc143c	#dc143c	#ffc0cb	#ffc0cb	#ffc0cb	#ffc0cb
#e13557	#e13557	#bc1133	#bc1133	#ffc9d2	#ffc9d2	#daa4ae	#daa4ae
#e65773	#e65773	#9d0e2a	#9d0e2a	#ffd2d9	#ffd2d9	#b68991	#b68991
#eb788f	#eb788f	#7d0b22	#7d0b22	#ffdbe1	#ffdbe1	#916d74	#916d74
#f09aab	#f09aab	#5e0819	#5e0819	#ffe4e8	#ffe4e8	#6d5257	#6d5257
#f5bbc7	#f5bbc7	#3e0511	#3e0511	#ffedf0	#ffedf0	#48363a	#48363a
#fadde3	#fadde3	#1f0208	#1f0208	#fff6f7	#fff6f7	#241b1d	#241b1d
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #dc143c und Farbe pink

Wechsel der Hintergrundfarbe bei Hover mit HTML-Tag pre

Die Hintergrundfarbe soll sich von Farbwert #dc143c auf Farbe pink ändern, wenn man mit der Maus auf <pre> zeigt. Bereiten wir zunächst die Darstellung von <pre> in Farbwert #dc143c vor.

Wir legen als Beispiel bei <pre> die Hintergrundfarbe auf Farbwert #dc143c fest. Zwar verändern wir die Textfarbe nicht, ändern jedoch die Schriftart auf monospace. Die Schriftgröße setzen wir auf 9px:

<style type="text/css"><!--
  pre { 
    background-color:#dc143c; 
    font-family:monospace; 
    font-size:9px;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Hover die Hintergrundfarbe zu pink ändert.

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

Mehr zu pre können Sie in Blockorientierte Elemente in HTML nachlesen. Beschreibung vom hier genutzten Befehl <pre>.

Zebra-Effekt bei HTML-Befehl td

Man redet vom so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Der Effekt unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ger und .ung für <td> mit unterschiedlichen Hintergrundfarben Farbwert #dc143c und Farbe pink.

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

Diese CSS-Klassen werden abwechselnd verwendet.

<table>
<tr><td class="ger">Ea:a</td><td class="ung">Eb:a</td><td class="ger">Ec:a</td></tr>
<tr><td class="ger">Ea:b</td><td class="ung">Eb:b</td><td class="ger">Ec:b</td></tr>
<tr><td class="ger">Ea:c</td><td class="ung">Eb:c</td><td class="ger">Ec:c</td></tr>
</table>

Mehr zu td erfahren Sie in Tabellen in HTML. Die Beschreibung vom hier genutzten HTML-Befehl td erfahren Sie in der HTML Referenz unter <td>.