Ressourcen: 137 HTML Farbnamen - Kombination von Farbe cornflowerblue und Farbe ghostwhite

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.

Hintergrundfarbe cornflowerblue			Schriftfarbe ghostwhite
Detail	:	Hintergrund cornflowerblue	Detail	:	Schrift ghostwhite
Farbe	:	cornflowerblue	Farbe	:	ghostwhite
Farbwert	:	#6495ed	Farbwert	:	#f8f8ff
HTML	:	cornflowerblue	HTML	:	ghostwhite
HTML (Wert)	:	#6495ed	HTML (Wert)	:	#f8f8ff
CSS	:	cornflowerblue	CSS	:	ghostwhite
CSS (Wert)	:	#6495ed	CSS (Wert)	:	#f8f8ff
CSS (kürzest)	:	#6495ed	CSS (kürzest)	:	#f8f8ff
CSS (RGB)	:	rgb(100,149,237)	CSS (RGB)	:	rgb(248,248,255)
CSS (%RGB)	:	rgb(39%,58%,92%)	CSS (%RGB)	:	rgb(97%,97%,100%)

Verlauf Hintergrundfarbe cornflowerblue nach Schriftfarbe ghostwhite
#6495ed	#79a3ef	#8eb1f2	#a3bff4	#b8cdf7	#cddbf9	#e2e9fc	#f8f8ff
#6495ed	#79a3ef	#8eb1f2	#a3bff4	#b8cdf7	#cddbf9	#e2e9fc	#f8f8ff

Kombination von cornflowerblue und ghostwhite
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante. 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.				ghostwhite ist nicht als Schriftfarbe auf Hintergrund cornflowerblue geeignet. Weder der Helligkeitsunterschied noch der Farbunterschied sind geeignet. Die Ähnlichkeit der Farben ghostwhite und cornflowerblue beträgt 86.61%. Die Lesbarkeit dieser Farbkombination liegt damit bei 13.39%.

Hintergrundfarbe cornflowerblue				Schriftfarbe ghostwhite
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#6495ed	#6495ed	#6495ed	#6495ed	#f8f8ff	#f8f8ff	#f8f8ff	#f8f8ff
#7aa4ef	#7aa4ef	#557fcb	#557fcb	#f9f9ff	#f9f9ff	#d4d4da	#d4d4da
#90b3f2	#90b3f2	#476aa9	#476aa9	#fafaff	#fafaff	#b1b1b6	#b1b1b6
#a6c2f4	#a6c2f4	#395587	#395587	#fbfbff	#fbfbff	#8d8d91	#8d8d91
#bcd1f7	#bcd1f7	#2a3f65	#2a3f65	#fcfcff	#fcfcff	#6a6a6d	#6a6a6d
#d2e0f9	#d2e0f9	#1c2a43	#1c2a43	#fdfdff	#fdfdff	#464648	#464648
#e8effc	#e8effc	#0e1521	#0e1521	#fefeff	#fefeff	#232324	#232324
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbe cornflowerblue und Farbe ghostwhite

Wechsel der Textfarbe bei Hover mit Befehl li

Die Textfarbe soll sich von Farbe cornflowerblue auf Farbe ghostwhite ändern, wenn man mit der Maus auf <li> zeigt. Bereiten wir zunächst eine Darstellung von <li> in Farbe cornflowerblue vor.

Wir legen z.B. bei <li> die Textfarbe auf Farbe cornflowerblue fest. Die Hintergrundfarbe verändern wir nicht. Die Schriftart ändern wir auf monospace und ändern die Größe der Schrift auf 11pt.

<style type="text/css"><!--
  li { 
    color: cornflowerblue; 
    font-size: 11pt; 
    font-family: monospace;
  }
//-->
</style>

Nun fordern wir, dass sich bei Hover die Textfarbe zu ghostwhite ändert.

<style type="text/css"><!--
  li: hover { 
    color: ghostwhite;
  }
//-->
</style>

Weiteres zum Thema lesen Sie in Listen und Glossare in HTML. Weiteres zum hier genutzten Tag li ist in der HTML Referenz bei <li> gezeigt.

Text- und Unterstreichungsfarben mit HTML-Befehl acronym

Bei diesem Beispiel ändern wir die Textfarbe von <acronym> auf Farbe ghostwhite und lassen die Hintergrundfarbe unverändert. Die Schriftart setzen wir auf courier new. Die Schriftgröße verringern wir auf 86%. Wir unterstreichen den Inhalt von <acronym> mit Hilfe eines gestrichelten Rahmens mit 2 Punkte Dicke in Farbe cornflowerblue. In HTML geht dies kaum. Daher nutzen wir hier CSS.

<style type="text/css"><!--
  acronym { 
    color: ghostwhite; 
    font-size: 86%; 
    border-bottom-width: 2pt; 
    font-family: courier new; 
    border-bottom-color: cornflowerblue; 
    border-bottom-style: dashed;
  }
//-->
</style>

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

Der Tag acronym ist in der HTML Referenz bei <acronym> gezeigt.