Ressourcen: 120 HTML Farbnamen - Kombination von Farbe seagreen und Farbwert #ffefd5

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 seagreen			Schriftfarbwert #ffefd5
Detail	:	Hintergrund seagreen	Detail	:	Schrift #ffefd5
Farbe	:	seagreen	Farbwert	:	#ffefd5
Farbwert	:	#2e8b57	Farbe	:	papayawhip
HTML	:	seagreen	HTML	:	#ffefd5
HTML (Wert)	:	#2e8b57	HTML (Wert)	:	#ffefd5
CSS	:	seagreen	CSS	:	#ffefd5
CSS (Wert)	:	#2e8b57	CSS (Wert)	:	#ffefd5
CSS (kürzest)	:	#2e8b57	CSS (kürzest)	:	#ffefd5
CSS (RGB)	:	rgb(46,139,87)	CSS (RGB)	:	rgb(255,239,213)
CSS (%RGB)	:	rgb(18%,54%,34%)	CSS (%RGB)	:	rgb(100%,93%,83%)

Verlauf Hintergrundfarbe seagreen nach Schriftfarbwert #ffefd5
#2e8b57	#4b9969	#69a77b	#87b58d	#a5c49f	#c3d2b1	#e1e0c3	#ffefd5
#2e8b57	#4b9969	#69a77b	#87b58d	#a5c49f	#c3d2b1	#e1e0c3	#ffefd5

Kombination von seagreen und #ffefd5
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. Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Die Ähnlichkeit der Farben #ffefd5 und seagreen beträgt 82.13%. Die Lesbarkeit dieser Kombination bewerte ich mit 17.87%. #ffefd5 ist nicht als Schriftfarbe auf Hintergrund seagreen geeignet, weil die Farben zu ähnlich sind.

Hintergrundfarbe seagreen				Schriftfarbwert #ffefd5
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#2e8b57	#2e8b57	#2e8b57	#2e8b57	#ffefd5	#ffefd5	#ffefd5	#ffefd5
#4b9b6f	#4b9b6f	#27774a	#27774a	#fff1db	#fff1db	#daccb6	#daccb6
#69ac87	#69ac87	#20633e	#20633e	#fff3e1	#fff3e1	#b6aa98	#b6aa98
#87bc9f	#87bc9f	#1a4f31	#1a4f31	#fff5e7	#fff5e7	#918879	#918879
#a5cdb7	#a5cdb7	#133b25	#133b25	#fff8ed	#fff8ed	#6d665b	#6d665b
#c3ddcf	#c3ddcf	#0d2718	#0d2718	#fffaf3	#fffaf3	#48443c	#48443c
#e1eee7	#e1eee7	#06130c	#06130c	#fffcf9	#fffcf9	#24221e	#24221e
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe seagreen und Farbwert #ffefd5

Zebra-Effekt bei HTML-Tag td

Man redet vom so genannten Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Dieser Effekt unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .odd und .even für <td> mit den Hintergrundfarben Farbe seagreen und Farbwert #ffefd5.

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

Diese CSS-Klassen werden abwechselnd angewendet.

<table>
<tr><td class="odd">Xa-a</td><td class="even">Xb-a</td><td class="odd">Xc-a</td></tr>
<tr><td class="odd">Xa-b</td><td class="even">Xb-b</td><td class="odd">Xc-b</td></tr>
<tr><td class="odd">Xa-c</td><td class="even">Xb-c</td><td class="odd">Xc-c</td></tr>
</table>

Mehr zum Thema td können Sie in Tabellen in HTML lesen. Der hier genutzte HTML-Befehl td ist in der HTML Referenz bei <td> genau gezeigt.

Wechsel der Umrandung bei Hover bei Tag pre

Die Rahmenfarbe soll sich von Farbe seagreen auf Farbwert #ffefd5 ändern, wenn man mit der Maus auf <pre> zeigt. Wir bereiten zunächst eine Formatierung von <pre> in Farbe seagreen vor.

In diesem Beispiel umranden wir <pre> mit einem 5 Pixel dicken, einfallenden Rahmen in Farbe seagreen.

<style type="text/css"><!--
  pre { border:5px inset seagreen; }
//-->
</style>

Nun stellen wir ein, dass bei Berührung mit der Maus die Rahmenfarbe auf #ffefd5 gesetzt wird.

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

Weiteres zum Thema pre finden Sie in Blockorientierte Elemente in HTML. Beschreibung des hier gezeigten Tag <pre>.