How to convert box shadow values from RGB value to HEX values

Question

I wanted to convert box-shadow:rgb(255, 255, 255) 10px 10px 0px , rgb(0, 0, 0) 10px 10px 0px, rgb(255, 255, 255) 10px 10px 0px to box-shadow:#FFF 10px 10px 0px , #000 10px 10px 0px, #FFF 10px 10px 0px

Can any one help me for this.

Thanks in advance.

Answer 1

to convert RGB to hex you need to find the different source for each r, g, and b find the hex for each and every source based on the length

function findMyHex(get) {
    var hex = get.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}

function tohex(r, g, b) {
    return "#" + findMyHex(r) + findMyHex(g) + findMyHex(b);
}

console.log(tohex(255, 255, 255)); 

hope this will help you.

Answer 2

In javascript you can use .toString(base) to convert a number into another base (in this case it's base 16 -> hexadecimal ).

An example:

var r = 255;
var g = 128;
var b = 219;
var hex = "#" + r.toString(16) + g.toString(16) + b.toString(16);
// hex = #ff80db

You just need to run something like this through your desired text in a loop and replace every occurence.

Answer 3

Maybe overkill,

function rgbToHex(str_rgb, withShorts, b) {
    var r, g, h;
    if (arguments.length < 3) {
        withShorts = !!withShorts;
        h = str_rgb.match(/rgba?\( *(\d+) *, *(\d+) *, *(\d+)/);
        r = +h[1];
        g = +h[2];
        b = +h[3];
    } else {
        r = str_rgb | 0, g = withShorts | 0, b = b | 0;
        withShorts = !!arguments[3];
    }
    r = r.toString(16), g = g.toString(16), b = b.toString(16);
    r = ('0' + r).slice(-2), g = ('0' + g).slice(-2), b = ('0' + b).slice(-2);
    if (withShorts) {
        if (r[0] === r[1])
            if(g[0] === g[1])
                if (b[0] === b[1])
                    return '#' + (r[0] + g[0] + b[0]).toUpperCase();
    }
    return '#' + (r + g + b).toUpperCase();
}

Now have

// ints
rgbToHex(255, 255, 255);       // "#FFFFFF"
rgbToHex(255, 255, 255, true); // "#FFF"
// strings
rgbToHex('rgb(255, 255, 255)');       // "#FFFFFF"
rgbToHex('rgb(255, 255, 255)', true); // "#FFF"
// ignores alpha
rgbToHex('rgba(255, 255, 255, 0)'); // "#FFFFFF"
// does padding
rgbToHex(1, 10, 14); // "#010A0E"