Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #483d8b und Farbwert #98fb98

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 #483d8b			Schriftfarbwert #98fb98
Detail	:	Hintergrund #483d8b	Detail	:	Schrift #98fb98
Farbwert	:	#483d8b	Farbwert	:	#98fb98
Farbe	:	darkslateblue	Farbe	:	palegreen
HTML	:	#483d8b	HTML	:	#98fb98
HTML (Wert)	:	#483d8b	HTML (Wert)	:	#98fb98
CSS	:	#483d8b	CSS	:	#98fb98
CSS (Wert)	:	#483d8b	CSS (Wert)	:	#98fb98
CSS (kürzest)	:	#483d8b	CSS (kürzest)	:	#98fb98
CSS (RGB)	:	rgb(72,61,139)	CSS (RGB)	:	rgb(152,251,152)
CSS (%RGB)	:	rgb(28%,23%,54%)	CSS (%RGB)	:	rgb(59%,98%,59%)

Verlauf Hintergrundfarbwert #483d8b nach Schriftfarbwert #98fb98
#483d8b	#53588c	#5e738e	#6a8e90	#75a992	#81c494	#8cdf96	#98fb98
#483d8b	#53588c	#5e738e	#6a8e90	#75a992	#81c494	#8cdf96	#98fb98

Kombination von #483d8b und #98fb98
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Cras id velit ante.				#98fb98 ist nicht als Schriftfarbe auf Hintergrund #483d8b geeignet. Zwar ist der Helligkeitsunterschied gut, die Farben selbst sind zu ähnlich. Die Ähnlichkeit von #98fb98 und #483d8b beträgt 65.89%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 34.11%.

Hintergrundfarbwert #483d8b				Schriftfarbwert #98fb98
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#483d8b	#483d8b	#483d8b	#483d8b	#98fb98	#98fb98	#98fb98	#98fb98
#62589b	#62589b	#3d3477	#3d3477	#a6fba6	#a6fba6	#82d782	#82d782
#7c74ac	#7c74ac	#332b63	#332b63	#b5fcb5	#b5fcb5	#6cb36c	#6cb36c
#9690bc	#9690bc	#29224f	#29224f	#c4fcc4	#c4fcc4	#568f56	#568f56
#b0abcd	#b0abcd	#1e1a3b	#1e1a3b	#d2fdd2	#d2fdd2	#416b41	#416b41
#cac7dd	#cac7dd	#141127	#141127	#e1fde1	#e1fde1	#2b472b	#2b472b
#e4e3ee	#e4e3ee	#0a0813	#0a0813	#f0fef0	#f0fef0	#152315	#152315
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #483d8b und Farbwert #98fb98

Wechsel der Umrandung bei Hover mit HTML-Befehl textarea

Die Rahmenfarbe soll sich von Farbwert #483d8b auf Farbwert #98fb98 ändern, wenn man mit der Maus auf <textarea> zeigt. Bereiten wir zunächst die Darstellung von <textarea> in Farbwert #483d8b vor.

In diesem Beispiel umranden wir <textarea> mit einem 5 Pixel dicken, gefurchten Rahmen in Farbwert #483d8b.

<style type="text/css"><!--
  textarea { border:5px groove #483d8b; }
//-->
</style>

Nun fordern wir, dass sich bei Hover die Rahmenfarbe auf #98fb98 ändert.

<style type="text/css"><!--
  textarea: hover { 
    border-color: #98fb98;
  }
//-->
</style>

Mehr zu textarea können Sie in Formulare in HTML finden. Möglichkeiten vom Befehl textarea finden Sie in der HTML Referenz unter <textarea>.

Zebra-Effekt mit Befehl th

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, redet man vom so genannten Zebra-Effekt. Dieser Effekt unterstützt das Auge zum Beispiel die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .odd und .even für <th> mit den Hintergrundfarben Farbwert #483d8b und Farbwert #98fb98.

<style type="text/css"><!--
  th.odd { 
    background-color: #483d8b;
  }
  th.even { 
    background-color:#98fb98;
  }
//-->
</style>

Diese CSS-Klassen werden dann abwechselnd angewendet.

<table>
<tr><td class="odd">PA~A</td><td class="even">PB~A</td><td class="odd">PC~A</td></tr>
<tr><td class="odd">PA~B</td><td class="even">PB~B</td><td class="odd">PC~B</td></tr>
<tr><td class="odd">PA~C</td><td class="even">PB~C</td><td class="odd">PC~C</td></tr>
</table>

Mehr zum Thema können Sie in Tabellen in HTML erfahren. Einzelheiten des Tag th sind in der HTML Referenz unter <th> ausführlich beschrieben.