Paleta de colores en JS

#1 (**permalink**) 03/02/2015, 08:29

Buen día, soy nuevo en esta comunidad y mi pregunta es porque no he podido encontrar solución en este portal y en Internet.

Necesito hacer una paleta de colores que se pueda implementar con 3 deslizadores de tipo range:

R
G
B

y que cuando se mueva cada range se tenga el rango de 0 a 255 que es el predeterminado para los colores de rgb(eso ya lo tengo). la idea es que cuando se mueva el range el valor que quede en cada color se convierta a hexadecimal para luego tomar esos 3 números hexadecimales y convertirlos en una sola cadena para tomar el número final hexadeciamal y asi formar el color en un div aparte.

Tengo lo siguiente para la funcion de convertir los numeros

Código Javascript:

Ver originalfunction test(d){
var d = document.getElementById("d").value;
return d.ToString(16);
alert("Seleccionó rojo" + d );

el alert lo uso para poder saber si me esta logrando convertir a hexadecimal el primer range que seria el color rojo, cosa que aun no he podido, es por eso que necesito de su ayuda para saber en que estoy fallando al convertir el numero, y luego de eso que propiedad puedo usar para tomar los 3 valores y convertirlos en una cadena completa para luego con la propiedad background color dejar un div con el color que se edita en los range.

Agradezco su ayuda y colaboración muy amables ¡¡

garciasanchezdani · #2 (**permalink**) 04/02/2015, 03:48

Hola @fabipers , mira este ejemplo, qué pasada: http://jsfiddle.net/mv6We/2/
Es algo así lo que quieres, ¿no?
Échale un vistazo, y si no entiendes algo te lo explico.

Espero que te sirva.
Saludos, Daniel

#3 (**permalink**) 04/02/2015, 06:42

Hola, gracias por responder, mira te envio lo que llevo hasta ahora, este es el archivo de JavaScript:

Código Javascript:

Ver originalwindow.onload = function(){
    document.getElementById("rojo").addEventListener("change", redcolor);
    document.getElementById("verde").addEventListener("change", greencolor);
    document.getElementById("azul").addEventListener("change", bluecolor);
    
    }
function redcolor(){
    var rojo= document.getElementById("rojo").value;
    var colorrojo = rojo.ToString(16);
    alert("Selecciono rojo" + rojo );
 
}
function greencolor(){
    var verde= document.getElementById("verde").value;
    var colorverde = verde.ToString(16);
    alert("Selecciono verde" + b );
 
}
function bluecolor(){
    var colorazul = document.getElementById("azul").value;
    var colorverde = verde.ToString(16);
    alert("Selecciono azul "+ c);
 
}

Los alert los uso para probar si me esta convirtiendo a hexa, (cosa que no he podido).

Y aca esta el html:

Código HTML:

Ver original<html lang="es">
    <head meta charset="utf-8">
        <title>Paleta de colores</title>
        
    
    <link href="styles/styles.css" rel="stylesheet" type="text/css">
    
</head>
<body>
 
<hgroup>
    <h1>Paleta de colores HTML</h1>
    <h2>Mueva los controles para elegir el color deseado</h2>
    <tr>
    <td><input type="range" id="rojo" min="0" max="255" value ="25" name ="redcolor" /> Red.</td>
    </br>
    <td><input type="range" id="verde" min="0" max="255" value ="25" name ="greencolor" /> Green.</td>
    </br>
    <td><input type="range" id="azul" min="0" max="255" value ="25" name ="bluecolor" /> Blue.</td>
    </br>
    <input type="button" value="Hexadecimal" onclick="alert(sCambiaSistema(0777, 16))"> 
    </br>
    
    </br>
    <div id="capa2">
    
    </div>
    <td>
    <input type="text" readonly ="readonly" value="#00000" />
    </td>
 
    </tr>
    <script src="scripts/funcion.js" language="javascript" type ="text/javascript"> </script>
    
</body>

no se si me hice entender, son 3 deslizadores tipo range y cada uno transforma al div donde se muestra el color, lo que no he podido hacer es convertir cada valor del deslizador tipo range a hexa y es por esta función que sé que esta mal:

Código Javascript:

Ver originalvar colorrojo = rojo.ToString(16);

ya teniendo eso resulto puedo modificar el div del color, pero antes debo poder convertir el valor del range a hexa, gracias por la ayuda

marlanga · #4 (**permalink**) 05/02/2015, 12:03

Veo que te has molestado en programar algo, asi que yo me molesto en reorganizarlo un poco lo que mas o menos tienes:

http://jsfiddle.net/marlanga/jufrgchc/

Código Javascript:

Ver originalString.prototype.pad = function( n, p ) {
    var s = '', n = Math.max( 0, n - this.length );
    while( n-- ) {
        s = p.toString() + s;
    }
    return s + this;
};
var ColorPicker = {
    elementos : {
        r : null,
        g : null,
        b : null,
        input : null,
        color : null
    },
    funciones : {
        cargar : function() {
            ColorPicker.elementos.r = document.getElementById( "rojo" );
            ColorPicker.elementos.g = document.getElementById( "verde" );
            ColorPicker.elementos.b = document.getElementById( "azul" );
            ColorPicker.elementos.input = document.getElementById( "resultado" );
            ColorPicker.elementos.color = document.getElementById( "color" );
            
            ColorPicker.elementos.r.addEventListener( 'input', ColorPicker.funciones.change );
            ColorPicker.elementos.g.addEventListener( 'input', ColorPicker.funciones.change );
            ColorPicker.elementos.b.addEventListener( 'input', ColorPicker.funciones.change );
            
            ColorPicker.funciones.change();
        },
        getHex : function( value ) {
            value = parseInt( value );
            return value.toString( 16 ).pad( 2, 0 ).toUpperCase();
        },
        getColor : function() {
            var r = ColorPicker.funciones.getHex( ColorPicker.elementos.r.value );
            var g = ColorPicker.funciones.getHex( ColorPicker.elementos.g.value );
            var b = ColorPicker.funciones.getHex( ColorPicker.elementos.b.value );
            return '#' + r + g + b;
        },
        putColor : function( color ) {
            ColorPicker.elementos.color.style.backgroundColor = color;
            console.log(color);
        },
        change : function() {
            var color = ColorPicker.funciones.getColor();
            ColorPicker.funciones.putColor( color );
            ColorPicker.elementos.input.value = color;
        }
    }
};
window.onload = function(){
    ColorPicker.funciones.cargar();
}

He encapsulado el codigo en un solo objeto, ahora está organizado en una sola variable global, en vez de ser un conjunto de funciones y variables globales desperdigadas por tu script (que pueden provocar colisiones de nombbres con otros scripts que tengas en la misma página).

Para hacer pad (rellenar cadenas con caracteres predeterminados) he modificado el "prototipo" de la clase String de javascript para meterle nueva funcionalidad

Para que funcione el xxx.toString(16), el objeto xxx DEBE SER un número, no un string.

El resto creo que ya lo entenderás al leerlo.

#5 (**permalink**) 09/02/2015, 08:59

Que bien, disculpa spor contestar tarde, me funciono perfecto, en verdad gracias, si era lo que estaba esperando. una vez más gracias a los 2