Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #fffafa und Farbe indigo

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 #fffafa			Schriftfarbe indigo
Detail	:	Hintergrund #fffafa	Detail	:	Schrift indigo
Farbwert	:	#fffafa	Farbe	:	indigo
Farbe	:	snow	Farbwert	:	#4b0082
HTML	:	#fffafa	HTML	:	indigo
HTML (Wert)	:	#fffafa	HTML (Wert)	:	#4b0082
CSS	:	#fffafa	CSS	:	indigo
CSS (Wert)	:	#fffafa	CSS (Wert)	:	#4b0082
CSS (kürzest)	:	#fffafa	CSS (kürzest)	:	#4b0082
CSS (RGB)	:	rgb(255,250,250)	CSS (RGB)	:	rgb(75,0,130)
CSS (%RGB)	:	rgb(100%,98%,98%)	CSS (%RGB)	:	rgb(29%,0%,50%)

Verlauf Hintergrundfarbwert #fffafa nach Schriftfarbe indigo
#fffafa	#e5d6e8	#cbb2d7	#b18ec6	#986bb5	#7e47a4	#642393	#4b0082
#fffafa	#e5d6e8	#cbb2d7	#b18ec6	#986bb5	#7e47a4	#642393	#4b0082

Kombination von #fffafa und indigo
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 id velit ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum tristique erat, ac interdum justo cursus in.				Die Ähnlichkeit der Farben indigo und #fffafa ergibt sich zu 40.37%. Die Lesbarkeit dieser Kombination von Farben bewerte ich mit 59.63%. indigo eignet sich als Schriftfarbe auf Hintergrund #fffafa. Der Unterschied in den Helligkeiten ist ok, der Farbenunterschied ebenso.

Hintergrundfarbwert #fffafa				Schriftfarbe indigo
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#fffafa	#fffafa	#fffafa	#fffafa	#4b0082	#4b0082	#4b0082	#4b0082
#fffafa	#fffafa	#dad6d6	#dad6d6	#642493	#642493	#40006f	#40006f
#fffbfb	#fffbfb	#b6b2b2	#b6b2b2	#7e48a5	#7e48a5	#35005c	#35005c
#fffcfc	#fffcfc	#918e8e	#918e8e	#986db7	#986db7	#2a004a	#2a004a
#fffcfc	#fffcfc	#6d6b6b	#6d6b6b	#b191c9	#b191c9	#200037	#200037
#fffdfd	#fffdfd	#484747	#484747	#cbb6db	#cbb6db	#150025	#150025
#fffefe	#fffefe	#242323	#242323	#e5daed	#e5daed	#0a0012	#0a0012
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #fffafa und Farbe indigo

Wechsel der Unterstreichung bei Hover bei Befehl em

Die Unterstreichungsfarbe soll sich von Farbwert #fffafa auf Farbe indigo ändern, wenn man mit der Maus auf <em> zeigt. Bereiten wir zunächst eine Darstellung von <em> in Farbwert #fffafa vor.

Hier unterstreichen wir <em> mit Hilfe eines gestrichelten Rahmens mit 4 Pixel Dicke in Farbwert #fffafa.

<style type="text/css"><!--
  em { 
    border-bottom-width:4px; 
    border-bottom-style:dashed; 
    border-bottom-color:#fffafa;
  }
//-->
</style>

Nun stellen wir ein, dass sich bei Mausberührung die Unterstreichungsfarbe zu indigo ändert.

<style type="text/css"><!--
  em:hover { 
    border-bottom-color:indigo;
  }
//-->
</style>

Die Idee ist hierbei, voneinander unabhängige Formatierungen für Inhalt und Unterstreichung zu haben. Manchmal sehen Sie diesen Effekt bei Hyperlinks. Der Text wird in einer Farbe dargestellt. Und die Unterstreichung in einer anderen. Das ist jedoch keine wirkliche Unterstreichung, der Text hat keine Unterstreichung. Sie wird mit einem Rahmen simuliert und ist unabhängig vom Text.

Weiteres zum Thema erfahren Sie in Text in HTML. Möglichkeiten vom Befehl em sind in der HTML Referenz unter <em> ausführlich beschrieben.

Wechsel der Hintergrundfarbe bei Hover von HTML-Befehl address

Die Hintergrundfarbe soll sich von Farbwert #fffafa auf Farbe indigo ändern, wenn man mit der Maus auf <address> zeigt. Wir bereiten zunächst eine Formatierung von <address> in Farbwert #fffafa vor.

Wir legen als Beispiel die Hintergrundfarbe von <address> auf Farbwert #fffafa fest und setzen die Schriftgröße auf 13px.

<style type="text/css"><!--
  address { 
    font-size: 13px; 
    background-color: #fffafa;
  }
//-->
</style>

Jetzt stellen wir ein, dass bei Mausberührung die Hintergrundfarbe auf indigo geändert wird.

<style type="text/css"><!--
  address:hover { 
    background-color:indigo;
  }
//-->
</style>

Weiteres zu address können Sie in Blockorientierte Elemente in HTML nachsehen. Einzelheiten des hier verwendeten HTML-Befehl address erfahren Sie in der HTML Referenz unter <address>.