Ressourcen: 120 HTML Farbnamen - Kombination von Farbe hotpink und Farbe cornsilk

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 hotpink			Schriftfarbe cornsilk
Detail	:	Hintergrund hotpink	Detail	:	Schrift cornsilk
Farbe	:	hotpink	Farbe	:	cornsilk
Farbwert	:	#ff69b4	Farbwert	:	#fff8dc
HTML	:	hotpink	HTML	:	cornsilk
HTML (Wert)	:	#ff69b4	HTML (Wert)	:	#fff8dc
CSS	:	hotpink	CSS	:	cornsilk
CSS (Wert)	:	#ff69b4	CSS (Wert)	:	#fff8dc
CSS (kürzest)	:	#ff69b4	CSS (kürzest)	:	#fff8dc
CSS (RGB)	:	rgb(255,105,180)	CSS (RGB)	:	rgb(255,248,220)
CSS (%RGB)	:	rgb(100%,41%,70%)	CSS (%RGB)	:	rgb(100%,97%,86%)

Verlauf Hintergrundfarbe hotpink nach Schriftfarbe cornsilk
#ff69b4	#ff7db9	#ff91bf	#ffa6c5	#ffbaca	#ffcfd0	#ffe3d6	#fff8dc
#ff69b4	#ff7db9	#ff91bf	#ffa6c5	#ffbaca	#ffcfd0	#ffe3d6	#fff8dc

Kombination von hotpink und cornsilk
Cras vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante. 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.				Die Ähnlichkeit von cornsilk und hotpink ergibt sich zu 88.17%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 11.83%. Auf Hintergrund hotpink ist cornsilk ungeeignet. Die Helligkeit und Farben sind zu ähnlich.

Hintergrundfarbe hotpink				Schriftfarbe cornsilk
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ff69b4	#ff69b4	#ff69b4	#ff69b4	#fff8dc	#fff8dc	#fff8dc	#fff8dc
#ff7ebe	#ff7ebe	#da5a9a	#da5a9a	#fff9e1	#fff9e1	#dad4bc	#dad4bc
#ff93c9	#ff93c9	#b64b80	#b64b80	#fffae6	#fffae6	#b6b19d	#b6b19d
#ffa9d4	#ffa9d4	#913c66	#913c66	#fffbeb	#fffbeb	#918d7d	#918d7d
#ffbede	#ffbede	#6d2d4d	#6d2d4d	#fffcf0	#fffcf0	#6d6a5e	#6d6a5e
#ffd4e9	#ffd4e9	#481e33	#481e33	#fffdf5	#fffdf5	#48463e	#48463e
#ffe9f4	#ffe9f4	#240f19	#240f19	#fffefa	#fffefa	#24231f	#24231f
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe hotpink und Farbe cornsilk

Zebra-Effekt bei HTML-Befehl td

Man redet vom Zebra-Effekt, wenn zwei Farben abweselnd als Hintergrundfarbe genommen werden. Dieser Effekt unterstützt das Auge, etwa die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .gerade und .ungerade für <td> mit unterschiedlichen Hintergrundfarben Farbe hotpink und Farbe cornsilk.

<style type="text/css"><!--
  td.gerade { 
    background-color:hotpink;
  }
  td.ungerade { 
    background-color:cornsilk;
  }
//-->
</style>

Diese CSS-Klassen werden dann abwechselnd genutzt.

<table>
<tr><td class="gerade">X1,1</td><td class="ungerade">X2,1</td><td class="gerade">X3,1</td></tr>
<tr><td class="gerade">X1,2</td><td class="ungerade">X2,2</td><td class="gerade">X3,2</td></tr>
<tr><td class="gerade">X1,3</td><td class="ungerade">X2,3</td><td class="gerade">X3,3</td></tr>
</table>

Mehr zum Thema td können Sie in Tabellen in HTML nachsehen. Die Beschreibung des hier genutzten Befehl td erfahren Sie in der HTML Referenz unter <td>.

Wechsel der Hintergrundfarbe bei Hover von Befehl a

Einen Link erzeugt man mit HTML-Befehl <a>. Dieser kann farblich gestaltet und hervorgehoben werden.

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

Wir legen für dieses Beispiel bei <a> die Hintergrundfarbe auf Farbe hotpink fest. Die Textfarbe behalten wir bei, setzen jedoch die Schriftart auf arial und vergrößern die Schriftgröße auf 128%:

<style type="text/css"><!--
  a { 
    background-color: hotpink; 
    font-size: 128%; 
    font-family: arial;
  }
//-->
</style>

Nun fordern wir, dass sich bei Mausberührung die Hintergrundfarbe zu cornsilk ändert.

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

Weiteres zu a lesen Sie in Verweise und Protokolle in HTML. Die Beschreibung vom hier gezeigten HTML-Tag a erfahren Sie in der HTML Referenz unter <a>.