How to create a color palette and color a div depending on the chosen color

Asked

Viewed 1,058 times

1

Where I find content to create a website with a color palette to customize a product?

For example: You click on a color and this color applies to the product, I click on another color and change the color I had previously chosen.

And what name applies when creating this process on a website?

javascript html css

  • The English name of this feature is color Picker. In English maybe it is color-choosing...

1 answer

4


Here is an example. A palette with colors to choose from, a field where the color is shown, and buttons that store the color code in the .value.

This example does what you want: "You click on a color and this color applies to the product, I click on another color and change the color I had previously chosen". 

var cores = ["#003366", "#336699", "#3366CC", "#003399", "#000099", "#0000CC", "#000066", "#006666", "#006699", "#0099CC", "#0066CC", "#0033CC", "#0000FF", "#3333FF", "#333399", "#669999", "#009999", "#33CCCC", "#00CCFF", "#0099FF", "#0066FF", "#3366FF", "#3333CC", "#666699", "#339966", "#00CC99", "#00FFCC", "#00FFFF", "#33CCFF", "#3399FF", "#6699FF", "#6666FF", "#6600FF", "#6600CC", "#339933", "#00CC66", "#00FF99", "#66FFCC", "#66FFFF", "#66CCFF", "#99CCFF", "#9999FF", "#9966FF", "#9933FF", "#9900FF", "#006600", "#00CC00", "#00FF00", "#66FF99", "#99FFCC", "#CCFFFF", "#CCCCFF", "#CC99FF", "#CC66FF", "#CC33FF", "#CC00FF", "#9900CC", "#003300", "#009933", "#33CC33", "#66FF66", "#99FF99", "#CCFFCC", "#FFFFFF", "#FFCCFF", "#FF99FF", "#FF66FF", "#FF00FF", "#CC00CC", "#660066", "#336600", "#009900", "#66FF33", "#99FF66", "#CCFF99", "#FFFFCC", "#FFCCCC", "#FF99CC", "#FF66CC", "#FF33CC", "#CC0099", "#993399", "#333300", "#669900", "#99FF33", "#CCFF66", "#FFFF99", "#FFCC99", "#FF9999", "#FF6699", "#FF3399", "#CC3399", "#990099", "#666633", "#99CC00", "#CCFF33", "#FFFF66", "#FFCC66", "#FF9966", "#FF6666", "#FF0066", "#CC6699", "#993366", "#999966", "#CCCC00", "#FFFF00", "#FFCC00", "#FF9933", "#FF6600", "#FF5050", "#CC0066", "#660033", "#996633", "#CC9900", "#FF9900", "#CC6600", "#FF3300", "#FF0000", "#CC0000", "#990033", "#663300", "#996600", "#CC3300", "#993300", "#990000", "#800000", "#993333"];

var visualizar = document.getElementById('visualizar');
var escolhas = document.getElementById('escolhas');
cores.forEach(function(cor) {
    var button = document.createElement('button');
    button.value = cor;
    button.type = 'button';
    button.style.backgroundColor = cor;
    button.addEventListener('click', handler(button));
    escolhas.appendChild(button);
});

function handler(el) {
    return function() {
        visualizar.style.backgroundColor = el.value;
    }
}
#escolhas button {
    padding: 10px;
    border: 1px solid white;
}

#escolhas button:hover {
    cursor: pointer;
    border: 1px solid black;
}

#visualizar {
    width: 100%;
    height: 100px;
    border: 1px solid black;
}
<div id="escolhas"></div>
<div id="visualizar"></div>

  • jsFiddle if useful: http://jsfiddle.net/oy2cguz3/

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.