Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #ffb6c1 und Farbwert #ffc0cb

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.

Hintergrundfarbwert #ffb6c1			Schriftfarbwert #ffc0cb
Detail	:	Hintergrund #ffb6c1	Detail	:	Schrift #ffc0cb
Farbwert	:	#ffb6c1	Farbwert	:	#ffc0cb
Farbe	:	lightpink	Farbe	:	pink
HTML	:	#ffb6c1	HTML	:	#ffc0cb
HTML (Wert)	:	#ffb6c1	HTML (Wert)	:	#ffc0cb
CSS	:	#ffb6c1	CSS	:	#ffc0cb
CSS (Wert)	:	#ffb6c1	CSS (Wert)	:	#ffc0cb
CSS (kürzest)	:	#ffb6c1	CSS (kürzest)	:	#ffc0cb
CSS (RGB)	:	rgb(255,182,193)	CSS (RGB)	:	rgb(255,192,203)
CSS (%RGB)	:	rgb(100%,71%,75%)	CSS (%RGB)	:	rgb(100%,75%,79%)

Verlauf Hintergrundfarbwert #ffb6c1 nach Schriftfarbwert #ffc0cb
#ffb6c1	#ffb7c2	#ffb8c3	#ffbac5	#ffbbc6	#ffbdc8	#ffbec9	#ffc0cb
#ffb6c1	#ffb7c2	#ffb8c3	#ffbac5	#ffbbc6	#ffbdc8	#ffbec9	#ffc0cb

Kombination von #ffb6c1 und #ffc0cb
Cras vestibulum tristique erat, ac interdum justo cursus in. 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 id velit ante.				#ffc0cb eignet sich nicht als Schriftfarbe auf Hintergrund #ffb6c1, da sich die Helligkeit und Farben zu ähnlich sind. Die Ähnlichkeit der Farben #ffc0cb und #ffb6c1 ergibt sich zu 94.89%. Die Lesbarkeit dieser Farbkombination liegt damit bei 5.11%.

Hintergrundfarbwert #ffb6c1				Schriftfarbwert #ffc0cb
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ffb6c1	#ffb6c1	#ffb6c1	#ffb6c1	#ffc0cb	#ffc0cb	#ffc0cb	#ffc0cb
#ffc0c9	#ffc0c9	#da9ca5	#da9ca5	#ffc9d2	#ffc9d2	#daa4ae	#daa4ae
#ffcad2	#ffcad2	#b68289	#b68289	#ffd2d9	#ffd2d9	#b68991	#b68991
#ffd5db	#ffd5db	#91686e	#91686e	#ffdbe1	#ffdbe1	#916d74	#916d74
#ffdfe4	#ffdfe4	#6d4e52	#6d4e52	#ffe4e8	#ffe4e8	#6d5257	#6d5257
#ffeaed	#ffeaed	#483437	#483437	#ffedf0	#ffedf0	#48363a	#48363a
#fff4f6	#fff4f6	#241a1b	#241a1b	#fff6f7	#fff6f7	#241b1d	#241b1d
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #ffb6c1 und Farbwert #ffc0cb

Wechsel der Textfarbe bei Hover mit HTML-Befehl input

Die Textfarbe soll sich von Farbwert #ffb6c1 auf Farbwert #ffc0cb ändern, wenn man mit der Maus darauf zeigt. Bereiten wir zunächst eine Darstellung von <input> in Farbwert #ffb6c1 vor.

Für dieses Beispiel legen wir bei <input> die Textfarbe auf Farbwert #ffb6c1 fest. Die Hintergrundfarbe lassen wir unverändert. Die Schriftart setzen wir auf monospace und setzen die Schriftgröße auf 123%.

<style type="text/css"><!--
  input { 
    color:#ffb6c1; 
    font-family:monospace; 
    font-size:123%;
  }
//-->
</style>

Jetzt fordern wir, dass bei Mausberührung die Textfarbe auf #ffc0cb geändert wird.

<style type="text/css"><!--
  input:hover { 
    color:#ffc0cb;
  }
//-->
</style>

Mehr zum Thema input lesen Sie in Formulare in HTML. Möglichkeiten des Tag input lesen Sie in der HTML Referenz unter <input>.

Wechsel der Unterstreichung bei Hover von HTML-Tag var

Die Unterstreichungsfarbe soll sich von Farbwert #ffb6c1 auf Farbwert #ffc0cb ändern, wenn man mit der Maus auf <var> zeigt. Bereiten wir zunächst eine Darstellung von <var> in Farbwert #ffb6c1 vor.

In diesem Beispiel unterstreichen wir <var> mit Hilfe eines gestrichelten Rahmens mit 1 Pixel Dicke in Farbwert #ffb6c1.

<style type="text/css"><!--
  var { border-bottom:1px dashed #ffb6c1; }
//-->
</style>

Jetzt fordern wir, dass sich bei Mausberührung die Farbe der Unterstreichung auf #ffc0cb ändert.

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

Die Idee ist hierbei, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu nutzen. Öfter sehen Sie das bei Hyperlinks. Der Text ist in einer Farbe. Und die Unterstreichung in einer anderen. Das ist aber keine normale Unterstreichung, der Text selbst ist überhaupt nicht unterstrichen. Die Unterstreichung wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Mehr zum Thema können Sie in Text in HTML erfahren. Möglichkeiten des hier verwendeten HTML-Befehl var sind in der HTML Referenz unter <var> gezeigt.