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

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 #f0e68c
Detail	:	Hintergrund #ba55d3	Detail	:	Schrift #f0e68c
Farbwert	:	#ba55d3	Farbwert	:	#f0e68c
Farbe	:	mediumorchid	Farbe	:	khaki
HTML	:	#ba55d3	HTML	:	#f0e68c
HTML (Wert)	:	#ba55d3	HTML (Wert)	:	#f0e68c
CSS	:	#ba55d3	CSS	:	#f0e68c
CSS (Wert)	:	#ba55d3	CSS (Wert)	:	#f0e68c
CSS (kürzest)	:	#ba55d3	CSS (kürzest)	:	#f0e68c
CSS (RGB)	:	rgb(186,85,211)	CSS (RGB)	:	rgb(240,230,140)
CSS (%RGB)	:	rgb(72%,33%,82%)	CSS (%RGB)	:	rgb(94%,90%,54%)

Verlauf Hintergrundfarbwert #ba55d3 nach Schriftfarbwert #f0e68c
#ba55d3	#c169c8	#c97ebe	#d193b4	#d8a7aa	#e0bca0	#e8d196	#f0e68c
#ba55d3	#c169c8	#c97ebe	#d193b4	#d8a7aa	#e0bca0	#e8d196	#f0e68c

Kombination von #ba55d3 und #f0e68c
Aliquam dapibus, lorem sed bibendum consectetur, ligula enim dignissim ligula, a ultrices dolor augue ultrices magna. Cras vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id velit ante.				Die Ähnlichkeit von #f0e68c und #ba55d3 ergibt sich zu 85.34%. Die Lesbarkeit dieser Kombination von Farben ergibt sich zu 14.66%. #f0e68c eignet sich nicht als Schriftfarbe auf Hintergrund #ba55d3, weil sich die Helligkeit und Farben zu ähnlich sind.

Hintergrundfarbwert #ba55d3				Schriftfarbwert #f0e68c
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ba55d3	#ba55d3	#ba55d3	#ba55d3	#f0e68c	#f0e68c	#f0e68c	#f0e68c
#c36dd9	#c36dd9	#9f48b4	#9f48b4	#f2e99c	#f2e99c	#cdc578	#cdc578
#cd85df	#cd85df	#843c96	#843c96	#f4edac	#f4edac	#aba464	#aba464
#d79de5	#d79de5	#6a3078	#6a3078	#f6f0bd	#f6f0bd	#898350	#898350
#e1b6ec	#e1b6ec	#4f245a	#4f245a	#f8f4cd	#f8f4cd	#66623c	#66623c
#ebcef2	#ebcef2	#35183c	#35183c	#faf7de	#faf7de	#444128	#444128
#f5e6f8	#f5e6f8	#1a0c1e	#1a0c1e	#fcfbee	#fcfbee	#222014	#222014
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #ba55d3 und Farbwert #f0e68c

Text- und Unterstreichungsfarben mit Befehl caption

Wir ändern bei diesem Beispiel die Textfarbe von <caption> auf Farbwert #f0e68c. Die Schriftart ändern wir auf sans-serif. Die Schriftgröße erhöhen wir auf 129%. Wir unterstreichen den Inhalt von <caption> mit Hilfe eines gepunkteten Rahmens mit 1 Pixel Dicke in Farbwert #ba55d3. Mit HTML geht dies kaum. Wir verwenden daher CSS zur Formatierung.

<style type="text/css"><!--
  caption { 
    color: #f0e68c; 
    border-bottom: 1px dotted #ba55d3; 
    font-size: 129%; 
    font-family: sans-serif;
  }
//-->
</style>

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

Mehr zum Thema lesen Sie in Tabellen in HTML. Einzelheiten des hier verwendeten HTML-Tag caption sind in der HTML Referenz bei <caption> ausführlich zusammengestellt.

Wechsel der Hintergrundfarbe bei Hover mit Befehl center

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

Wir legen hier Farbwert #ba55d3 als Hintergrundfarbe von <center> fest. Zwar behalten wir die Textfarbe bei, ändern jedoch die Schriftart auf monospace und verringern die Schriftgröße auf 96%:

<style type="text/css"><!--
  center { 
    background-color: #ba55d3; 
    font-family: monospace; 
    font-size: 96%;
  }
//-->
</style>

Jetzt fordern wir, dass bei Berührung mit der Maus die Hintergrundfarbe auf #f0e68c gesetzt wird.

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

Mehr zum Thema finden Sie in Grundlegende Gestaltungselemente in HTML. Einzelheiten des hier verwendeten Tag center finden Sie in der HTML Referenz unter <center>.