Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #4682b4 und Farbwert #f8f8ff

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 #4682b4			Schriftfarbwert #f8f8ff
Detail	:	Hintergrund #4682b4	Detail	:	Schrift #f8f8ff
Farbwert	:	#4682b4	Farbwert	:	#f8f8ff
Farbe	:	steelblue	Farbe	:	ghostwhite
HTML	:	#4682b4	HTML	:	#f8f8ff
HTML (Wert)	:	#4682b4	HTML (Wert)	:	#f8f8ff
CSS	:	#4682b4	CSS	:	#f8f8ff
CSS (Wert)	:	#4682b4	CSS (Wert)	:	#f8f8ff
CSS (kürzest)	:	#4682b4	CSS (kürzest)	:	#f8f8ff
CSS (RGB)	:	rgb(70,130,180)	CSS (RGB)	:	rgb(248,248,255)
CSS (%RGB)	:	rgb(27%,50%,70%)	CSS (%RGB)	:	rgb(97%,97%,100%)

Verlauf Hintergrundfarbwert #4682b4 nach Schriftfarbwert #f8f8ff
#4682b4	#5f92be	#78a3c9	#92b4d4	#abc5de	#c5d6e9	#dee7f4	#f8f8ff
#4682b4	#5f92be	#78a3c9	#92b4d4	#abc5de	#c5d6e9	#dee7f4	#f8f8ff

Kombination von #4682b4 und #f8f8ff
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 vestibulum tristique erat, ac interdum justo cursus in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante.				Auf Hintergrund #4682b4 ist #f8f8ff ungeeignet. Zwar ist der Helligkeitsunterschied gut, die Farben selbst sind jedoch zu ähnlich. Die Ähnlichkeit der Farben #f8f8ff und #4682b4 ergibt sich zu 81.50%. Die Lesbarkeit dieser Kombination von Farben liegt damit bei 18.50%.

Hintergrundfarbwert #4682b4				Schriftfarbwert #f8f8ff
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#4682b4	#4682b4	#4682b4	#4682b4	#f8f8ff	#f8f8ff	#f8f8ff	#f8f8ff
#6093be	#6093be	#3c6f9a	#3c6f9a	#f9f9ff	#f9f9ff	#d4d4da	#d4d4da
#7aa5c9	#7aa5c9	#325c80	#325c80	#fafaff	#fafaff	#b1b1b6	#b1b1b6
#95b7d4	#95b7d4	#284a66	#284a66	#fbfbff	#fbfbff	#8d8d91	#8d8d91
#afc9de	#afc9de	#1e374d	#1e374d	#fcfcff	#fcfcff	#6a6a6d	#6a6a6d
#cadbe9	#cadbe9	#142533	#142533	#fdfdff	#fdfdff	#464648	#464648
#e4edf4	#e4edf4	#0a1219	#0a1219	#fefeff	#fefeff	#232324	#232324
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #4682b4 und Farbwert #f8f8ff

Hintergrund/Text-Kombination mit HTML-Tag h5

Mit Tag <h5> wird eine Überschrift der 5. Stufe erzeugt. Diese kann man farblich gestalten.

Wir ändern bei diesem Beispiel die Textfarbe von <h5> auf Farbwert #f8f8ff und die Hintergrundfarbe von <h5> auf Farbwert #4682b4. Die Schriftart setzen wir auf verdana und setzen die Schriftgröße auf 9px.

<style type="text/css"><!--
  h5 { 
    font-size:9px; 
    color:#f8f8ff; 
    background-color:#4682b4; 
    font-family:verdana;
  }
//-->
</style>

Weiteres zu h5 können Sie in Grundlegende Gestaltungselemente in HTML lesen. Einzelheiten vom hier genutzten HTML-Tag h5 sind in der HTML Referenz unter <h5> genau gezeigt.

Wechsel der Umrandung bei Hover mit HTML-Befehl abbr

Die Rahmenfarbe soll sich von Farbwert #4682b4 auf Farbwert #f8f8ff ändern, wenn man mit der Maus auf <abbr> zeigt. Wir bereiten zunächst eine Darstellung von <abbr> in Farbwert #4682b4 vor.

In diesem Beispiel umranden wir <abbr> mit einem 4 Pixel dicken, herausstehenden Rahmen in Farbwert #4682b4.

<style type="text/css"><!--
  abbr { border:4px outset #4682b4; }
//-->
</style>

Nun stellen wir ein, dass sich bei Mausberührung die Rahmenfarbe auf #f8f8ff ändert.

<style type="text/css"><!--
  abbr: hover { 
    border-color: #f8f8ff;
  }
//-->
</style>

Zur Beschreibung des hier gezeigten HTML-Befehl <abbr>.