how to set html color input values to div colors on click

Question

If div is clicked, html5 color inputs values should set to clicked div color and background color values.

I tried code

$(function() {
  $("#changeMe").on('click', function() {
    $('#designer-javascript-color').val($(this).css("color"));
    $('#designer-javascript-backcolor').val($(this).css("background-color"));

  });

});

Selected item color:
<input type="color" id="designer-javascript-color" />
<br>Selected item background color:
<input type="color" id="designer-javascript-backcolor" />


<br/>

<div id="changeMe" style='color:white;background-color: blue'>

  click here</div>

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

Testcase is at http://jsfiddle.net/bpc2w43w/

if I understand you right, you are doing sets on the input boxes when you should be doing gets. — Bindrid, Jan 24 '16 at 20:52
Yes. I want to set color input element values to clicked div color values from div style. Maybe color values from css should converted to #rrggbb or other format for proper setting. — Andrus, Jan 24 '16 at 20:53
jQuery css always return rgb values. See that answer for an example on how to convert rgb to hex, the format that works with input of type color: http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb — Lex Lustor, Jan 24 '16 at 21:12

score 3 · Accepted Answer · answered Jan 24 '16 at 21:22

Convert the rgb value to hex before to use it:

function rgbToHex(rgb) {
  var a = rgb.split("(")[1].split(")")[0].split(",");
  return "#" + a.map(function(x) {
    x = parseInt(x).toString(16);
    return (x.length == 1) ? "0"+x : x;
  }).join("");
}


$(function () {
  $("#changeMe").on('click', function() {
    $('#designer-javascript-color').val(rgbToHex($(this).css("color")));
    $('#designer-javascript-backcolor').val(rgbToHex($(this).css("background-color")));
  });
});

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>

Selected item color: <input type="color" id="designer-javascript-color" />
<br>
Selected item background color:<input type="color" id="designer-javascript-backcolor" />


<br/>

<div id="changeMe" style='color:white;background-color: blue'>

    click here</div>

score 1 · Answer 2 · edited May 23 '17 at 11:59

The value returned from $(this).css('color') and $(this).css('background-color') is a RGB value. Therefore, you need to convert it to a hexadecimal value. Borrowing someone's solution to convert the value, here's a solution to your problem.

$(function() {
        $('#changeMe').on('click', function() {
             $('#designer-javascript-color').val(rgb2hex($(this).css('color')));
             $('#designer-javascript-backcolor').val(rgb2hex($(this).css('background-color')));
        });
});

var hexDigits = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"]; 

//Function to convert hex format to a rgb color
function rgb2hex(rgb) {
   rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
   return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

function hex(x) {
   return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
}

Bonny Mahajan · Answer 3 · 2016-01-24T21:24:02.633

This works

           Selected item color: <input type="color" id="designer-javascript-color" >
    <br>
    Selected item background color:<input type="color" id="designer-javascript-backcolor">


<br/>

<button id="changeMe" style='color:white;background-color: blue'>

click here</button>

Also when you select a color in the selector remember to move the slider on the right side of your color picker so that a lighter shade of your color can be selected.

$("#changeMe").click(function() {
 var a = $("#designer-javascript-color").val();
 var b= $("#designer-javascript-backcolor").val();

  $("#changeMe").css({
  'color' : a,
  'background-color': b
  });
});

how to set html color input values to div colors on click

3 Answers3

Linked