Ressourcen: 120 HTML Farbnamen - Kombination von Farbwert #ba55d3 und Farbwert #f0ffff

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 #ba55d3			Schriftfarbwert #f0ffff
Detail	:	Hintergrund #ba55d3	Detail	:	Schrift #f0ffff
Farbwert	:	#ba55d3	Farbwert	:	#f0ffff
Farbe	:	mediumorchid	Farbe	:	azure
HTML	:	#ba55d3	HTML	:	#f0ffff
HTML (Wert)	:	#ba55d3	HTML (Wert)	:	#f0ffff
CSS	:	#ba55d3	CSS	:	#f0ffff
CSS (Wert)	:	#ba55d3	CSS (Wert)	:	#f0ffff
CSS (kürzest)	:	#ba55d3	CSS (kürzest)	:	#f0ffff
CSS (RGB)	:	rgb(186,85,211)	CSS (RGB)	:	rgb(240,255,255)
CSS (%RGB)	:	rgb(72%,33%,82%)	CSS (%RGB)	:	rgb(94%,100%,100%)

Verlauf Hintergrundfarbwert #ba55d3 nach Schriftfarbwert #f0ffff
#ba55d3	#c16dd9	#c985df	#d19de5	#d8b6ec	#e0cef2	#e8e6f8	#f0ffff
#ba55d3	#c16dd9	#c985df	#d19de5	#d8b6ec	#e0cef2	#e8e6f8	#f0ffff

Kombination von #ba55d3 und #f0ffff
Cras vestibulum tristique erat, ac interdum justo cursus in. Cras id velit ante. Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque.				Die Ähnlichkeit von #f0ffff und #ba55d3 beträgt 81.72%. Die Lesbarkeit dieser Kombination liegt damit bei 18.28%. Auf Hintergrund #ba55d3 ist #f0ffff ungeeignet, da weder der Helligkeitsunterschied noch der Farbunterschied geeignet sind.

Hintergrundfarbwert #ba55d3				Schriftfarbwert #f0ffff
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ba55d3	#ba55d3	#ba55d3	#ba55d3	#f0ffff	#f0ffff	#f0ffff	#f0ffff
#c36dd9	#c36dd9	#9f48b4	#9f48b4	#f2ffff	#f2ffff	#cddada	#cddada
#cd85df	#cd85df	#843c96	#843c96	#f4ffff	#f4ffff	#abb6b6	#abb6b6
#d79de5	#d79de5	#6a3078	#6a3078	#f6ffff	#f6ffff	#899191	#899191
#e1b6ec	#e1b6ec	#4f245a	#4f245a	#f8ffff	#f8ffff	#666d6d	#666d6d
#ebcef2	#ebcef2	#35183c	#35183c	#faffff	#faffff	#444848	#444848
#f5e6f8	#f5e6f8	#1a0c1e	#1a0c1e	#fcffff	#fcffff	#222424	#222424
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #ba55d3 und Farbwert #f0ffff

Hintergrund/Text-Kombination von Befehl p

Hier ändern wir die Textfarbe von <p> auf Farbwert #f0ffff und die Hintergrundfarbe von <p> auf Farbwert #ba55d3. Die Schriftart setzen wir auf sans-serif. Als Schriftgröße wählen wir 118%.

<style type="text/css"><!--
  p { 
    color: #f0ffff; 
    background-color: #ba55d3; 
    font-family: sans-serif; 
    font-size: 118%;
  }
//-->
</style>

Weiteres zum Thema finden Sie in Grundlegende Gestaltungselemente in HTML. Mehr zum HTML-Tag <p>.

Wechsel der Hintergrundfarbe bei Hover mit Befehl h4

Mit HTML-Tag <h4> wird eine Überschrift der 4. Stufe erzeugt und kann hervorgehoben und farblich gestaltet werden.

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

Wir setzen in diesem Beispiel die Hintergrundfarbe von <h4> auf Farbwert #ba55d3. Die Textfarbe behalten wir bei. Die Schriftart setzen wir auf arial und ändern die Größe der Schrift auf 9pt.

<style type="text/css"><!--
  h4 { 
    background-color:#ba55d3; 
    font-size:9pt; 
    font-family:arial;
  }
//-->
</style>

Nun fordern wir, dass bei Mausberührung die Hintergrundfarbe auf #f0ffff geändert wird.

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

Weiteres zu h4 können Sie in Grundlegende Gestaltungselemente in HTML finden. Einzelheiten vom HTML-Befehl <h4>.