how to set html color input values to div colors on click
<p>If div is clicked, html5 color inputs values should set to clicked div color and background color values.</p>

<p>I tried code</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
  $("#changeMe").on('click', function() {
    $('#designer-javascript-color').val($(this).css("color"));
    $('#designer-javascript-backcolor').val($(this).css("background-color"));

  });

});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>Selected item color:
&lt;input type="color" id="designer-javascript-color" /&gt;
&lt;br&gt;Selected item background color:
&lt;input type="color" id="designer-javascript-backcolor" /&gt;


&lt;br/&gt;

&lt;div id="changeMe" style='color:white;background-color: blue'&gt;

  click here&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>After clicking in click me both inputs have still black colors.
How to fix this so that white and blue colors apper in inputs ?</p>

<p>Testcase is at <a href="http://jsfiddle.net/bpc2w43w/" rel="nofollow">http://jsfiddle.net/bpc2w43w/</a></p>