Capture RGBA values

Question

I have an RGBA value that takes the color of a color palette. I need to get the separate values of each color component of the RGBA.

I created 3 variables:

var vermelho = (/*Tem que receber a primeira cor do RGBA red*/);
var verde = (/*Tem que receber a segunda cor do RGBA green*/);
var azul = (/*Tem que receber a terceira cor do RGBA blue*/);

I wanted to know how I can get the values separately from the RGBA. I’ve searched several places, but I can’t find anything on.

Here’s an image demonstrating what’s going on:

Has the color palette and the preview-color that takes the color that is in the palette along with the alpha that I can choose. I need to take the values that the preview-color is receiving from the palette.

Answer 1

I’m going to base myself on the program I did in this other answer of mine:

// Mapeia nomes comuns de cores. Fonte: http://www.w3schools.com/cssref/css_colors.asp
var colorMap = {"ALICEBLUE": "#F0F8FF", "ANTIQUEWHITE": "#FAEBD7", "AQUA": "#00FFFF", "AQUAMARINE": "#7FFFD4", "AZURE": "#F0FFFF", "BEIGE": "#F5F5DC", "BISQUE": "#FFE4C4", "BLACK": "#000000", "BLANCHEDALMOND": "#FFEBCD", "BLUE": "#0000FF", "BLUEVIOLET": "#8A2BE2", "BROWN": "#A52A2A", "BURLYWOOD": "#DEB887", "CADETBLUE": "#5F9EA0", "CHARTREUSE": "#7FFF00", "CHOCOLATE": "#D2691E", "CORAL": "#FF7F50", "CORNFLOWERBLUE": "#6495ED", "CORNSILK": "#FFF8DC", "CRIMSON": "#DC143C", "CYAN": "#00FFFF", "DARKBLUE": "#00008B", "DARKCYAN": "#008B8B", "DARKGOLDENROD": "#B8860B", "DARKGRAY": "#A9A9A9", "DARKGREY": "#A9A9A9", "DARKGREEN": "#006400", "DARKKHAKI": "#BDB76B", "DARKMAGENTA": "#8B008B", "DARKOLIVEGREEN": "#556B2F", "DARKORANGE": "#FF8C00", "DARKORCHID": "#9932CC", "DARKRED": "#8B0000", "DARKSALMON": "#E9967A", "DARKSEAGREEN": "#8FBC8F", "DARKSLATEBLUE": "#483D8B", "DARKSLATEGRAY": "#2F4F4F", "DARKSLATEGREY": "#2F4F4F", "DARKTURQUOISE": "#00CED1", "DARKVIOLET": "#9400D3", "DEEPPINK": "#FF1493", "DEEPSKYBLUE": "#00BFFF", "DIMGRAY": "#696969", "DIMGREY": "#696969", "DODGERBLUE": "#1E90FF", "FIREBRICK": "#B22222", "FLORALWHITE": "#FFFAF0", "FORESTGREEN": "#228B22", "FUCHSIA": "#FF00FF", "GAINSBORO": "#DCDCDC", "GHOSTWHITE": "#F8F8FF", "GOLD": "#FFD700", "GOLDENROD": "#DAA520", "GRAY": "#808080", "GREY": "#808080", "GREEN": "#008000", "GREENYELLOW": "#ADFF2F", "HONEYDEW": "#F0FFF0", "HOTPINK": "#FF69B4", "INDIANRED ": "#CD5C5C", "INDIGO ": "#4B0082", "IVORY": "#FFFFF0", "KHAKI": "#F0E68C", "LAVENDER": "#E6E6FA", "LAVENDERBLUSH": "#FFF0F5", "LAWNGREEN": "#7CFC00", "LEMONCHIFFON": "#FFFACD", "LIGHTBLUE": "#ADD8E6", "LIGHTCORAL": "#F08080", "LIGHTCYAN": "#E0FFFF", "LIGHTGOLDENRODYELLOW": "#FAFAD2", "LIGHTGRAY": "#D3D3D3", "LIGHTGREY": "#D3D3D3", "LIGHTGREEN": "#90EE90", "LIGHTPINK": "#FFB6C1", "LIGHTSALMON": "#FFA07A", "LIGHTSEAGREEN": "#20B2AA", "LIGHTSKYBLUE": "#87CEFA", "LIGHTSLATEGRAY": "#778899", "LIGHTSLATEGREY": "#778899", "LIGHTSTEELBLUE": "#B0C4DE", "LIGHTYELLOW": "#FFFFE0", "LIME": "#00FF00", "LIMEGREEN": "#32CD32", "LINEN": "#FAF0E6", "MAGENTA": "#FF00FF", "MAROON": "#800000", "MEDIUMAQUAMARINE": "#66CDAA", "MEDIUMBLUE": "#0000CD", "MEDIUMORCHID": "#BA55D3", "MEDIUMPURPLE": "#9370DB", "MEDIUMSEAGREEN": "#3CB371", "MEDIUMSLATEBLUE": "#7B68EE", "MEDIUMSPRINGGREEN": "#00FA9A", "MEDIUMTURQUOISE": "#48D1CC", "MEDIUMVIOLETRED": "#C71585", "MIDNIGHTBLUE": "#191970", "MINTCREAM": "#F5FFFA", "MISTYROSE": "#FFE4E1", "MOCCASIN": "#FFE4B5", "NAVAJOWHITE": "#FFDEAD", "NAVY": "#000080", "OLDLACE": "#FDF5E6", "OLIVE": "#808000", "OLIVEDRAB": "#6B8E23", "ORANGE": "#FFA500", "ORANGERED": "#FF4500", "ORCHID": "#DA70D6", "PALEGOLDENROD": "#EEE8AA", "PALEGREEN": "#98FB98", "PALETURQUOISE": "#AFEEEE", "PALEVIOLETRED": "#DB7093", "PAPAYAWHIP": "#FFEFD5", "PEACHPUFF": "#FFDAB9", "PERU": "#CD853F", "PINK": "#FFC0CB", "PLUM": "#DDA0DD", "POWDERBLUE": "#B0E0E6", "PURPLE": "#800080", "REBECCAPURPLE": "#663399", "RED": "#FF0000", "ROSYBROWN": "#BC8F8F", "ROYALBLUE": "#4169E1", "SADDLEBROWN": "#8B4513", "SALMON": "#FA8072", "SANDYBROWN": "#F4A460", "SEAGREEN": "#2E8B57", "SEASHELL": "#FFF5EE", "SIENNA": "#A0522D", "SILVER": "#C0C0C0", "SKYBLUE": "#87CEEB", "SLATEBLUE": "#6A5ACD", "SLATEGRAY": "#708090", "SLATEGREY": "#708090", "SNOW": "#FFFAFA", "SPRINGGREEN": "#00FF7F", "STEELBLUE": "#4682B4", "TAN": "#D2B48C", "TEAL": "#008080", "THISTLE": "#D8BFD8", "TOMATO": "#FF6347", "TURQUOISE": "#40E0D0", "VIOLET": "#EE82EE", "WHEAT": "#F5DEB3", "WHITE": "#FFFFFF", "WHITESMOKE": "#F5F5F5", "YELLOW": "#FFFF00", "YELLOWGREEN": "#9ACD32"};

