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

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 #adff2f
Detail	:	Hintergrund #ba55d3	Detail	:	Schrift #adff2f
Farbwert	:	#ba55d3	Farbwert	:	#adff2f
Farbe	:	mediumorchid	Farbe	:	greenyellow
HTML	:	#ba55d3	HTML	:	#adff2f
HTML (Wert)	:	#ba55d3	HTML (Wert)	:	#adff2f
CSS	:	#ba55d3	CSS	:	#adff2f
CSS (Wert)	:	#ba55d3	CSS (Wert)	:	#adff2f
CSS (kürzest)	:	#ba55d3	CSS (kürzest)	:	#adff2f
CSS (RGB)	:	rgb(186,85,211)	CSS (RGB)	:	rgb(173,255,47)
CSS (%RGB)	:	rgb(72%,33%,82%)	CSS (%RGB)	:	rgb(67%,100%,18%)

Verlauf Hintergrundfarbwert #ba55d3 nach Schriftfarbwert #adff2f
#ba55d3	#b86dbb	#b685a4	#b49d8c	#b2b675	#b0ce5d	#aee646	#adff2f
#ba55d3	#b86dbb	#b685a4	#b49d8c	#b2b675	#b0ce5d	#aee646	#adff2f

Kombination von #ba55d3 und #adff2f
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 vestibulum tristique erat, ac interdum justo cursus in. Suspendisse augue erat, auctor ut ultricies non, facilisis sed neque. Cras id velit ante.				#adff2f eignet sich nicht als Schriftfarbe auf Hintergrund #ba55d3, weil sich die Helligkeit und Farben zu ähnlich sind. Die Ähnlichkeit von #adff2f und #ba55d3 beträgt 84.70%. Die Lesbarkeit dieser Farbkombination ergibt sich zu 15.30%.

Hintergrundfarbwert #ba55d3				Schriftfarbwert #adff2f
Verlauf nach Weiß		Verlauf nach Schwarz		Verlauf nach Weiß		Verlauf nach Schwarz
#ba55d3	#ba55d3	#ba55d3	#ba55d3	#adff2f	#adff2f	#adff2f	#adff2f
#c36dd9	#c36dd9	#9f48b4	#9f48b4	#b8ff4c	#b8ff4c	#94da28	#94da28
#cd85df	#cd85df	#843c96	#843c96	#c4ff6a	#c4ff6a	#7bb621	#7bb621
#d79de5	#d79de5	#6a3078	#6a3078	#d0ff88	#d0ff88	#62911a	#62911a
#e1b6ec	#e1b6ec	#4f245a	#4f245a	#dbffa5	#dbffa5	#4a6d14	#4a6d14
#ebcef2	#ebcef2	#35183c	#35183c	#e7ffc3	#e7ffc3	#31480d	#31480d
#f5e6f8	#f5e6f8	#1a0c1e	#1a0c1e	#f3ffe1	#f3ffe1	#182406	#182406
#ffffff	#ffffff	#000000	#000000	#ffffff	#ffffff	#000000	#000000

Beispiele zur Kombination von Farbwert #ba55d3 und Farbwert #adff2f

Hintergrund/Text-Kombination von Tag blockquote

Wir ändern in diesem Beispiel die Textfarbe von <blockquote> auf Farbwert #adff2f und die Hintergrundfarbe von <blockquote> auf Farbwert #ba55d3. Die Schriftart setzen wir auf arial und ändern die Schriftgröße auf 13px.

<style type="text/css"><!--
  blockquote { 
    color: #adff2f; 
    font-size: 13px; 
    font-family: arial; 
    background-color: #ba55d3;
  }
//-->
</style>

Weiteres zum Thema lesen Sie in Blockorientierte Elemente in HTML. Möglichkeiten des Befehl blockquote sind in der HTML Referenz bei <blockquote> ausführlich beschrieben.

Wechsel der Textfarbe bei Hover mit Tag a

Einen Hyperlink erzeugen Sie mit Tag <a>. Diesen können Sie hervorheben und farblich gestalten.

Die Textfarbe soll sich von Farbwert #ba55d3 auf Farbwert #adff2f ändern, wenn man mit der Maus darauf zeigt. Wir bereiten zunächst eine Formatierung von <a> in Farbwert #ba55d3 vor.

Wir legen z.B. die Textfarbe von <a> auf Farbwert #ba55d3 fest und setzen die Größe der Schrift auf 119%.

<style type="text/css"><!--
  a { 
    color:#ba55d3; 
    font-size:119%;
  }
//-->
</style>

Jetzt fordern wir, dass bei Mausberührung die Textfarbe auf #adff2f geändert wird.

<style type="text/css"><!--
  a:hover { 
    color:#adff2f;
  }
//-->
</style>

Weiteres zu a können Sie in Verweise und Protokolle in HTML nachlesen. Die Beschreibung vom hier verwendeten HTML-Befehl a finden Sie in der HTML Referenz unter <a>.