Embedding a Color Picker

Hi Experts,

I need to embed a Color Picker in my web app, and I'm trying to use HTML5's <input type="color">, and  3 things I dislike about this control...

1- It only accepts hex, but I need it RGB... I can settle for this and just convert.

2- The pop-up is little outdated, but OK.

3- When I change the color through the popup, visually the  color changes, but the value property does not. How do I get the value of the new color?

I'm not set on this control, but I need something that I can embed quick and easy, hopefully free.

Thanks!
APD TorontoSoftware DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Leonidas DosasCommented:
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->

<input type="color" id="colorChoice" />
<button id="btn">Get volor</button>
<!-- End your code here -->
  <script>
  document.getElementById("btn").addEventListener('click',function(){
  var colorElm=document.getElementById("colorChoice").value;
  console.log(colorElm);
});
  </script>
</body>
</html>

Open in new window

Vijaya KumarCommented:
if u want to use plug in then find help on

http://www.eyecon.ro/colorpicker/#download
Shaun VermaakTechnical SpecialistCommented:
Two line installation
<script src="jscolor.js"></script>
Color: <input class="jscolor" value="ab2567">

Open in new window

http://jscolor.com/

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
APD TorontoSoftware DeveloperAuthor Commented:
What about http://jsfiddle.net/ctkY3/7127/

I have already linked the spectrum.js and spectrum.css and have
<div class="sp-replacer sp-light color-picker">
                                <div class="sp-preview">
                                
                                    <div class="sp-preview-inner" 
                                         style="background-color: rgb(255, 0, 0);"
                                         id="srv_color[7]"
                                         name="srv_color[7]"></div>
                                    
                                </div>
                                <div class="sp-dd">▼</div>
                            </div>

Open in new window


I have also added, per the examples
//This JS sets up the color picker

$(document).ready(function(){
   
    //$('.color-picker').on('click', function(){
    $('.color-picker').spectrum({
    color: "#ECC",
    showInput: true,
    className: "full-spectrum",
    showInitial: true,
    showPalette: true,
    showSelectionPalette: true,
    maxSelectionSize: 10,
    preferredFormat: "hex",
    localStorageKey: "spectrum.demo",
    move: function (color) {
        
    },
    show: function () {
    
    },
    beforeShow: function () {
    
    },
    hide: function () {
    
    },
    change: function() {
        
    },
    palette: [
        ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)",
        "rgb(204, 204, 204)", "rgb(217, 217, 217)","rgb(255, 255, 255)"],
        ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
        "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"], 
        ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", 
        "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)", 
        "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)", 
        "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)", 
        "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)", 
        "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
        "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
        "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
        "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)", 
        "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
    ]
   
    });
    
});

Open in new window


This loads as expected. I like it, but when I chose a color the popup closes, but it does not update on screen
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.