Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #98fb98 und Farbe royalblue

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 #98fb98			Schriftfarbe royalblue
Detail	:	Hintergrund #98fb98	Detail	:	Schrift royalblue
Farbwert	:	#98fb98	Farbe	:	royalblue
Farbe	:	palegreen	Farbwert	:	#4169e1
HTML	:	#98fb98	HTML	:	royalblue
HTML (Wert)	:	#98fb98	HTML (Wert)	:	#4169e1
CSS	:	#98fb98	CSS	:	royalblue
CSS (Wert)	:	#98fb98	CSS (Wert)	:	#4169e1
CSS (kürzest)	:	#98fb98	CSS (kürzest)	:	#4169e1
CSS (RGB)	:	rgb(152,251,152)	CSS (RGB)	:	rgb(65,105,225)
CSS (%RGB)	:	rgb(59%,98%,59%)	CSS (%RGB)	:	rgb(25%,41%,88%)

Verlauf Hintergrundfarbwert #98fb98 nach Schriftfarbe royalblue
#98fb98	#8be6a2	#7fd1ac	#72bcb7	#66a7c1	#5992cc	#4d7dd6	#4169e1
#98fb98	#8be6a2	#7fd1ac	#72bcb7	#66a7c1	#5992cc	#4d7dd6	#4169e1

Kombination von #98fb98 und royalblue
Cras vestibulum tristique erat, ac interdum justo cursus in. 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 id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Die Ähnlichkeit der Farben royalblue und #98fb98 beträgt 81.77%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 18.23%. Auf Hintergrund #98fb98 ist royalblue ungeeignet, da sowohl Helligkeit als auch die Farben zu ähnlich sind.

Hintergrundfarbwert #98fb98				Schriftfarbe royalblue
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#98fb98	#98fb98	#98fb98	#98fb98	#4169e1	#4169e1	#4169e1	#4169e1
#a6fba6	#a6fba6	#82d782	#82d782	#5c7ee5	#5c7ee5	#375ac0	#375ac0
#b5fcb5	#b5fcb5	#6cb36c	#6cb36c	#7793e9	#7793e9	#2e4ba0	#2e4ba0
#c4fcc4	#c4fcc4	#568f56	#568f56	#92a9ed	#92a9ed	#253c80	#253c80
#d2fdd2	#d2fdd2	#416b41	#416b41	#adbef2	#adbef2	#1b2d60	#1b2d60
#e1fde1	#e1fde1	#2b472b	#2b472b	#c8d4f6	#c8d4f6	#121e40	#121e40
#f0fef0	#f0fef0	#152315	#152315	#e3e9fa	#e3e9fa	#090f20	#090f20
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #98fb98 und Farbe royalblue

Zebra-Effekt mit HTML-Befehl td

Man spricht vom so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Er unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .odd und .even für <td> mit unterschiedlichen Hintergrundfarben Farbwert #98fb98 und Farbe royalblue.

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

Diese werden dann abwechselnd genutzt.

<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 nachsehen. Zur Beschreibung vom hier gezeigten Tag <td>.

Wechsel der Umrandung bei Hover bei HTML-Tag kbd

Die Rahmenfarbe soll sich von Farbwert #98fb98 auf Farbe royalblue ändern, wenn man mit der Maus auf <kbd> zeigt. Wir bereiten zunächst die Formatierung von <kbd> in Farbwert #98fb98 vor.

In diesem Beispiel umranden wir <kbd> mit einem 5 Pixel dicken, herausstehenden Rahmen in Farbwert #98fb98.

<style type="text/css"><!--
  kbd { border:5px outset #98fb98; }
//-->
</style>

Jetzt stellen wir ein, dass bei Berührung mit der Maus die Rahmenfarbe auf royalblue gesetzt wird.

<style type="text/css"><!--
  kbd:hover { 
    border-color:royalblue;
  }
//-->
</style>

Mehr zum Thema kbd können Sie in Text in HTML lesen. Weiteres zum Tag <kbd>.