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

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 peru			Schriftfarbwert #98fb98
Detail	:	Hintergrund peru	Detail	:	Schrift #98fb98
Farbe	:	peru	Farbwert	:	#98fb98
Farbwert	:	#cd853f	Farbe	:	palegreen
HTML	:	peru	HTML	:	#98fb98
HTML (Wert)	:	#cd853f	HTML (Wert)	:	#98fb98
CSS	:	peru	CSS	:	#98fb98
CSS (Wert)	:	#cd853f	CSS (Wert)	:	#98fb98
CSS (kürzest)	:	#cd853f	CSS (kürzest)	:	#98fb98
CSS (RGB)	:	rgb(205,133,63)	CSS (RGB)	:	rgb(152,251,152)
CSS (%RGB)	:	rgb(80%,52%,24%)	CSS (%RGB)	:	rgb(59%,98%,59%)

Verlauf Hintergrundfarbe peru nach Schriftfarbwert #98fb98
#cd853f	#c5954b	#bda658	#b6b765	#aec871	#a7d97e	#9fea8b	#98fb98
#cd853f	#c5954b	#bda658	#b6b765	#aec871	#a7d97e	#9fea8b	#98fb98

Kombination von peru und #98fb98
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 id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit von #98fb98 und peru ergibt sich zu 88.75%. Die Lesbarkeit dieser Farbkombination liegt damit bei 11.25%. #98fb98 ist nicht als Schriftfarbe auf Hintergrund peru geeignet. Weder der Helligkeitsunterschied noch der Farbunterschied sind ausreichend.

Hintergrundfarbe peru				Schriftfarbwert #98fb98
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#cd853f	#cd853f	#cd853f	#cd853f	#98fb98	#98fb98	#98fb98	#98fb98
#d4965a	#d4965a	#af7236	#af7236	#a6fba6	#a6fba6	#82d782	#82d782
#dba775	#dba775	#925f2d	#925f2d	#b5fcb5	#b5fcb5	#6cb36c	#6cb36c
#e2b991	#e2b991	#754c24	#754c24	#c4fcc4	#c4fcc4	#568f56	#568f56
#e9caac	#e9caac	#57391b	#57391b	#d2fdd2	#d2fdd2	#416b41	#416b41
#f0dcc8	#f0dcc8	#3a2612	#3a2612	#e1fde1	#e1fde1	#2b472b	#2b472b
#f7ede3	#f7ede3	#1d1309	#1d1309	#f0fef0	#f0fef0	#152315	#152315
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe peru und Farbwert #98fb98

Wechsel der Textfarbe bei Hover von HTML-Befehl h2

Mit Tag <h2> erzeugen Sie eine Überschrift der 2. Stufe. Diese kann farblich gestaltet und hervorgehoben werden.

Die Textfarbe soll sich von Farbe peru auf Farbwert #98fb98 ändern, wenn man mit der Maus auf <h2> zeigt. Bereiten wir zunächst eine Formatierung von <h2> in Farbe peru vor.

Für dieses Beispiel setzen wir die Textfarbe von <h2> auf Farbe peru. Die Hintergrundfarbe lassen wir unverändert. Die Schriftart ändern wir auf monospace. Die Schriftgröße ändern wir auf 13px:

<style type="text/css"><!--
  h2 { 
    color:peru; 
    font-size:13px; 
    font-family:monospace;
  }
//-->
</style>

Jetzt stellen wir ein, dass bei Berührung mit der Maus die Textfarbe auf #98fb98 gesetzt wird.

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

Mehr zum Thema h2 finden Sie in Grundlegende Gestaltungselemente in HTML. Mehr zum hier gezeigten Tag h2 lesen Sie in der HTML Referenz unter <h2>.

Zebra-Effekt bei Tag th

Man redet von einem so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe verwendet werden. Dieser Effekt unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ung und .ger für <th> mit den Hintergrundfarben Farbe peru und Farbwert #98fb98.

<style type="text/css"><!--
  th.ung { 
    background-color: peru;
  }
  th.ger { 
    background-color:#98fb98;
  }
//-->
</style>

Diese Klassen werden abwechselnd angewendet.

<table>
<tr><td class="ung">I1:1</td><td class="ger">I2:1</td><td class="ung">I3:1</td></tr>
<tr><td class="ung">I1:2</td><td class="ger">I2:2</td><td class="ung">I3:2</td></tr>
<tr><td class="ung">I1:3</td><td class="ger">I2:3</td><td class="ung">I3:3</td></tr>
</table>

Mehr zum Thema können Sie in Tabellen in HTML nachlesen. Möglichkeiten des hier verwendeten HTML-Tag th sind in der HTML Referenz bei <th> gezeigt.