77393

mix more than 2 colors together with javascript

Question:

I´m trying to add in JS colors together. I´m sitting on front of this problem for days now. The problem is the colors are in hex code.

Now i´d like to add all the colors together to print and print it out in a div, or something.

Could you show me demo plz how to do it ?

Here is a picture of what i mean:

<img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/HRuDb.jpg" data-original="https://i.stack.imgur.com/HRuDb.jpg" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

The hex code is an <input> type.

Answer1:

As per the comments, I'm not 100% sure what you mean by "mix", but assuming you to want to combine them, you could do so by using a plugin such as <a href="http://www.xarg.org/project/jquery-color-plugin-xcolor/" rel="nofollow">xcolor</a>.

e.g. $.xcolor.additive(color, color) calculates the additive color mix of two colors.

So, you could do something like:

var $inputs = $("input"); // You'll want to make this more specific var color = ""; $inputs.each(function(){ var curColor = this.value; if(color === ""){ color = curColor; } color = $.xcolor.additive(color, curColor); });

Here's a <strong><a href="http://jsfiddle.net/hibbard_eu/jhD54/" rel="nofollow">fiddle</a></strong>

Recommend

  • what will be the sql query for checking same pairs of column values in a table?
  • How to convert a Persian date into a Gregorian date in xcode?
  • start() had already been called. The second call will be ignored.?
  • Centering a specific element among others with flexbox [duplicate]
  • Add Jpanel to Jframe NetBeans
  • How to convert Neo4j Result to GraphJSON
  • Recursion in ASP.NET Core Razor views
  • write text on image and show it to a imageview
  • How to solve “undefined reference to function” error?
  • Certain Arabic text gets incorrectly shown while other Arabic text gets showed normally?
  • Color time-series based on column values in pandas
  • How to change placeholder text in an autocomplete activity of android google place?
  • Geom_jitter colour based on values
  • Angular Bootstrap Carousel Slide Transition not working correctly
  • FileReader+canvas image loading problem
  • Java Scanner input dilemma. Automatically inputs without allowing user to type
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • Sending data from AppleScript to FileMaker records
  • what is the difference between the asp.net mvc application and asp.net web application
  • align graphs with different xlab
  • Return words with double consecutive letters
  • Matrix multiplication with MKL
  • KeystoneJS: Relationships in Admin UI not updating
  • AngularJs get employee from factory
  • trying to dynamically update Highchart column chart but series undefined
  • Benchmarking RAM performance - UWP and C#
  • Load html files in TinyMce
  • Acquiring multiple attributes from .xml file in c#
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • How can I remove ASP.NET Designer.cs files?
  • costura.fody for a dll that references another dll
  • Reading document lines to the user (python)
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • Python/Django TangoWithDjango Models and Databases
  • java string with new operator and a literal