convertir de rgb (0-255) a #rrggbb

derkenuke · #1 (**permalink**) 26/01/2004, 14:59

He buscado por muchos sitios una funcion que se pasen 3 valores de 0 a 255 a modo de r g b y que devuelva su equivalente en formato #rrggbb, pero no he encontrado

.

Mis capacidades

solo llegan para que en el rrggbb las r sean iguales, la g tambien y las b tambien, ocurriendome el problema de que generan el mismo color el 255,90,255 que el 255,90,101.

La funcion deberia ser asi

:

function convierte(r,g,b) {
....
return "#"+Rcalc1+Rcalc2+Gcalc1+Gcalc2+Bcalc1+Bcalc2;
}

O algo parecido, es decir, que en el valor de los rojos no sean letras iguales, en el del verde tampoco ni en el del azul. Tambien me gustaria una que hiciera lo inverso.

Si lo consiguieran pasenmelo por favor.

Saludos

KarlanKas · #2 (**permalink**) 26/01/2004, 17:22

A ver, para empezar se me ha ocurrido esto, pero se me antoja demasiado fácil... una vez comprobemos que lo hace bien lo adaptamos a lo que necesitas...

Código PHP:

  <html>

<head>

 
<script>

numeros=['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];

function calcular(base255){

if(base255>255 || base255<0){

alert("El valor debe estar entre 0 y 255");

document.forms[0].elements['nume'].value="";

return false}

inicioFrase="El valor en hexadecimal es: ";

alert(inicioFrase+numeros[parseInt(base255/16)]+""+numeros[base255%16]);

}

 
 
</script>

</head>

 
<body>

<form>

<input type="text" name="nume" maxlength="3" size="3">

<input type="button" value="calcular" 

onclick="calcular(document.forms[0].elements['nume'].value);">

</form>

</body>

</html>

KarlanKas · #3 (**permalink**) 26/01/2004, 17:36

En caso de que funcione ¿sería algo así?

Código PHP:

  <html>

<head>

<style>

*{

font:normal 10px/15px verdana;

}

</style>

<script>

numeros=['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];

function calcular(base255){

    numeroHexadecimal="#";

    base255=base255.split(",");

    if(base255.length!=3){

        alert("Por favor, introduzca 3 valores separados por comas");

        return false;

        }

    for(a=0;a<3;a++){

        if(base255[a]>255 || base255[a]<0){

            alert("El valor numero "+a+" debe estar entre 0 y 255");

            document.forms[0].elements['nume'].value="";

            return false;

            }

    numeroHexadecimal+=numeros[parseInt(base255[a]/16)] + "" + numeros[base255[a]%16];

    }

alert(numeroHexadecimal);

}

 
 
</script>

</head>

<body>

<form>

Introduce los valores rgb en base 255 separados por comas: 

<input type="text" name="nume" maxlength="11" size="11">

<input type="button" value="calcular" 

onclick="calcular(document.forms[0].elements['nume'].value);"><br>

(por ejemplo: 255,255,255)<br>

 </form>

</body>

</html>

derkenuke · #4 (**permalink**) 26/01/2004, 17:45

¿Es que siempre tienes respuesta a lo dificil??

Muchas gracias KarlanKas, a ver si puedo sacar yo solito el inverso

caricatos · #5 (**permalink**) 26/01/2004, 17:46

Hola a todos:

Estas líneas las he sacado de una vieja página que aquí me han ayudado a hacer...

var _h = "0.1.2.3.4.5.6.7.8.9.a.b.c.d.e.f".split(".");
function hexa(n) {
return _h[parseInt(n / 16)] + _h [n % 16];
}

function color(r, g, b) {
return "#" + hexa(r) + hexa(g) + hexa(b);
}

Es muy parecido a lo que puso KarlanKas (¡Hola

!) pero sin chequeos, la función color se corresponde con "convierte" del primer post.

Saludos

derkenuke · #6 (**permalink**) 26/01/2004, 17:50

Jeje, funcionan muy bien los dos!, aunque es el mismo motor, me quedo con el simple, aunque gracias por la implementacion KarlanKas.

Un saludo.

KarlanKas · #7 (**permalink**) 26/01/2004, 17:55

jeje! Perfecto!

Me vais a disculpar, pero me pongo a hacer un script y empiezo a ponerle florituras y más florituras... y al final se desvía un poco del origen.

Hola caricatos!! Parece que tenemos transmisión del pensamiento!!

Lo que me ha chocado más ha sido lo fácil que ha resultado el hacer el motor... pensaba que me iba a durar más

.

Gracias por los piropos, derkenuke! Aunque como ves, tampoco es para tanto.

Un saludo a los dos!

derkenuke · #8 (**permalink**) 26/01/2004, 18:00

Jeje, de nada. Aunque estoy teniendo algun que otro problemilla para hacer la inversa, es decir, de #rrggbb a r,g,b. ¿Alguna otra idea fulminaz? :S

caricatos · #9 (**permalink**) 26/01/2004, 18:11

Hola otra vez:

Se puede decir que hice trampa ya que solo corté unas líneas de una página y la pegué aquí

También tengo el inverso, y también ocupa pocas líneas, pero como derkenuke lo quiere hacer, voy a darle esas ideas:

De #rrggbb el rojo se corresponde a n.substring(1, 3);
La posición de la primera r en la cadena de valores hexadecimales la multiplicas por 16 y le sumas la posición de la segunda.

Si necesitan ayuda ...

Saludos

derkenuke · #10 (**permalink**) 26/01/2004, 18:20

Mission acomplissed!

[O por lo menos creo que se escribe asi

).

Buenas pistas caricatos! Habia hecho algo mucho mas chapucero, funcionaba, pero chapuzas, no se me habria ocurrido nunca eso de sumarle la posicion de la 2º letra, es q a estas horas tengo las neuronas quemadas

.

Código PHP:

  <script>

var _h0= "0123456789abcdef";

var _h = _h0.split("");

 
function rrggbb(r,g,b) {

    r=_h[parseInt(r / 16)] + _h[r % 16];

    g=_h[parseInt(g / 16)] + _h[g % 16];;

    b=_h[parseInt(b / 16)] + _h[b % 16];;

    return "#"+r+g+b;

}

function rgb(rrggbb) {

    valor=0; colores=[rrggbb.substring(1,3),rrggbb.substring(3,5),rrggbb.substring(5,7)];

    for(a=0;a<colores.length;a++) {

        colores[a]=colores[a].split("");

        colores[a]=(_h0.indexOf(colores[a][0])*16) + (_h0.indexOf(colores[a][1]));

    }

    return [ colores[0] , colores[1] , colores[2] ];

}

 
// y la comprobacion!, tiene q alertar #1234ff, y efectivamente

unRGB=rgb("#1234ff")

alert(rrggbb(unRGB[0],unRGB[1],unRGB[2]));

 
</script>

Un saludo y gracias por todo!!

caricatos · #11 (**permalink**) 26/01/2004, 18:29

Creo que hasta lo has simplificado más que yo

Saludos