Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #f5f5dc und Farbe paleturquoise

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 #f5f5dc			Schriftfarbe paleturquoise
Detail	:	Hintergrund #f5f5dc	Detail	:	Schrift paleturquoise
Farbwert	:	#f5f5dc	Farbe	:	paleturquoise
Farbe	:	beige	Farbwert	:	#afeeee
HTML	:	#f5f5dc	HTML	:	paleturquoise
HTML (Wert)	:	#f5f5dc	HTML (Wert)	:	#afeeee
CSS	:	#f5f5dc	CSS	:	paleturquoise
CSS (Wert)	:	#f5f5dc	CSS (Wert)	:	#afeeee
CSS (kürzest)	:	#f5f5dc	CSS (kürzest)	:	#afeeee
CSS (RGB)	:	rgb(245,245,220)	CSS (RGB)	:	rgb(175,238,238)
CSS (%RGB)	:	rgb(96%,96%,86%)	CSS (%RGB)	:	rgb(68%,93%,93%)

Verlauf Hintergrundfarbwert #f5f5dc nach Schriftfarbe paleturquoise
#f5f5dc	#ebf4de	#e1f3e1	#d7f2e3	#cdf1e6	#c3f0e8	#b9efeb	#afeeee
#f5f5dc	#ebf4de	#e1f3e1	#d7f2e3	#cdf1e6	#c3f0e8	#b9efeb	#afeeee

Kombination von #f5f5dc und paleturquoise
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna.				Die Ähnlichkeit der Farben paleturquoise und #f5f5dc ergibt sich zu 94.45%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 5.55%. paleturquoise eignet sich nicht als Schriftfarbe auf Hintergrund #f5f5dc, da sowohl Helligkeit als auch die Farben zu ähnlich sind.

Hintergrundfarbwert #f5f5dc				Schriftfarbe paleturquoise
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#f5f5dc	#f5f5dc	#f5f5dc	#f5f5dc	#afeeee	#afeeee	#afeeee	#afeeee
#f6f6e1	#f6f6e1	#d2d2bc	#d2d2bc	#baf0f0	#baf0f0	#96cccc	#96cccc
#f7f7e6	#f7f7e6	#afaf9d	#afaf9d	#c5f2f2	#c5f2f2	#7daaaa	#7daaaa
#f9f9eb	#f9f9eb	#8c8c7d	#8c8c7d	#d1f5f5	#d1f5f5	#648888	#648888
#fafaf0	#fafaf0	#69695e	#69695e	#dcf7f7	#dcf7f7	#4b6666	#4b6666
#fcfcf5	#fcfcf5	#46463e	#46463e	#e8fafa	#e8fafa	#324444	#324444
#fdfdfa	#fdfdfa	#23231f	#23231f	#f3fcfc	#f3fcfc	#192222	#192222
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #f5f5dc und Farbe paleturquoise

Zebra-Effekt von Tag th

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, redet man von einem so genannten Zebra-Effekt. Er unterstützt das Auge z.B. die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ger und .ung für <th> mit unterschiedlichen Hintergrundfarben Farbwert #f5f5dc und Farbe paleturquoise.

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

Diese CSS-Klassen werden abwechselnd verwendet.

<table>
<tr><td class="ger">B1~1</td><td class="ung">B2~1</td><td class="ger">B3~1</td></tr>
<tr><td class="ger">B1~2</td><td class="ung">B2~2</td><td class="ger">B3~2</td></tr>
<tr><td class="ger">B1~3</td><td class="ung">B2~3</td><td class="ger">B3~3</td></tr>
</table>

Weiteres zum Thema th finden Sie in Tabellen in HTML. Einzelheiten vom HTML-Befehl th sind in der HTML Referenz unter <th> genau beschrieben.

Wechsel der Hintergrundfarbe bei Hover mit Befehl h3

Eine Überschrift der 3. Stufe erzeugt man mit HTML-Tag <h3> und kann hervorgehoben und farblich gestaltet werden.

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

Für dieses Beispiel legen wir Farbwert #f5f5dc als Hintergrundfarbe von <h3> fest. Die Textfarbe lassen wir unverändert, ändern jedoch die Schriftart auf sans-serif und verkleinern die Schriftgröße auf 88%.

<style type="text/css"><!--
  h3 { 
    font-size:88%; 
    font-family:sans-serif; 
    background-color:#f5f5dc;
  }
//-->
</style>

Nun stellen wir ein, dass bei Berührung mit der Maus die Hintergrundfarbe auf paleturquoise gesetzt wird.

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

Mehr zu h3 können Sie in Grundlegende Gestaltungselemente in HTML erfahren. Mehr zum hier verwendeten Befehl h3 ist in der HTML Referenz bei <h3> genau zusammengestellt.