/**
 * Função que a partir de uma cor, dado o nome dela, devolve os valores R, G e B dela.
 * @param {string} cor - Nome da cor, pode ter um dos seguintes formatos: '#abcdef', '#abc', 'rgb(a,b,c)', 'rgba(a,b,c)'  ou ser um nome comum de cor, tal como 'red' ou 'yellow'.
 */
function separarComponentes(cor) {
    var r, g, b;
    try {
        var rgb = cor.trim().toUpperCase();
        if (colorMap[rgb]) rgb = colorMap[rgb];
        if (rgb.startsWith("#") && rgb.length === 7) {
            r = parseInt(rgb.substring(1, 3), 16);
            g = parseInt(rgb.substring(3, 5), 16);
            b = parseInt(rgb.substring(5, 7), 16);
        } else if (rgb.startsWith("#") && rgb.length === 4) {
            r = parseInt(rgb.substring(1, 2), 16) * 17;
            g = parseInt(rgb.substring(2, 3), 16) * 17;
            b = parseInt(rgb.substring(3, 4), 16) * 17;
        } else if (rgb.startsWith("RGB") && rgb.endsWith(")")) {
            rgb = rgb.substring(3);
            var a = rgb.charAt(0) === 'A';
            if (a) rgb = rgb.substring(1);
            rgb = rgb.trim();
            if (!rgb.startsWith("(")) throw new Error();
            rgb = rgb.substring(1, rgb.length - 1);
            var x = rgb.split(',');
            if (x.length !== (a ? 4 : 3)) throw new Error();
            r = parseInt(x[0].trim());
            g = parseInt(x[1].trim());
            b = parseInt(x[2].trim());
            aa = a ? parseFloat(x[3].trim()) : 0.0;
            if (isNaN(r) || isNaN(g) || isNaN(b) || isNaN(a) || r < 0 || r > 255 || g < 0 || g > 255 || b < 0 || b > 255 || aa < 0.0 || aa > 1.0) throw new Error();
        } else {
            throw new Error();
        }
        return {r: r, g: g, b: b};
    } catch (x) {
        throw new Error("A cor '" + cor + "' não foi reconhecida.");
    }
}

