Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #dc143c und Farbwert #8a2be2

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			Schriftfarbwert #8a2be2
Detail	:	Hintergrund #dc143c	Detail	:	Schrift #8a2be2
Farbwert	:	#dc143c	Farbwert	:	#8a2be2
Farbe	:	crimson	Farbe	:	blueviolet
HTML	:	#dc143c	HTML	:	#8a2be2
HTML (Wert)	:	#dc143c	HTML (Wert)	:	#8a2be2
CSS	:	#dc143c	CSS	:	#8a2be2
CSS (Wert)	:	#dc143c	CSS (Wert)	:	#8a2be2
CSS (kürzest)	:	#dc143c	CSS (kürzest)	:	#8a2be2
CSS (RGB)	:	rgb(220,20,60)	CSS (RGB)	:	rgb(138,43,226)
CSS (%RGB)	:	rgb(86%,7%,23%)	CSS (%RGB)	:	rgb(54%,16%,88%)

Verlauf Hintergrundfarbwert #dc143c nach Schriftfarbwert #8a2be2
#dc143c	#d01753	#c41a6b	#b81d83	#ad219a	#a124b2	#9527ca	#8a2be2
#dc143c	#d01753	#c41a6b	#b81d83	#ad219a	#a124b2	#9527ca	#8a2be2

Kombination von #dc143c und #8a2be2
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.				#8a2be2 eignet sich nicht als Schriftfarbe auf Hintergrund #dc143c. Sowohl Helligkeit als auch die Farben sind zu ähnlich. Die Ähnlichkeit der Farben #8a2be2 und #dc143c ergibt sich zu 94.31%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 5.69%.

Hintergrundfarbwert #dc143c				Schriftfarbwert #8a2be2
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#dc143c	#dc143c	#dc143c	#dc143c	#8a2be2	#8a2be2	#8a2be2	#8a2be2
#e13557	#e13557	#bc1133	#bc1133	#9a49e6	#9a49e6	#7624c1	#7624c1
#e65773	#e65773	#9d0e2a	#9d0e2a	#ab67ea	#ab67ea	#621ea1	#621ea1
#eb788f	#eb788f	#7d0b22	#7d0b22	#bc85ee	#bc85ee	#4e1881	#4e1881
#f09aab	#f09aab	#5e0819	#5e0819	#cca4f2	#cca4f2	#3b1260	#3b1260
#f5bbc7	#f5bbc7	#3e0511	#3e0511	#ddc2f6	#ddc2f6	#270c40	#270c40
#fadde3	#fadde3	#1f0208	#1f0208	#eee0fa	#eee0fa	#130620	#130620
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #dc143c und Farbwert #8a2be2

Zebra-Effekt mit HTML-Befehl tr

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, spricht man von einem Zebra-Effekt. Der Effekt unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ger und .ung für <tr> mit den Hintergrundfarben Farbwert #dc143c und Farbwert #8a2be2.

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

Diese Klassen werden abwechselnd angewendet.

<table>
<tr class="ger"><td>Da~a</td><td>Db~a</td><td>Dc~a</td></tr>
<tr class="ung"><td>Da~b</td><td>Db~b</td><td>Dc~b</td></tr>
<tr class="ger"><td>Da~c</td><td>Db~c</td><td>Dc~c</td></tr>
</table>

Mehr zu tr lesen Sie in Tabellen in HTML. Die Beschreibung des HTML-Befehl tr erfahren Sie in der HTML Referenz unter <tr>.

Wechsel der Umrandung bei Hover bei Tag input

Die Rahmenfarbe soll sich von Farbwert #dc143c auf Farbwert #8a2be2 ändern, wenn man mit der Maus auf <input> zeigt. Bereiten wir zunächst die Darstellung von <input> in Farbwert #dc143c vor.

In diesem Beispiel umranden wir <input> mit einem 1 Pixel dicken, einfallenden Rahmen in Farbwert #dc143c.

<style type="text/css"><!--
  input { 
    border-width: 1px; 
    border-color: #dc143c; 
    border-style: inset;
  }
//-->
</style>

Nun fordern wir, dass bei Mausberührung die Rahmenfarbe auf #8a2be2 geändert wird.

<style type="text/css"><!--
  input: hover { 
    border-color: #8a2be2;
  }
//-->
</style>

Weiteres zum Thema lesen Sie in Formulare in HTML. Weiteres zum hier gezeigten Tag input ist in der HTML Referenz bei <input> beschrieben.