Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #00fa9a und Farbwert #f5f5f5

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 #00fa9a			Schriftfarbwert #f5f5f5
Detail	:	Hintergrund #00fa9a	Detail	:	Schrift #f5f5f5
Farbwert	:	#00fa9a	Farbwert	:	#f5f5f5
Farbe	:	mediumspringgreen	Farbe	:	whitesmoke
HTML	:	#00fa9a	HTML	:	#f5f5f5
HTML (Wert)	:	#00fa9a	HTML (Wert)	:	#f5f5f5
CSS	:	#00fa9a	CSS	:	#f5f5f5
CSS (Wert)	:	#00fa9a	CSS (Wert)	:	#f5f5f5
CSS (kürzest)	:	#00fa9a	CSS (kürzest)	:	#f5f5f5
CSS (RGB)	:	rgb(0,250,154)	CSS (RGB)	:	rgb(245,245,245)
CSS (%RGB)	:	rgb(0%,98%,60%)	CSS (%RGB)	:	rgb(96%,96%,96%)

Verlauf Hintergrundfarbwert #00fa9a nach Schriftfarbwert #f5f5f5
#00fa9a	#23f9a7	#46f8b4	#69f7c1	#8cf7ce	#aff6db	#d2f5e8	#f5f5f5
#00fa9a	#23f9a7	#46f8b4	#69f7c1	#8cf7ce	#aff6db	#d2f5e8	#f5f5f5

Kombination von #00fa9a und #f5f5f5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras vestibulum tristique erat, ac interdum justo cursus in.				Auf Hintergrund #00fa9a ist #f5f5f5 ungeeignet, weil weder der Helligkeitsunterschied noch der Farbunterschied ausreichend sind. Die Ähnlichkeit der Farben #f5f5f5 und #00fa9a ergibt sich zu 93.94%. Die Lesbarkeit dieser Kombination ergibt sich zu 6.06%.

Hintergrundfarbwert #00fa9a				Schriftfarbwert #f5f5f5
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#00fa9a	#00fa9a	#00fa9a	#00fa9a	#f5f5f5	#f5f5f5	#f5f5f5	#f5f5f5
#24faa8	#24faa8	#00d684	#00d684	#f6f6f6	#f6f6f6	#d2d2d2	#d2d2d2
#48fbb6	#48fbb6	#00b26e	#00b26e	#f7f7f7	#f7f7f7	#afafaf	#afafaf
#6dfcc5	#6dfcc5	#008e58	#008e58	#f9f9f9	#f9f9f9	#8c8c8c	#8c8c8c
#91fcd3	#91fcd3	#006b42	#006b42	#fafafa	#fafafa	#696969	#696969
#b6fde2	#b6fde2	#00472c	#00472c	#fcfcfc	#fcfcfc	#464646	#464646
#dafef0	#dafef0	#002316	#002316	#fdfdfd	#fdfdfd	#232323	#232323
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #00fa9a und Farbwert #f5f5f5

Wechsel der Umrandung bei Hover von HTML-Befehl blockquote

Die Rahmenfarbe soll sich von Farbwert #00fa9a auf Farbwert #f5f5f5 ändern, wenn man mit der Maus auf <blockquote> zeigt. Wir bereiten zunächst die Darstellung von <blockquote> in Farbwert #00fa9a vor.

In diesem Beispiel umranden wir <blockquote> mit einem 5 Pixel dicken, einfallenden Rahmen in Farbwert #00fa9a.

<style type="text/css"><!--
  blockquote { border:5px inset #00fa9a; }
//-->
</style>

Jetzt fordern wir, dass sich bei Berührung mit der Maus die Rahmenfarbe auf #f5f5f5 ändert.

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

Weiteres zum Thema erfahren Sie in Blockorientierte Elemente in HTML. Beschreibung vom hier genutzten HTML-Befehl <blockquote>.

Wechsel der Hintergrundfarbe bei Hover bei HTML-Befehl center

Die Hintergrundfarbe soll sich von Farbwert #00fa9a auf Farbwert #f5f5f5 ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst die Darstellung von <center> in Farbwert #00fa9a vor.

Wir legen zum Beispiel die Hintergrundfarbe von <center> auf Farbwert #00fa9a fest. Zwar behalten wir die Textfarbe bei, setzen jedoch die Schriftart auf courier new und setzen die Schriftgröße auf 13px.

<style type="text/css"><!--
  center { 
    background-color:#00fa9a; 
    font-size:13px; 
    font-family:courier new;
  }
//-->
</style>

Nun stellen wir ein, dass bei Mausberührung die Hintergrundfarbe auf #f5f5f5 gesetzt wird.

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

Mehr zum Thema center können Sie in Grundlegende Gestaltungselemente in HTML nachlesen. Die Beschreibung des hier genutzten Tag center lesen Sie in der HTML Referenz unter <center>.