Ressourcen: 120 HTML Farbnamen - Kombination von Farbe darksalmon und Farbwert #db7093

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 darksalmon			Schriftfarbwert #db7093
Detail	:	Hintergrund darksalmon	Detail	:	Schrift #db7093
Farbe	:	darksalmon	Farbwert	:	#db7093
Farbwert	:	#e9967a	Farbe	:	palevioletred
HTML	:	darksalmon	HTML	:	#db7093
HTML (Wert)	:	#e9967a	HTML (Wert)	:	#db7093
CSS	:	darksalmon	CSS	:	#db7093
CSS (Wert)	:	#e9967a	CSS (Wert)	:	#db7093
CSS (kürzest)	:	#e9967a	CSS (kürzest)	:	#db7093
CSS (RGB)	:	rgb(233,150,122)	CSS (RGB)	:	rgb(219,112,147)
CSS (%RGB)	:	rgb(91%,58%,47%)	CSS (%RGB)	:	rgb(85%,43%,57%)

Verlauf Hintergrundfarbe darksalmon nach Schriftfarbwert #db7093
#e9967a	#e7907d	#e58b81	#e38584	#e18088	#df7a8b	#dd758f	#db7093
#e9967a	#e7907d	#e58b81	#e38584	#e18088	#df7a8b	#dd758f	#db7093

Kombination von darksalmon und #db7093
Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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.				Auf Hintergrund darksalmon ist #db7093 ungeeignet, da die Unterschiede in der Helligkeit und Farbe nicht ausreichend sind. Die Ähnlichkeit von #db7093 und darksalmon beträgt 93.58%. Die Lesbarkeit dieser Kombination liegt damit bei 6.42%.

Hintergrundfarbe darksalmon				Schriftfarbwert #db7093
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#e9967a	#e9967a	#e9967a	#e9967a	#db7093	#db7093	#db7093	#db7093
#eca58d	#eca58d	#c78068	#c78068	#e084a2	#e084a2	#bb607e	#bb607e
#efb4a0	#efb4a0	#a66b57	#a66b57	#e598b1	#e598b1	#9c5069	#9c5069
#f2c3b3	#f2c3b3	#855545	#855545	#eaadc1	#eaadc1	#7d4054	#7d4054
#f5d2c6	#f5d2c6	#634034	#634034	#efc1d0	#efc1d0	#5d303f	#5d303f
#f8e1d9	#f8e1d9	#422a22	#422a22	#f4d6e0	#f4d6e0	#3e202a	#3e202a
#fbf0ec	#fbf0ec	#211511	#211511	#f9eaef	#f9eaef	#1f1015	#1f1015
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe darksalmon und Farbwert #db7093

Wechsel der Unterstreichung bei Hover bei Tag caption

Die Unterstreichungsfarbe soll sich von Farbe darksalmon auf Farbwert #db7093 ändern, wenn man mit der Maus auf <caption> zeigt. Wir bereiten zunächst die Darstellung von <caption> in Farbe darksalmon vor.

Beispielsweise unterstreichen wir <caption> mit einem gefurchten Rahmen mit 1 Pixel Dicke in Farbe darksalmon.

<style type="text/css"><!--
  caption { border-bottom:1px groove darksalmon; }
//-->
</style>

Jetzt stellen wir ein, dass bei Mausberührung die Unterstreichungsfarbe auf #db7093 geändert wird.

<style type="text/css"><!--
  caption: hover { 
    border-bottom-color: #db7093;
  }
//-->
</style>

Die Idee ist hierbei, verschiedene Formatierungen für Inhalt und Unterstreichung zu nutzen. Manchmal sieht man diesen Effekt bei Links. Der Text ist in einer Farbe. Und die Unterstreichung in einer anderen. Das ist jedoch keine wirkliche Unterstreichung, der Text selbst hat gar keine Unterstreichung. Die Unterstreichung wird mit einem Rahmen simuliert und dieser ist unabhängig vom Text.

Mehr zum Thema können Sie in Tabellen in HTML erfahren. Einzelheiten des hier genutzten HTML-Tag caption sind in der HTML Referenz bei <caption> beschrieben.

Zebra-Effekt bei Befehl th

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, spricht man vom so genannten Zebra-Effekt. Er unterstützt das Auge beispielsweise die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ungerade und .gerade für <th> mit den Hintergrundfarben Farbe darksalmon und Farbwert #db7093.

<style type="text/css"><!--
  th.ungerade { 
    background-color: darksalmon;
  }
  th.gerade { 
    background-color: #db7093;
  }
//-->
</style>

Diese Klassen werden dann abwechselnd verwendet.

<table>
<tr><td class="ungerade">Pa/a</td><td class="gerade">Pb/a</td><td class="ungerade">Pc/a</td></tr>
<tr><td class="ungerade">Pa/b</td><td class="gerade">Pb/b</td><td class="ungerade">Pc/b</td></tr>
<tr><td class="ungerade">Pa/c</td><td class="gerade">Pb/c</td><td class="ungerade">Pc/c</td></tr>
</table>

Mehr zum Thema können Sie in Tabellen in HTML lesen. Weiteres zum Befehl <th>.