Ressourcen: 137 HTML Farbnamen - Kombination von Farbwert #f8f8ff und Farbwert #00ced1

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 #f8f8ff			Schriftfarbwert #00ced1
Detail	:	Hintergrund #f8f8ff	Detail	:	Schrift #00ced1
Farbwert	:	#f8f8ff	Farbwert	:	#00ced1
Farbe	:	ghostwhite	Farbe	:	darkturquoise
HTML	:	#f8f8ff	HTML	:	#00ced1
HTML (Wert)	:	#f8f8ff	HTML (Wert)	:	#00ced1
CSS	:	#f8f8ff	CSS	:	#00ced1
CSS (Wert)	:	#f8f8ff	CSS (Wert)	:	#00ced1
CSS (kürzest)	:	#f8f8ff	CSS (kürzest)	:	#00ced1
CSS (RGB)	:	rgb(248,248,255)	CSS (RGB)	:	rgb(0,206,209)
CSS (%RGB)	:	rgb(97%,97%,100%)	CSS (%RGB)	:	rgb(0%,80%,81%)

Verlauf Hintergrundfarbwert #f8f8ff nach Schriftfarbwert #00ced1
#f8f8ff	#d4f2f8	#b1ecf1	#8de6eb	#6ae0e4	#46dade	#23d4d7	#00ced1
#f8f8ff	#d4f2f8	#b1ecf1	#8de6eb	#6ae0e4	#46dade	#23d4d7	#00ced1

Kombination von #f8f8ff und #00ced1
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. Lorem ipsum dolor sit amet, consectetur adipiscing elit.				Auf Hintergrund #f8f8ff ist #00ced1 ungeeignet, da die Unterschiede in der Helligkeit und Farbe nicht ausreichend sind. Die Ähnlichkeit von #00ced1 und #f8f8ff beträgt 91.20%. Die Lesbarkeit dieser Farbkombination bewerte ich mit 8.80%.

Hintergrundfarbwert #f8f8ff				Schriftfarbwert #00ced1
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#f8f8ff	#f8f8ff	#f8f8ff	#f8f8ff	#00ced1	#00ced1	#00ced1	#00ced1
#f9f9ff	#f9f9ff	#d4d4da	#d4d4da	#24d5d7	#24d5d7	#00b0b3	#00b0b3
#fafaff	#fafaff	#b1b1b6	#b1b1b6	#48dcde	#48dcde	#009395	#009395
#fbfbff	#fbfbff	#8d8d91	#8d8d91	#6de3e4	#6de3e4	#007577	#007577
#fcfcff	#fcfcff	#6a6a6d	#6a6a6d	#91eaeb	#91eaeb	#005859	#005859
#fdfdff	#fdfdff	#464648	#464648	#b6f1f1	#b6f1f1	#003a3b	#003a3b
#fefeff	#fefeff	#232324	#232324	#daf8f8	#daf8f8	#001d1d	#001d1d
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #f8f8ff und Farbwert #00ced1

Wechsel der Unterstreichung bei Hover von HTML-Befehl blockquote

Die Farbe der Unterstreichung soll sich von Farbwert #f8f8ff auf Farbwert #00ced1 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Darstellung von <blockquote> in Farbwert #f8f8ff vor.

Hier unterstreichen wir <blockquote> mit einem gestrichelten Rahmen mit 1 Pixel Dicke in Farbwert #f8f8ff.

<style type="text/css"><!--
  blockquote { border-bottom:1px dashed #f8f8ff; }
//-->
</style>

Jetzt fordern wir, dass bei Berührung mit der Maus die Unterstreichungsfarbe auf #00ced1 gesetzt wird.

<style type="text/css"><!--
  blockquote: hover { 
    border-bottom-color: #00ced1;
  }
//-->
</style>

Die Idee ist hierbei, unabhängige Formatierungen für Inhalt und Unterstreichung zu verwenden. Öfter sieht man diesen Effekt bei Links. Der Text ist in einer Farbe. Die Unterstreichung in einer anderen. Das ist aber keine normale Unterstreichung, der Text selbst ist gar nicht unterstrichen. Sie wird mit einem Rahmen simuliert und dieser ist unabhängig vom Text.

Weiteres zu blockquote können Sie in Blockorientierte Elemente in HTML erfahren. Einzelheiten des Tag <blockquote>.

Wechsel der Hintergrundfarbe bei Hover bei HTML-Tag s

Die Hintergrundfarbe soll sich von Farbwert #f8f8ff auf Farbwert #00ced1 ändern, wenn man mit der Maus auf <s> zeigt. Bereiten wir zunächst eine Formatierung von <s> in Farbwert #f8f8ff vor.

Wir legen in diesem Beispiel Farbwert #f8f8ff als Hintergrundfarbe von <s> fest. Die Schriftgröße setzen wir auf 9pt.

<style type="text/css"><!--
  s { 
    font-size: 9pt; 
    background-color: #f8f8ff;
  }
//-->
</style>

Nun fordern wir, dass bei Mausberührung die Hintergrundfarbe auf #00ced1 gesetzt wird.

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

Weiteres zum Thema s lesen Sie in Text in HTML. Möglichkeiten des hier verwendeten HTML-Tag <s>.