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
– Bindrid, Commented Jan 24, 2016 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
– Andrus, Commented Jan 24, 2016 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: stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb — Lex Lustor
– Lex Lustor, Commented Jan 24, 2016 at 21:12

gaetanoM · Accepted Answer · 2016-01-24 21:22:02Z

3

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>

answered Jan 24, 2016 at 21:22

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:59:11Z

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 · Accepted Answer · 2016-01-24 21:24:02Z

0

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
  });
});

edited Jan 24, 2016 at 21:24

answered Jan 24, 2016 at 21:17

Bonny Mahajan

811 silver badge11 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related