Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #f5f5dc und Farbwert #fffacd

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 #f5f5dc			Schriftfarbwert #fffacd
Detail	:	Hintergrund #f5f5dc	Detail	:	Schrift #fffacd
Farbwert	:	#f5f5dc	Farbwert	:	#fffacd
Farbe	:	beige	Farbe	:	lemonchiffon
HTML	:	#f5f5dc	HTML	:	#fffacd
HTML (Wert)	:	#f5f5dc	HTML (Wert)	:	#fffacd
CSS	:	#f5f5dc	CSS	:	#fffacd
CSS (Wert)	:	#f5f5dc	CSS (Wert)	:	#fffacd
CSS (kürzest)	:	#f5f5dc	CSS (kürzest)	:	#fffacd
CSS (RGB)	:	rgb(245,245,220)	CSS (RGB)	:	rgb(255,250,205)
CSS (%RGB)	:	rgb(96%,96%,86%)	CSS (%RGB)	:	rgb(100%,98%,80%)

Verlauf Hintergrundfarbwert #f5f5dc nach Schriftfarbwert #fffacd
#f5f5dc	#f6f5d9	#f7f6d7	#f9f7d5	#faf7d3	#fcf8d1	#fdf9cf	#fffacd
#f5f5dc	#f6f5d9	#f7f6d7	#f9f7d5	#faf7d3	#fcf8d1	#fdf9cf	#fffacd

Kombination von #f5f5dc und #fffacd
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Cras id velit ante. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Die Ähnlichkeit von #fffacd und #f5f5dc ergibt sich zu 95.03%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 4.97%. #fffacd eignet sich nicht als Schriftfarbe auf Hintergrund #f5f5dc. Sowohl Helligkeit als auch die Farben sind sich zu ähnlich.

Hintergrundfarbwert #f5f5dc				Schriftfarbwert #fffacd
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#f5f5dc	#f5f5dc	#f5f5dc	#f5f5dc	#fffacd	#fffacd	#fffacd	#fffacd
#f6f6e1	#f6f6e1	#d2d2bc	#d2d2bc	#fffad4	#fffad4	#dad6af	#dad6af
#f7f7e6	#f7f7e6	#afaf9d	#afaf9d	#fffbdb	#fffbdb	#b6b292	#b6b292
#f9f9eb	#f9f9eb	#8c8c7d	#8c8c7d	#fffce2	#fffce2	#918e75	#918e75
#fafaf0	#fafaf0	#69695e	#69695e	#fffce9	#fffce9	#6d6b57	#6d6b57
#fcfcf5	#fcfcf5	#46463e	#46463e	#fffdf0	#fffdf0	#48473a	#48473a
#fdfdfa	#fdfdfa	#23231f	#23231f	#fffef7	#fffef7	#24231d	#24231d
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #f5f5dc und Farbwert #fffacd

Text- und Unterstreichungsfarben mit HTML-Befehl caption

Bei diesem Beispiel ändern wir die Textfarbe von <caption> auf Farbwert #fffacd und lassen die Hintergrundfarbe unverändert. Die Schriftart ändern wir auf arial und ändern die Schriftgröße auf 13px. Wir unterstreichen den Inhalt von <caption> mit Hilfe eines herausstehenden Rahmens mit 3 Punkte Dicke in Farbwert #f5f5dc. Mit HTML geht das kaum. Deshalb verwenden wir CSS.

<style type="text/css"><!--
  caption { 
    color: #fffacd; 
    border-bottom-style: outset; 
    border-bottom-color: #f5f5dc; 
    font-family: arial; 
    font-size: 13px; 
    border-bottom-width: 3pt;
  }
//-->
</style>

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

Mehr zum Thema können Sie in Tabellen in HTML nachlesen. Weiteres zum hier verwendeten HTML-Tag caption ist in der HTML Referenz bei <caption> genau beschrieben.

Wechsel der Hintergrundfarbe bei Hover bei HTML-Tag h3

Eine Überschrift der 3. Stufe wird mit HTML-Tag <h3> gesetzt. Diese können Sie hervorheben und farblich gestalten.

Die Hintergrundfarbe soll sich von Farbwert #f5f5dc auf Farbwert #fffacd ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <h3> in Farbwert #f5f5dc vor.

Wir setzen in diesem Beispiel bei <h3> die Hintergrundfarbe auf Farbwert #f5f5dc. Zwar behalten wir die Textfarbe bei, setzen jedoch die Schriftart auf verdana. Die Schriftgröße vergrößern wir auf 120%.

<style type="text/css"><!--
  h3 { 
    background-color: #f5f5dc; 
    font-family: verdana; 
    font-size: 120%;
  }
//-->
</style>

Jetzt fordern wir, dass sich bei Hover die Hintergrundfarbe zu #fffacd ändert.

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

Weiteres zu h3 finden Sie in Grundlegende Gestaltungselemente in HTML. Beschreibung des hier genutzten HTML-Befehl <h3>.