Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #66cdaa und Farbwert #faf0e6

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 #66cdaa			Schriftfarbwert #faf0e6
Detail	:	Hintergrund #66cdaa	Detail	:	Schrift #faf0e6
Farbwert	:	#66cdaa	Farbwert	:	#faf0e6
Farbe	:	mediumaquamarine	Farbe	:	linen
HTML	:	#66cdaa	HTML	:	#faf0e6
HTML (Wert)	:	#66cdaa	HTML (Wert)	:	#faf0e6
CSS	:	#66cdaa	CSS	:	#faf0e6
CSS (Wert)	:	#66cdaa	CSS (Wert)	:	#faf0e6
CSS (kürzest)	:	#66cdaa	CSS (kürzest)	:	#faf0e6
CSS (RGB)	:	rgb(102,205,170)	CSS (RGB)	:	rgb(250,240,230)
CSS (%RGB)	:	rgb(40%,80%,66%)	CSS (%RGB)	:	rgb(98%,94%,90%)

Verlauf Hintergrundfarbwert #66cdaa nach Schriftfarbwert #faf0e6
#66cdaa	#7bd2b2	#90d7bb	#a5dcc3	#bae1cc	#cfe6d4	#e4ebdd	#faf0e6
#66cdaa	#7bd2b2	#90d7bb	#a5dcc3	#bae1cc	#cfe6d4	#e4ebdd	#faf0e6

Kombination von #66cdaa und #faf0e6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit der Farben #faf0e6 und #66cdaa ergibt sich zu 91.83%. Die Lesbarkeit dieser Kombination ergibt sich zu 8.17%. Auf Hintergrund #66cdaa ist #faf0e6 ungeeignet. Weder der Helligkeitsunterschied noch der Farbunterschied sind gross genug.

Hintergrundfarbwert #66cdaa				Schriftfarbwert #faf0e6
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#66cdaa	#66cdaa	#66cdaa	#66cdaa	#faf0e6	#faf0e6	#faf0e6	#faf0e6
#7bd4b6	#7bd4b6	#57af91	#57af91	#faf2e9	#faf2e9	#d6cdc5	#d6cdc5
#91dbc2	#91dbc2	#489279	#489279	#fbf4ed	#fbf4ed	#b2aba4	#b2aba4
#a7e2ce	#a7e2ce	#3a7561	#3a7561	#fcf6f0	#fcf6f0	#8e8983	#8e8983
#bde9da	#bde9da	#2b5748	#2b5748	#fcf8f4	#fcf8f4	#6b6662	#6b6662
#d3f0e6	#d3f0e6	#1d3a30	#1d3a30	#fdfaf7	#fdfaf7	#474441	#474441
#e9f7f2	#e9f7f2	#0e1d18	#0e1d18	#fefcfb	#fefcfb	#232220	#232220
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #66cdaa und Farbwert #faf0e6

Wechsel der Umrandung bei Hover bei Tag q

Die Rahmenfarbe soll sich von Farbwert #66cdaa auf Farbwert #faf0e6 ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Formatierung von <q> in Farbwert #66cdaa vor.

In diesem Beispiel umranden wir <q> mit einem 1 Pixel dicken, gepunkteten Rahmen in Farbwert #66cdaa.

<style type="text/css"><!--
  q { 
    border-color:#66cdaa; 
    border-style:dotted; 
    border-width:1px;
  }
//-->
</style>

Jetzt stellen wir ein, dass sich bei Hover die Rahmenfarbe zu #faf0e6 ändert.

<style type="text/css"><!--
  q:hover { 
    border-color:#faf0e6;
  }
//-->
</style>

Der hier genutzte HTML-Befehl q ist in der HTML Referenz unter <q> genau beschrieben.

Zebra-Effekt bei Tag tr

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, spricht man von einem Zebra-Effekt. Der Effekt unterstützt das Auge zum Beispiel die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ungerade und .gerade für <tr> mit den Hintergrundfarben Farbwert #66cdaa und Farbwert #faf0e6.

<style type="text/css"><!--
  tr.ungerade { 
    background-color:#66cdaa;
  }
  tr.gerade { 
    background-color:#faf0e6;
  }
//-->
</style>

Diese werden dann abwechselnd verwendet.

<table>
<tr class="ungerade"><td>UA.A</td><td>UB.A</td><td>UC.A</td></tr>
<tr class="gerade"><td>UA.B</td><td>UB.B</td><td>UC.B</td></tr>
<tr class="ungerade"><td>UA.C</td><td>UB.C</td><td>UC.C</td></tr>
</table>

Weiteres zum Thema finden Sie in Tabellen in HTML. Mehr zum HTML-Befehl tr erfahren Sie in der HTML Referenz unter <tr>.