javascript - paleta - tabla de codigo de colores

¿Cómo obtener el valor de color hexadecimal en lugar del valor RGB?

Question

El uso de la siguiente jQuery obtendrá el valor RGB del color de fondo de un elemento:

$(''#selector'').css(''backgroundColor'');

¿Hay alguna forma de obtener el valor hexadecimal en lugar del RGB?

Answer 1

Legible && Reg-exp gratis (sin Reg-exp)

Creé una función que usa funciones básicas legibles y sin reg-exps.
La función acepta el color en formato CSS hexadecimal, rgb o rgba y devuelve una representación hexadecimal.
EDITAR: había un error al analizar el formato rgba (), arreglado ...

function getHexColor( color ){
    //if color is already in hex, just return it...
    if( color.indexOf(''#'') != -1 ) return color;

    //leave only "R,G,B" :
    color = color
                .replace("rgba", "") //must go BEFORE rgb replace
                .replace("rgb", "")
                .replace("(", "")
                .replace(")", "");
    color = color.split(","); // get Array["R","G","B"]

    // 0) add leading #
    // 1) add leading zero, so we get 0XY or 0X
    // 2) append leading zero with parsed out int value of R/G/B
    //    converted to HEX string representation
    // 3) slice out 2 last chars (get last 2 chars) => 
    //    => we get XY from 0XY and 0X stays the same
    return  "#"
            + ( ''0'' + parseInt(color[0], 10).toString(16) ).slice(-2)
            + ( ''0'' + parseInt(color[1], 10).toString(16) ).slice(-2)
            + ( ''0'' + parseInt(color[2], 10).toString(16) ).slice(-2);
}

Answer 2

Aquí está la solución más limpia que escribí basada en la sugerencia de @Matt:

function rgb2hex(rgb) {
    rgb = rgb.match(/^rgb/((/d+),/s*(/d+),/s*(/d+)/)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

Algunos navegadores ya devuelven colores como hexadecimales (a partir de Internet Explorer 8 y versiones posteriores). Si necesita lidiar con esos casos, solo agregue una condición dentro de la función, como @gfrobenius sugirió:

function rgb2hex(rgb) {
    if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;

    rgb = rgb.match(/^rgb/((/d+),/s*(/d+),/s*(/d+)/)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

Si está utilizando jQuery y quiere un enfoque más completo, puede usar los ganchos CSS disponibles desde jQuery 1.4.3, como mostré al responder esta pregunta: ¿Puedo forzar a jQuery.css ("backgroundColor") a devolver en formato hexadecimal?

Answer 3

Aquí está mi solución, también usa touppercase mediante el uso de un argumento y busca otros posibles espacios en blanco y mayúsculas en la cadena suministrada.

var a = "rgb(10, 128, 255)";
var b = "rgb( 10, 128, 255)";
var c = "rgb(10, 128, 255 )";
var d = "rgb ( 10, 128, 255 )";
var e = "RGB ( 10, 128, 255 )";
var f = "rgb(10,128,255)";
var g = "rgb(10, 128,)";

var rgbToHex = (function () {
    var rx = /^rgb/s*/(/s*(/d+)/s*,/s*(/d+)/s*,/s*(/d+)/s*/)$/i;

    function pad(num) {
        if (num.length === 1) {
            num = "0" + num;
        }

        return num;
    }

    return function (rgb, uppercase) {
        var rxArray = rgb.match(rx),
            hex;

        if (rxArray !== null) {
            hex = pad(parseInt(rxArray[1], 10).toString(16)) + pad(parseInt(rxArray[2], 10).toString(16)) + pad(parseInt(rxArray[3], 10).toString(16));

            if (uppercase === true) {
                hex = hex.toUpperCase();
            }

            return hex;
        }

        return;
    };
}());

console.log(rgbToHex(a));
console.log(rgbToHex(b, true));
console.log(rgbToHex(c));
console.log(rgbToHex(d));
console.log(rgbToHex(e));
console.log(rgbToHex(f));
console.log(rgbToHex(g));

En jsfiddle

Comparación de velocidad en jsperf

Una mejora adicional podría ser trim() la cadena rgb

var rxArray = rgb.trim().match(rx),

Answer 4

Aquí hay un trazador de líneas ES6 que no usa jQuery:

var rgb = document.querySelector(''#selector'').style[''background-color''];
return ''#'' + rgb.substr(4, rgb.indexOf('')'') - 4).split('','').map((color) => parseInt(color).toString(16)).join('''');

Answer 5

Aquí hay una solución que encontré que no arroja errores de scripting en IE: http://haacked.com/archive/2009/12/29/convert-rgb-to-hex.aspx

Answer 6

Aquí hay una versión que también verifica la transparencia, la necesitaba porque mi objetivo era insertar el resultado en un atributo de estilo, donde la versión transparente de un color hexadecimal es en realidad la palabra "transparente".

function rgb2hex(rgb) {
     if (  rgb.search("rgb") == -1 ) {
          return rgb;
     }
     else if ( rgb == ''rgba(0, 0, 0, 0)'' ) {
         return ''transparent'';
     }
     else {
          rgb = rgb.match(/^rgba?/((/d+),/s*(/d+),/s*(/d+)(?:,/s*(/d+))?/)$/);
          function hex(x) {
               return ("0" + parseInt(x).toString(16)).slice(-2);
          }
          return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); 
     }
}

Answer 7

Dado que la pregunta era usar JQuery, aquí hay un plugin de JQuery basado en el código de Daniel Elliott:

$.fn.cssAsHex = function(colorProp) {

    var hexDigits = ''0123456789abcdef'';

    function hex(x) {
        return isNaN(x) ? ''00'' : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
    };

    // Convert RGB color to Hex format
    function rgb2hex(rgb) {
        var rgbRegex = rgb.match(/^rgb/((/d+),/s*(/d+),/s*(/d+)/)$/);
        return ''#'' + hex(rgbRegex[1]) + hex(rgbRegex[2]) + hex(rgbRegex[3]);
    };

    return rgb2hex(this.css(colorProp));
};

Úselo como:

var hexBackgroundColor = $(''#myElement'').cssAsHex(''background-color'');

Answer 8

Este se ve un poco mejor:

var rgb = $(''#selector'').css(''backgroundColor'').match(//d+/g);
var r   = parseInt(rgb[0], 10);
var g   = parseInt(rgb[1], 10);
var b   = parseInt(rgb[2], 10);
var hex = ''#''+ r.toString(16) + g.toString(16) + b.toString(16);

un one-liner más sucinto

var rgb = $(''#selector'').css(''backgroundColor'').match(//d+/g);
var hex = ''#''+ Number(rgb[0]).toString(16) + Number(rgb[1]).toString(16) + Number(rgb[2]).toString(16);

forzando a jQuery a devolver siempre hex:

$.cssHooks.backgroundColor = {
    get: function(elem) {
        if (elem.currentStyle)
            var bg = elem.currentStyle["backgroundColor"];
        else if (window.getComputedStyle) {
            var bg = document.defaultView.getComputedStyle(elem,
                null).getPropertyValue("background-color");
        }
        if (bg.search("rgb") == -1) {
            return bg;
        } else {
            bg = bg.match(//d+/g);
            function hex(x) {
                return ("0" + parseInt(x).toString(16)).slice(-2);
            }
            return "#" + hex(bg[0]) + hex(bg[1]) + hex(bg[2]);
        }
    }
}

Answer 9

Función que devuelve el color de fondo de un elemento en hex.

function getBgColorHex(elem){
    var color = elem.css(''background-color'')
    var hex;
    if(color.indexOf(''#'')>-1){
        //for IE
        hex = color;
    } else {
        var rgb = color.match(//d+/g);
        hex = ''#''+ (''0'' + parseInt(rgb[0], 10).toString(16)).slice(-2) + (''0'' + parseInt(rgb[1], 10).toString(16)).slice(-2) + (''0'' + parseInt(rgb[2], 10).toString(16)).slice(-2);
    }
    return hex;
}

ejemplo de uso:

$(''#div1'').click(function(){
   alert(getBgColorHex($(this));
}

jsfiddle

Answer 10

La mayoría de los navegadores parecen devolver el valor RGB al usar:

$(''#selector'').css(''backgroundColor'');

Solo IE (solo 6 probados hasta el momento) devuelve el valor hexadecimal.

Para evitar mensajes de error en IE, puede ajustar la función en una declaración if:

function rgb2hex(rgb) {
     if (  rgb.search("rgb") == -1 ) {
          return rgb;
     } else {
          rgb = rgb.match(/^rgba?/((/d+),/s*(/d+),/s*(/d+)(?:,/s*(/d+))?/)$/);
          function hex(x) {
               return ("0" + parseInt(x).toString(16)).slice(-2);
          }
          return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); 
     }
}

Answer 11

La misma respuesta como @Jim F, pero la sintaxis de ES6 , por lo tanto, menos instrucciones:

const rgb2hex = (rgb) => {
  if (rgb.search("rgb") === -1) return rgb;
  rgb = rgb.match(/^rgba?/((/d+),/s*(/d+),/s*(/d+)(?:,/s*(/d+))?/)$/);
  const hex = (x) => ("0" + parseInt(x).toString(16)).slice(-2);
  return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
};

Answer 12

La respuesta de Steven Pribilinskiy cae ceros a la izquierda, por ejemplo # ff0000 se convierte en # ff00.

Una solución es agregar un 0 inicial y una subcadena de los últimos 2 dígitos.

var rgb = $(''#selector'').css(''backgroundColor'').match(//d+/g);
var hex = ''#''+ String(''0'' + Number(rgb[0]).toString(16)).slice(-2) + String(''0'' + Number(rgb[1]).toString(16)).slice(-2) + String(''0'' + Number(rgb[2]).toString(16)).slice(-2);

Answer 13

Mi hermosa solución no estándar

HTML

<div id="selector" style="background-color:#f5b405"></div>

jQuery

$("#selector").attr("style").replace("background-color:", "");

Resultado

#f5b405

Answer 14

Se actualizó @ErickPetru para compatibilidad con rgba:

function rgb2hex(rgb) {
    rgb = rgb.match(/^rgba?/((/d+),/s*(/d+),/s*(/d+)(?:,/s*(/d+))?/)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

Actualicé la expresión regular para que coincida con el valor alfa si está definido, pero no lo uso.

Answer 15

Solo para agregar a la respuesta de @ Justin anterior ...

debería ser

var rgb = document.querySelector(''#selector'').style[''background-color''];
return ''#'' + rgb.substr(4, rgb.indexOf('')'') - 4).split('','').map((color) => String("0" + parseInt(color).toString(16)).slice(-2)).join('''');

Como las funciones int parse de arriba truncan ceros a la izquierda, se producen códigos de color incorrectos de 5 o 4 letras ... es decir, para rgb (216, 160, 10) produce # d8a0a mientras que debería ser # d8a00a.

Gracias

Answer 16

clase de color tomada del selector de color bootstrap

// Color object
var Color = function(val) {
    this.value = {
        h: 1,
        s: 1,
        b: 1,
        a: 1
    };
    this.setColor(val);
};

Color.prototype = {
    constructor: Color,

    //parse a string to HSB
    setColor: function(val){
        val = val.toLowerCase();
        var that = this;
        $.each( CPGlobal.stringParsers, function( i, parser ) {
            var match = parser.re.exec( val ),
            values = match && parser.parse( match ),
            space = parser.space||''rgba'';
            if ( values ) {
                if (space === ''hsla'') {
                    that.value = CPGlobal.RGBtoHSB.apply(null, CPGlobal.HSLtoRGB.apply(null, values));
                } else {
                    that.value = CPGlobal.RGBtoHSB.apply(null, values);
                }
                return false;
            }
        });
    },

    setHue: function(h) {
        this.value.h = 1- h;
    },

    setSaturation: function(s) {
        this.value.s = s;
    },

    setLightness: function(b) {
        this.value.b = 1- b;
    },

    setAlpha: function(a) {
        this.value.a = parseInt((1 - a)*100, 10)/100;
    },

    // HSBtoRGB from RaphaelJS
    // https://github.com/DmitryBaranovskiy/raphael/
    toRGB: function(h, s, b, a) {
        if (!h) {
            h = this.value.h;
            s = this.value.s;
            b = this.value.b;
        }
        h *= 360;
        var R, G, B, X, C;
        h = (h % 360) / 60;
        C = b * s;
        X = C * (1 - Math.abs(h % 2 - 1));
        R = G = B = b - C;

        h = ~~h;
        R += [C, X, 0, 0, X, C][h];
        G += [X, C, C, X, 0, 0][h];
        B += [0, 0, X, C, C, X][h];
        return {
            r: Math.round(R*255),
            g: Math.round(G*255),
            b: Math.round(B*255),
            a: a||this.value.a
        };
    },

    toHex: function(h, s, b, a){
        var rgb = this.toRGB(h, s, b, a);
        return ''#''+((1 << 24) | (parseInt(rgb.r) << 16) | (parseInt(rgb.g) << 8) | parseInt(rgb.b)).toString(16).substr(1);
    },

    toHSL: function(h, s, b, a){
        if (!h) {
            h = this.value.h;
            s = this.value.s;
            b = this.value.b;
        }
        var H = h,
        L = (2 - s) * b,
        S = s * b;
        if (L > 0 && L <= 1) {
            S /= L;
        } else {
            S /= 2 - L;
        }
        L /= 2;
        if (S > 1) {
            S = 1;
        }
        return {
            h: H,
            s: S,
            l: L,
            a: a||this.value.a
        };
    }
};

cómo utilizar

var color = new Color("RGB(0,5,5)");
color.toHex()

Answer 17

var hexDigits = new Array
        ("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); 

//Function to convert rgb color to hex format
function rgb2hex(rgb) {
 rgb = rgb.match(/^rgb/((/d+),/s*(/d+),/s*(/d+)/)$/);
 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

function hex(x) {
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
 }

( Source )