Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #ffb6c1 und Farbwert #0000ff

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 #0000ff
Detail	:	Hintergrund #ffb6c1	Detail	:	Schrift #0000ff
Farbwert	:	#ffb6c1	Farbwert	:	#0000ff
Farbe	:	lightpink	Farbe	:	blue
HTML	:	#ffb6c1	HTML	:	#0000ff
HTML (Wert)	:	#ffb6c1	HTML (Wert)	:	#0000ff
CSS	:	#ffb6c1	CSS	:	#0000ff
CSS (Wert)	:	#ffb6c1	CSS (Wert)	:	#0000ff
CSS (kürzest)	:	#ffb6c1	CSS (kürzest)	:	#00f
CSS (RGB)	:	rgb(255,182,193)	CSS (RGB)	:	rgb(0,0,255)
CSS (%RGB)	:	rgb(100%,71%,75%)	CSS (%RGB)	:	rgb(0%,0%,100%)

Verlauf Hintergrundfarbwert #ffb6c1 nach Schriftfarbwert #0000ff
#ffb6c1	#da9cc9	#b682d2	#9168db	#6d4ee4	#4834ed	#241af6	#0000ff
#ffb6c1	#da9cc9	#b682d2	#9168db	#6d4ee4	#4834ed	#241af6	#0000ff

Kombination von #ffb6c1 und #0000ff
Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante.				#0000ff eignet sich nicht als Schriftfarbe auf Hintergrund #ffb6c1. Zwar ist der Helligkeitsunterschied ausreichend, doch die Farben selbst sind zu ähnlich. Die Ähnlichkeit der Farben #0000ff und #ffb6c1 ergibt sich zu 75.23%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 24.77%.

Hintergrundfarbwert #ffb6c1				Schriftfarbwert #0000ff
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ffb6c1	#ffb6c1	#ffb6c1	#ffb6c1	#0000ff	#0000ff	#0000ff	#0000ff
#ffc0c9	#ffc0c9	#da9ca5	#da9ca5	#2424ff	#2424ff	#0000da	#0000da
#ffcad2	#ffcad2	#b68289	#b68289	#4848ff	#4848ff	#0000b6	#0000b6
#ffd5db	#ffd5db	#91686e	#91686e	#6d6dff	#6d6dff	#000091	#000091
#ffdfe4	#ffdfe4	#6d4e52	#6d4e52	#9191ff	#9191ff	#00006d	#00006d
#ffeaed	#ffeaed	#483437	#483437	#b6b6ff	#b6b6ff	#000048	#000048
#fff4f6	#fff4f6	#241a1b	#241a1b	#dadaff	#dadaff	#000024	#000024
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #ffb6c1 und Farbwert #0000ff

Text- und Unterstreichungsfarben mit HTML-Tag dfn

Hier ändern wir die Textfarbe von <dfn> auf Farbwert #0000ff und lassen die Hintergrundfarbe unverändert. Die Schriftart setzen wir auf courier new und verringern die Schriftgröße auf 98%. Wir unterstreichen den Inhalt von <dfn> mit Hilfe eines doppelten Rahmens mit 5 Punkte Dicke in Farbwert #ffb6c1. Mit HTML geht das kaum. Wir verwenden daher CSS.

<style type="text/css"><!--
  dfn { 
    border-bottom:5pt double #ffb6c1; 
    font-size:98%; 
    color:#00f; 
    font-family:courier new;
  }
//-->
</style>

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

Weiteres zum Thema dfn können Sie in Text in HTML nachlesen. Weiteres zum hier verwendeten HTML-Tag dfn lesen Sie in der HTML Referenz unter <dfn>.

Wechsel der Hintergrundfarbe bei Hover von Tag h6

Eine Überschrift der 6. Stufe wird mit Tag <h6> erzeugt. Diese können Sie farblich gestalten.

Die Hintergrundfarbe soll sich von Farbwert #ffb6c1 auf Farbwert #0000ff ändern, wenn man mit der Maus auf <h6> zeigt. Wir bereiten zunächst eine Darstellung von <h6> in Farbwert #ffb6c1 vor.

Wir legen zum Beispiel bei <h6> die Hintergrundfarbe auf Farbwert #ffb6c1 fest. Zwar lassen wir die Textfarbe unverändert, ändern jedoch die Schriftart auf verdana:

<style type="text/css"><!--
  h6 { 
    font-family: verdana; 
    background-color: #ffb6c1;
  }
//-->
</style>

Nun stellen wir ein, dass bei Hover die Hintergrundfarbe auf #0000ff geändert wird.

<style type="text/css"><!--
  h6:hover { 
    background-color:#00f;
  }
//-->
</style>

Weiteres zu h6 finden Sie in Grundlegende Gestaltungselemente in HTML. Die Beschreibung vom Tag h6 finden Sie in der HTML Referenz unter <h6>.