Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #ffb6c1 und Farbwert #6495ed

Netscape führte seinerzeit die websicheren Farben ein. Neben diesen, einem bestimmten Schema folgenden, Farbwerten, definierte man noch 120 Werte und ordnete ihnen Namen zu. Zusammen mit den 17 Standard-HTML-Farben, die ebenfalls Namen haben, ergeben sich so 137 HTML Farbnamen.

Hintergrundfarbwert #ffb6c1			Schriftfarbwert #6495ed
Detail	:	Hintergrund #ffb6c1	Detail	:	Schrift #6495ed
Farbwert	:	#ffb6c1	Farbwert	:	#6495ed
Farbe	:	lightpink	Farbe	:	cornflowerblue
HTML	:	#ffb6c1	HTML	:	#6495ed
HTML (Wert)	:	#ffb6c1	HTML (Wert)	:	#6495ed
CSS	:	#ffb6c1	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 Hintergrundfarbwert #ffb6c1 nach Schriftfarbwert #6495ed
#ffb6c1	#e8b1c7	#d2accd	#bca7d3	#a6a3da	#909ee0	#7a99e6	#6495ed
#ffb6c1	#e8b1c7	#d2accd	#bca7d3	#a6a3da	#909ee0	#7a99e6	#6495ed

Kombination von #ffb6c1 und #6495ed
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				#6495ed eignet sich nicht als Schriftfarbe auf Hintergrund #ffb6c1. Weder der Helligkeitsunterschied noch der Farbunterschied sind gross genug. Die Ähnlichkeit der Farben #6495ed und #ffb6c1 beträgt 91.43%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 8.57%.

Hintergrundfarbwert #ffb6c1				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 Farbwert #ffb6c1 und Farbwert #6495ed

Wechsel der Umrandung bei Hover mit Tag button

Die Rahmenfarbe soll sich von Farbwert #ffb6c1 auf Farbwert #6495ed ändern, wenn man mit der Maus auf <button> zeigt. Wir bereiten zunächst die Darstellung von <button> in Farbwert #ffb6c1 vor.

In diesem Beispiel umranden wir <button> mit einem 3 Pixel dicken, gestrichelten Rahmen in Farbwert #ffb6c1.

<style type="text/css"><!--
  button { 
    border-width: 3px; 
    border-style: dashed; 
    border-color: #ffb6c1;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Mausberührung die Rahmenfarbe auf #6495ed ändert.

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

Weiteres zu button finden Sie in Formulare in HTML. Weiteres zum Tag <button>.

Text- und Unterstreichungsfarben bei HTML-Befehl a

Einen Hyperlink setzen Sie mit HTML-Tag <a>. Diesen kann man farblich gestalten.

Für dieses Beispiel ändern wir die Textfarbe von <a> auf Farbwert #6495ed und lassen die Hintergrundfarbe unverändert. Die Schriftart setzen wir auf sans-serif. Die Schriftgröße erhöhen wir auf 125%. Wir unterstreichen den Inhalt von <a> mit Hilfe eines gestrichelten Rahmens mit 2 Punkte Dicke in Farbwert #ffb6c1. In HTML ist das kaum möglich. Deshalb verwenden wir dafür CSS.

<style type="text/css"><!--
  a { 
    border-bottom-style: dashed; 
    color: #6495ed; 
    border-bottom-width: 2pt; 
    font-family: sans-serif; 
    border-bottom-color: #ffb6c1; 
    font-size: 125%;
  }
//-->
</style>

Die Idee ist, unterschiedliche Formatierungen für Inhalt und Unterstreichung zu haben.

Mehr zum Thema a finden Sie in Verweise und Protokolle in HTML. Möglichkeiten vom hier genutzten HTML-Tag a erfahren Sie in der HTML Referenz unter <a>.