Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #5f9ea0 und Farbwert #f0fff0

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 #5f9ea0			Schriftfarbwert #f0fff0
Detail	:	Hintergrund #5f9ea0	Detail	:	Schrift #f0fff0
Farbwert	:	#5f9ea0	Farbwert	:	#f0fff0
Farbe	:	cadetblue	Farbe	:	honeydew
HTML	:	#5f9ea0	HTML	:	#f0fff0
HTML (Wert)	:	#5f9ea0	HTML (Wert)	:	#f0fff0
CSS	:	#5f9ea0	CSS	:	#f0fff0
CSS (Wert)	:	#5f9ea0	CSS (Wert)	:	#f0fff0
CSS (kürzest)	:	#5f9ea0	CSS (kürzest)	:	#f0fff0
CSS (RGB)	:	rgb(95,158,160)	CSS (RGB)	:	rgb(240,255,240)
CSS (%RGB)	:	rgb(37%,61%,62%)	CSS (%RGB)	:	rgb(94%,100%,94%)

Verlauf Hintergrundfarbwert #5f9ea0 nach Schriftfarbwert #f0fff0
#5f9ea0	#73abab	#88b9b6	#9dc7c2	#b1d5cd	#c6e3d9	#dbf1e4	#f0fff0
#5f9ea0	#73abab	#88b9b6	#9dc7c2	#b1d5cd	#c6e3d9	#dbf1e4	#f0fff0

Kombination von #5f9ea0 und #f0fff0
Cras id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit von #f0fff0 und #5f9ea0 beträgt 85.98%. Die Lesbarkeit dieser Farbkombination liegt damit bei 14.02%. Auf Hintergrund #5f9ea0 ist #f0fff0 ungeeignet, da die Unterschiede in der Helligkeit und Farbe nicht ausreichend sind.

Hintergrundfarbwert #5f9ea0				Schriftfarbwert #f0fff0
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#5f9ea0	#5f9ea0	#5f9ea0	#5f9ea0	#f0fff0	#f0fff0	#f0fff0	#f0fff0
#75abad	#75abad	#518789	#518789	#f2fff2	#f2fff2	#cddacd	#cddacd
#8cb9bb	#8cb9bb	#437072	#437072	#f4fff4	#f4fff4	#abb6ab	#abb6ab
#a3c7c8	#a3c7c8	#365a5b	#365a5b	#f6fff6	#f6fff6	#899189	#899189
#bad5d6	#bad5d6	#284344	#284344	#f8fff8	#f8fff8	#666d66	#666d66
#d1e3e3	#d1e3e3	#1b2d2d	#1b2d2d	#fafffa	#fafffa	#444844	#444844
#e8f1f1	#e8f1f1	#0d1616	#0d1616	#fcfffc	#fcfffc	#222422	#222422
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #5f9ea0 und Farbwert #f0fff0

Wechsel der Hintergrundfarbe bei Hover von Tag blockquote

Die Hintergrundfarbe soll sich von Farbwert #5f9ea0 auf Farbwert #f0fff0 ändern, wenn man mit der Maus auf <blockquote> zeigt. Wir bereiten zunächst die Formatierung von <blockquote> in Farbwert #5f9ea0 vor.

Wir ändern z.B. bei <blockquote> die Hintergrundfarbe auf Farbwert #5f9ea0. Die Textfarbe behalten wir bei, ändern jedoch die Schriftart auf arial.

<style type="text/css"><!--
  blockquote { 
    font-family: arial; 
    background-color: #5f9ea0;
  }
//-->
</style>

Jetzt fordern wir, dass bei Mausberührung die Hintergrundfarbe auf #f0fff0 gesetzt wird.

<style type="text/css"><!--
  blockquote: hover { 
    background-color: #f0fff0;
  }
//-->
</style>

Weiteres zu blockquote finden Sie in Blockorientierte Elemente in HTML. Möglichkeiten des hier verwendeten HTML-Befehl blockquote lesen Sie in der HTML Referenz unter <blockquote>.

Füllen und Umranden bei Befehl h6

Eine Überschrift wird mit Tag <h6> gesetzt. Diese kann man farblich gestalten und hervorheben.

Bei diesem Beispiel umranden wir <h6> mit einem gezahnten, 4 Punkte dicken Rahmen in Farbwert #f0fff0 . Den Hintergrund von <h6> färben wir entsprechend mit Farbwert #5f9ea0. In HTML ist dies nicht machbar. Wir verwenden daher CSS zur Formatierung.

<style type="text/css"><!--
  h6 { 
    background-color:#5f9ea0; 
    border-width:4pt; 
    border-style:ridge; 
    border-color:#f0fff0;
  }
//-->
</style>

Weiteres zu h6 erfahren Sie in Grundlegende Gestaltungselemente in HTML. Weiteres zum HTML-Tag h6 ist in der HTML Referenz unter <h6> genau beschrieben.