Ressourcen: 120 HTML Farbnamen - Kombination von Farbe skyblue und Farbe mediumorchid

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 skyblue			Schriftfarbe mediumorchid
Detail	:	Hintergrund skyblue	Detail	:	Schrift mediumorchid
Farbe	:	skyblue	Farbe	:	mediumorchid
Farbwert	:	#87ceeb	Farbwert	:	#ba55d3
HTML	:	skyblue	HTML	:	mediumorchid
HTML (Wert)	:	#87ceeb	HTML (Wert)	:	#ba55d3
CSS	:	skyblue	CSS	:	mediumorchid
CSS (Wert)	:	#87ceeb	CSS (Wert)	:	#ba55d3
CSS (kürzest)	:	#87ceeb	CSS (kürzest)	:	#ba55d3
CSS (RGB)	:	rgb(135,206,235)	CSS (RGB)	:	rgb(186,85,211)
CSS (%RGB)	:	rgb(52%,80%,92%)	CSS (%RGB)	:	rgb(72%,33%,82%)

Verlauf Hintergrundfarbe skyblue nach Schriftfarbe mediumorchid
#87ceeb	#8ebce7	#95abe4	#9c9ae0	#a488dd	#ab77d9	#b266d6	#ba55d3
#87ceeb	#8ebce7	#95abe4	#9c9ae0	#a488dd	#ab77d9	#b266d6	#ba55d3

Kombination von skyblue und mediumorchid
Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit von mediumorchid und skyblue ergibt sich zu 89.22%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 10.78%. mediumorchid ist nicht als Schriftfarbe auf Hintergrund skyblue geeignet. Sowohl Helligkeit als auch die Farben sind zu ähnlich.

Hintergrundfarbe skyblue				Schriftfarbe mediumorchid
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#87ceeb	#87ceeb	#87ceeb	#87ceeb	#ba55d3	#ba55d3	#ba55d3	#ba55d3
#98d5ed	#98d5ed	#73b0c9	#73b0c9	#c36dd9	#c36dd9	#9f48b4	#9f48b4
#a9dcf0	#a9dcf0	#6093a7	#6093a7	#cd85df	#cd85df	#843c96	#843c96
#bae3f3	#bae3f3	#4d7586	#4d7586	#d79de5	#d79de5	#6a3078	#6a3078
#cbeaf6	#cbeaf6	#395864	#395864	#e1b6ec	#e1b6ec	#4f245a	#4f245a
#dcf1f9	#dcf1f9	#263a43	#263a43	#ebcef2	#ebcef2	#35183c	#35183c
#edf8fc	#edf8fc	#131d21	#131d21	#f5e6f8	#f5e6f8	#1a0c1e	#1a0c1e
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe skyblue und Farbe mediumorchid

Zebra-Effekt bei Tag th

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, spricht man vom Zebra-Effekt. Der Effekt unterstützt das Auge, etwa die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .gerade und .ungerade für <th> mit den Hintergrundfarben Farbe skyblue und Farbe mediumorchid.

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

Diese werden dann abwechselnd genutzt.

<table>
<tr><td class="gerade">G1-1</td><td class="ungerade">G2-1</td><td class="gerade">G3-1</td></tr>
<tr><td class="gerade">G1-2</td><td class="ungerade">G2-2</td><td class="gerade">G3-2</td></tr>
<tr><td class="gerade">G1-3</td><td class="ungerade">G2-3</td><td class="gerade">G3-3</td></tr>
</table>

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

Wechsel der Hintergrundfarbe bei Hover mit HTML-Tag legend

Die Hintergrundfarbe soll sich von Farbe skyblue auf Farbe mediumorchid ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Darstellung von <legend> in Farbe skyblue vor.

Wir legen in diesem Beispiel Farbe skyblue als Hintergrundfarbe von <legend> fest. Die Textfarbe lassen wir unverändert. Die Schriftart ändern wir auf monospace.

<style type="text/css"><!--
  legend { 
    background-color: skyblue; 
    font-family: monospace;
  }
//-->
</style>

Jetzt fordern wir, dass bei Mausberührung die Hintergrundfarbe auf mediumorchid geändert wird.

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

Weiteres zum Thema können Sie in Formulare in HTML finden. Einzelheiten des HTML-Tag legend erfahren Sie in der HTML Referenz unter <legend>.