Ressourcen: 120 HTML Farbnamen - Kombination von Farbe darkslategray und Farbe mistyrose

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 darkslategray			Schriftfarbe mistyrose
Detail	:	Hintergrund darkslategray	Detail	:	Schrift mistyrose
Farbe	:	darkslategray	Farbe	:	mistyrose
Farbwert	:	#2f4f4f	Farbwert	:	#ffe4e1
HTML	:	darkslategray	HTML	:	mistyrose
HTML (Wert)	:	#2f4f4f	HTML (Wert)	:	#ffe4e1
CSS	:	darkslategray	CSS	:	mistyrose
CSS (Wert)	:	#2f4f4f	CSS (Wert)	:	#ffe4e1
CSS (kürzest)	:	#2f4f4f	CSS (kürzest)	:	#ffe4e1
CSS (RGB)	:	rgb(47,79,79)	CSS (RGB)	:	rgb(255,228,225)
CSS (%RGB)	:	rgb(18%,30%,30%)	CSS (%RGB)	:	rgb(100%,89%,88%)

Verlauf Hintergrundfarbe darkslategray nach Schriftfarbe mistyrose
#2f4f4f	#4c6463	#6a7978	#888e8d	#a5a4a2	#c3b9b7	#e1cecc	#ffe4e1
#2f4f4f	#4c6463	#6a7978	#888e8d	#a5a4a2	#c3b9b7	#e1cecc	#ffe4e1

Kombination von darkslategray und mistyrose
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in. 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.				Die Ähnlichkeit von mistyrose und darkslategray beträgt 64.70%. Die Lesbarkeit dieser Farbkombination liegt damit bei 35.30%. mistyrose eignet sich als Schriftfarbe auf Hintergrund darkslategray. Helligkeitsunterschied und Farbenunterschied sind ok.

Hintergrundfarbe darkslategray				Schriftfarbe mistyrose
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#2f4f4f	#2f4f4f	#2f4f4f	#2f4f4f	#ffe4e1	#ffe4e1	#ffe4e1	#ffe4e1
#4c6868	#4c6868	#284343	#284343	#ffe7e5	#ffe7e5	#dac3c0	#dac3c0
#6a8181	#6a8181	#213838	#213838	#ffebe9	#ffebe9	#b6a2a0	#b6a2a0
#889a9a	#889a9a	#1a2d2d	#1a2d2d	#ffefed	#ffefed	#918280	#918280
#a5b3b3	#a5b3b3	#142121	#142121	#fff3f2	#fff3f2	#6d6160	#6d6160
#c3cccc	#c3cccc	#0d1616	#0d1616	#fff7f6	#fff7f6	#484140	#484140
#e1e5e5	#e1e5e5	#060b0b	#060b0b	#fffbfa	#fffbfa	#242020	#242020
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe darkslategray und Farbe mistyrose

Zebra-Effekt bei Befehl th

Werden zwei Farben abweselnd als Hintergrundfarbe verwendet, redet man vom Zebra-Effekt. Er unterstützt das Auge, etwa die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ying und .yang für <th> mit den Hintergrundfarben Farbe darkslategray und Farbe mistyrose.

<style type="text/css"><!--
  th.ying { 
    background-color: darkslategray;
  }
  th.yang { 
    background-color:mistyrose;
  }
//-->
</style>

Diese werden dann abwechselnd genutzt.

<table>
<tr><td class="ying"><tt>1~1</td><td class="yang"></tt>2~1</td><td class="ying"><tt>3~1</td></tr>
<tr><td class="ying"></tt>1~2</td><td class="yang"><tt>2~2</td><td class="ying"></tt>3~2</td></tr>
<tr><td class="ying"><tt>1~3</td><td class="yang"></tt>2~3</td><td class="ying">@3~3</td></tr>
</table>

Weiteres zum Thema th können Sie in Tabellen in HTML lesen. Mehr zum hier genutzten Tag th finden Sie in der HTML Referenz unter <th>.

Wechsel der Hintergrundfarbe bei Hover bei HTML-Tag a

Mit Tag <a> erzeugen Sie einen Hyperlink. Dieser kann hervorgehoben und farblich gestaltet werden.

Die Hintergrundfarbe soll sich von Farbe darkslategray auf Farbe mistyrose ändern, wenn man mit der Maus auf <a> zeigt. Wir bereiten zunächst die Formatierung von <a> in Farbe darkslategray vor.

Wir setzen für dieses Beispiel bei <a> die Hintergrundfarbe auf Farbe darkslategray. Zwar lassen wir die Textfarbe unverändert, ändern jedoch die Schriftart auf monospace. Die Schriftgröße ändern wir auf 9px.

<style type="text/css"><!--
  a { 
    font-family: monospace; 
    background-color: darkslategray; 
    font-size: 9px;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Berührung mit der Maus die Hintergrundfarbe auf mistyrose ändert.

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

Weiteres zum Thema a finden Sie in Verweise und Protokolle in HTML. Die Beschreibung vom Tag a erfahren Sie in der HTML Referenz unter <a>.