Ressourcen: 120 HTML Farbnamen - Kombination von Farbe lightpink und Farbwert #6495ed

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 lightpink			Schriftfarbwert #6495ed
Detail	:	Hintergrund lightpink	Detail	:	Schrift #6495ed
Farbe	:	lightpink	Farbwert	:	#6495ed
Farbwert	:	#ffb6c1	Farbe	:	cornflowerblue
HTML	:	lightpink	HTML	:	#6495ed
HTML (Wert)	:	#ffb6c1	HTML (Wert)	:	#6495ed
CSS	:	lightpink	CSS	:	#6495ed
CSS (Wert)	:	#ffb6c1	CSS (Wert)	:	#6495ed
CSS (kürzest)	:	#ffb6c1	CSS (kürzest)	:	#6495ed
CSS (RGB)	:	rgb(255,182,193)	CSS (RGB)	:	rgb(100,149,237)
CSS (%RGB)	:	rgb(100%,71%,75%)	CSS (%RGB)	:	rgb(39%,58%,92%)

Verlauf Hintergrundfarbe lightpink nach Schriftfarbwert #6495ed
#ffb6c1	#e8b1c7	#d2accd	#bca7d3	#a6a3da	#909ee0	#7a99e6	#6495ed
#ffb6c1	#e8b1c7	#d2accd	#bca7d3	#a6a3da	#909ee0	#7a99e6	#6495ed

Kombination von lightpink und #6495ed
Cras vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante.				Die Ähnlichkeit der Farben #6495ed und lightpink ergibt sich zu 91.43%. Die Lesbarkeit dieser Kombination bewerte ich mit 8.57%. #6495ed eignet sich nicht als Schriftfarbe auf Hintergrund lightpink, da die Unterschiede in der Helligkeit und Farbe unzureichend sind.

Hintergrundfarbe lightpink				Schriftfarbwert #6495ed
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ffb6c1	#ffb6c1	#ffb6c1	#ffb6c1	#6495ed	#6495ed	#6495ed	#6495ed
#ffc0c9	#ffc0c9	#da9ca5	#da9ca5	#7aa4ef	#7aa4ef	#557fcb	#557fcb
#ffcad2	#ffcad2	#b68289	#b68289	#90b3f2	#90b3f2	#476aa9	#476aa9
#ffd5db	#ffd5db	#91686e	#91686e	#a6c2f4	#a6c2f4	#395587	#395587
#ffdfe4	#ffdfe4	#6d4e52	#6d4e52	#bcd1f7	#bcd1f7	#2a3f65	#2a3f65
#ffeaed	#ffeaed	#483437	#483437	#d2e0f9	#d2e0f9	#1c2a43	#1c2a43
#fff4f6	#fff4f6	#241a1b	#241a1b	#e8effc	#e8effc	#0e1521	#0e1521
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe lightpink und Farbwert #6495ed

Zebra-Effekt von HTML-Tag tr

Werden zwei Farben abweselnd als Hintergrundfarbe genommen, spricht man vom so genannten Zebra-Effekt. Dieser Effekt unterstützt das Auge dabei, die Zeile oder Spalte nicht zu verlieren. Wir definieren zwei Klassen .ung und .ger für <tr> mit unterschiedlichen Hintergrundfarben Farbe lightpink und Farbwert #6495ed.

<style type="text/css"><!--
  tr.ung { 
    background-color: lightpink;
  }
  tr.ger { 
    background-color:#6495ed;
  }
//-->
</style>

Diese CSS-Klassen werden abwechselnd angewendet.

<table>
<tr class="ung"><td>G1.1</td><td>G2.1</td><td>G3.1</td></tr>
<tr class="ger"><td>G1.2</td><td>G2.2</td><td>G3.2</td></tr>
<tr class="ung"><td>G1.3</td><td>G2.3</td><td>G3.3</td></tr>
</table>

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

Wechsel der Textfarbe bei Hover von Befehl h5

Mit Befehl <h5> wird eine Überschrift erzeugt. Diese können Sie hervorheben und farblich gestalten.

Die Textfarbe soll sich von Farbe lightpink auf Farbwert #6495ed ändern, wenn man mit der Maus auf <h5> zeigt. Wir bereiten zunächst die Formatierung von <h5> in Farbe lightpink vor.

Z.B. legen wir bei <h5> die Textfarbe auf Farbe lightpink fest. Zwar behalten wir die Hintergrundfarbe bei, setzen jedoch die Schriftart auf sans-serif und setzen die Größe der Schrift auf 13px:

<style type="text/css"><!--
  h5 { 
    color:lightpink; 
    font-family:sans-serif; 
    font-size:13px;
  }
//-->
</style>

Jetzt stellen wir ein, dass bei Hover die Textfarbe auf #6495ed gesetzt wird.

<style type="text/css"><!--
  h5: hover { 
    color: #6495ed;
  }
//-->
</style>

Weiteres zum Thema können Sie in Grundlegende Gestaltungselemente in HTML finden. Möglichkeiten des Befehl h5 sind in der HTML Referenz bei <h5> genau beschrieben.