// Teste
function teste(x) {
    try {
        var rgb = separarComponentes(x);
        document.write("A cor '" + x + "' é uma cor de R = " + rgb.r + ", G = " + rgb.g + ", B = " + rgb.b + ".<br>");
    } catch (e) {
        document.write(e.message + "<br>");
    }
}

document.write("<h2>Essas cores devem ser todas válidas</h2>");
teste("#102030");
teste("#0000ff");
teste("#00f");
teste("#00ff00");
teste("#FF00FF");
teste("#808080");
teste("#888");
teste("#ffffff");
teste("#fff");
teste("#000000");
teste("#000");
teste("#a000A0");
teste("#a0A");
teste("yellow");
teste("BLUE");
teste("PowderBlue");
teste("rgb(20, 40, 60)");
teste("rgb(100, 180, 250)");
teste(" rgb (100 , 180 , 250 )");
teste("  rgb (255 , 255 , 255 )  ");
teste("rgba(20, 40, 60, 0.4)");
teste("rgba(100, 180, 250, 0.7)");
teste(" rgba (100 , 180 , 250 , 0.9)");
teste("  rgba (255 , 255 , 255 , 0.33 )  ");

document.write("<h2>Essas cores devem ser todas inválidas</h2>");
teste("hahaha");
teste("cor de burro quando foge");
teste("rgba(255, 255, 255)");
teste("rgb(255, 255, 255, 255)");
teste("rgb(255, 255)");
teste("rgba(255, 255, 255, 0, 0)");
teste("rgb(256, 0, 0)");
teste("rgb(-1, 0, 0)");
teste("rgba(256, 0, 0, 0.0)");
teste("rgba(-1, 0, 0, 0.0)");
teste("rgba(255, 0, 0, -1.0)");
teste("rgba(255, 0, 0, 1.1)");
teste({});
teste(1245);
teste([]);
teste(undefined);
teste(null);

I mean, what you’re gonna do is something like this:

var cor = document.getElementById("novapintura").style.backgroundColo‌​r;
var rgb = separarComponentes(cor);
var vermelho = rgb.r;
var verde = rgb.g;
var azul = rgb.b;

Answer 2

Select only the numbers from the RGBA string with a Regexp and put in an array, then just iterate over it or select by index(0,1,2,3) respectively. Taken from How to Extract r, g, b, a values from CSS color?

var c = 'rgba(60,4,2,6)';
var rgb = c.match(/\d+/g);
var vermelho = rgb[0];
var verde = rgb[1];
var azul = rgb[2];
var alpha = rgb[3];

console.log("vermelho = "+vermelho);
console.log("verde = "+verde);
console.log("azul = "+azul);
console.log("alpha = "+alpha);