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

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 darkturquoise
Detail	:	Hintergrund #f5f5dc	Detail	:	Schrift darkturquoise
Farbwert	:	#f5f5dc	Farbe	:	darkturquoise
Farbe	:	beige	Farbwert	:	#00ced1
HTML	:	#f5f5dc	HTML	:	darkturquoise
HTML (Wert)	:	#f5f5dc	HTML (Wert)	:	#00ced1
CSS	:	#f5f5dc	CSS	:	darkturquoise
CSS (Wert)	:	#f5f5dc	CSS (Wert)	:	#00ced1
CSS (kürzest)	:	#f5f5dc	CSS (kürzest)	:	#00ced1
CSS (RGB)	:	rgb(245,245,220)	CSS (RGB)	:	rgb(0,206,209)
CSS (%RGB)	:	rgb(96%,96%,86%)	CSS (%RGB)	:	rgb(0%,80%,81%)

Verlauf Hintergrundfarbwert #f5f5dc nach Schriftfarbe darkturquoise
#f5f5dc	#d2efda	#afe9d8	#8ce4d7	#69ded5	#46d9d4	#23d3d2	#00ced1
#f5f5dc	#d2efda	#afe9d8	#8ce4d7	#69ded5	#46d9d4	#23d3d2	#00ced1

Kombination von #f5f5dc und darkturquoise
Cras id velit ante. 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 vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				Die Ähnlichkeit der Farben darkturquoise und #f5f5dc ergibt sich zu 91.59%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 8.41%. darkturquoise ist nicht als Schriftfarbe auf Hintergrund #f5f5dc geeignet. Die Unterschiede in der Helligkeit und Farbe sind nicht ausreichend.

Hintergrundfarbwert #f5f5dc				Schriftfarbe darkturquoise
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#f5f5dc	#f5f5dc	#f5f5dc	#f5f5dc	#00ced1	#00ced1	#00ced1	#00ced1
#f6f6e1	#f6f6e1	#d2d2bc	#d2d2bc	#24d5d7	#24d5d7	#00b0b3	#00b0b3
#f7f7e6	#f7f7e6	#afaf9d	#afaf9d	#48dcde	#48dcde	#009395	#009395
#f9f9eb	#f9f9eb	#8c8c7d	#8c8c7d	#6de3e4	#6de3e4	#007577	#007577
#fafaf0	#fafaf0	#69695e	#69695e	#91eaeb	#91eaeb	#005859	#005859
#fcfcf5	#fcfcf5	#46463e	#46463e	#b6f1f1	#b6f1f1	#003a3b	#003a3b
#fdfdfa	#fdfdfa	#23231f	#23231f	#daf8f8	#daf8f8	#001d1d	#001d1d
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #f5f5dc und Farbe darkturquoise

Zebra-Effekt bei Tag th

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 .even und .odd für <th> mit unterschiedlichen Hintergrundfarben Farbwert #f5f5dc und Farbe darkturquoise.

<style type="text/css"><!--
  th.even { 
    background-color: #f5f5dc;
  }
  th.odd { 
    background-color: darkturquoise;
  }
//-->
</style>

Diese Klassen werden abwechselnd angewendet.

<table>
<tr><td class="even">Ma~a</td><td class="odd">Mb~a</td><td class="even">Mc~a</td></tr>
<tr><td class="even">Ma~b</td><td class="odd">Mb~b</td><td class="even">Mc~b</td></tr>
<tr><td class="even">Ma~c</td><td class="odd">Mb~c</td><td class="even">Mc~c</td></tr>
</table>

Mehr zu th erfahren Sie in Tabellen in HTML. Weiteres zum HTML-Tag th ist in der HTML Referenz bei <th> genau beschrieben.

Wechsel der Hintergrundfarbe bei Hover mit HTML-Tag pre

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

Wir legen zum Beispiel die Hintergrundfarbe von <pre> auf Farbwert #f5f5dc fest. Die Textfarbe verändern wir nicht, ändern jedoch die Schriftart auf sans-serif.

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

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

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

Mehr zum Thema pre lesen Sie in Blockorientierte Elemente in HTML. Möglichkeiten vom hier genutzten HTML-Befehl <pre>.