1

I have a spectrum palette and a text box. The text box contains hex value of selected color and is editable. I need to be able to set a color in the palette by providing an appropriate hex value. That is, if I enter a hex value such as #000000, the pointer in the palette should point at black color. How do I achieve this?

Also, instead of hex I should also be able to get it working for R-G-B values.

How can I achieve the two cases in spectrum?

coder
  • 317
  • 1
  • 7
  • 20

2 Answers2

4

There is set method, described in documentation:

Setting the colorpicker programmatically will update the original input.

<input type='text' value='blanchedalmond' name='triggerSet' id='triggerSet' />
<input type='text' placeholder='Enter A Color' id='enterAColor' />
<button id='btnEnterAColor'>Trigger Set</button>

<script>
$("#triggerSet").spectrum();

// Show the original input to demonstrate the value changing when calling `set`
$("#triggerSet").show();

$("#btnEnterAColor").click(function() {
    $("#triggerSet").spectrum("set", $("#enterAColor").val());
});
</script>

Here is working demo. You can enter colors names in different formats in the right field, for ex., red, #000000, rgb(250, 250, 250), rgba(1, 174, 120, 0.5).

Boolean_Type
  • 1,146
  • 3
  • 13
  • 40
-2

Have you tried this url? i think you will get solution from this url. https://bgrins.github.io/spectrum/

Hiren Master
  • 105
  • 3