Cómo convertir el "color de fondo" al formato rgb()?

Question

Aquí está mi problema:

Quiero cambiar la opacidad del color de fondo de uno de los elementos en mi página. para hacer esto, primero necesito convertir el formato de color a rgb(). (o extraer elementos r, g y b).

here puedo ver cómo convertir una cadena hexadecimal a formato numérico, pero los colores no están siempre en formato hexadecimal. se les puede nombrar colores como "rojo".

red  ---> rgb(255, 0, 0) 
#ff00ff ---> rgb(255, 0, 255) 

¿Alguien tiene alguna idea de cómo se puede hacer esto?

Atentamente.

Answer 1

Para convertir un colorName a RGB o HEX, primero necesita un diccionario de nombres de colores y los valores respectivos, de lo que puede hacer:

function nameToHex(name) { 
 
    return { 
 
    "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", 
 
    "darkgreen": "#006400", 
 
    "darkkhaki": "#bdb76b", 
 
    "darkmagenta": "#8b008b", 
 
    "darkolivegreen": "#556b2f", 
 
    "darkorange": "#ff8c00", 
 
    "darkorchid": "#9932cc", 
 
    "darkred": "#8b0000", 
 
    "darksalmon": "#e9967a", 
 
    "darkseagreen": "#8fbc8f", 
 
    "darkslateblue": "#483d8b", 
 
    "darkslategray": "#2f4f4f", 
 
    "darkturquoise": "#00ced1", 
 
    "darkviolet": "#9400d3", 
 
    "deeppink": "#ff1493", 
 
    "deepskyblue": "#00bfff", 
 
    "dimgray": "#696969", 
 
    "dodgerblue": "#1e90ff", 
 
    "firebrick": "#b22222", 
 
    "floralwhite": "#fffaf0", 
 
    "forestgreen": "#228b22", 
 
    "fuchsia": "#ff00ff", 
 
    "gainsboro": "#dcdcdc", 
 
    "ghostwhite": "#f8f8ff", 
 
    "gold": "#ffd700", 
 
    "goldenrod": "#daa520", 
 
    "gray": "#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", 
 
    "lightgrey": "#d3d3d3", 
 
    "lightgreen": "#90ee90", 
 
    "lightpink": "#ffb6c1", 
 
    "lightsalmon": "#ffa07a", 
 
    "lightseagreen": "#20b2aa", 
 
    "lightskyblue": "#87cefa", 
 
    "lightslategray": "#778899", 
 
    "lightsteelblue": "#b0c4de", 
 
    "lightyellow": "#ffffe0", 
 
    "lime": "#00ff00", 
 
    "limegreen": "#32cd32", 
 
    "linen": "#faf0e6", 
 
    "magenta": "#ff00ff", 
 
    "maroon": "#800000", 
 
    "mediumaquamarine": "#66cdaa", 
 
    "mediumblue": "#0000cd", 
 
    "mediumorchid": "#ba55d3", 
 
    "mediumpurple": "#9370d8", 
 
    "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": "#d87093", 
 
    "papayawhip": "#ffefd5", 
 
    "peachpuff": "#ffdab9", 
 
    "peru": "#cd853f", 
 
    "pink": "#ffc0cb", 
 
    "plum": "#dda0dd", 
 
    "powderblue": "#b0e0e6", 
 
    "purple": "#800080", 
 
    "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", 
 
    "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" 
 
    }[name.toLowerCase()]; 
 
} 
 

 
///////// 
 
function hex2rgb(c) { 
 
    if (c[0] === '#') c = c.substr(1); 
 
    var r = parseInt(c.slice(0,2), 16), 
 
     g = parseInt(c.slice(2,4), 16), 
 
     b = parseInt(c.slice(4,6), 16); 
 
    return 'rgb('+ r +','+ g +','+ b +')'; 
 
} 
 

 
///////// 
 
document.querySelector("#btn").addEventListener("click", function(){ 
 
    var hex = nameToHex(document.querySelector("#colorName").value); 
 
    if(!hex) return; 
 
    document.querySelector("#rgb").textContent = hex2rgb(hex); 
 
    document.querySelector("#hex").textContent = hex; 
 
});

<input id="colorName" type="text" size="8" value="cyan"> 
 
<input id="btn" type="button" value="Convert"> 
 
<div id="rgb">RGB result</div> 
 
<div id="hex">HEX result</div>

Answer 2

Uso window.getComputedStyle(elem, null).getPropertyValue("background-color"); para obtener la cadena de color de fondo. Luego, verifica si está en el formato deseado.

• rgb (n, n, n)
• Otros, como HSL, RGBA, HSLA, ... convertir estas usando una herramienta fácil de encontrar algoritmo
• nombres de colores: Crear un map of colornames-to-rgb (como: var name2rgb = {red: "rgb(255, 0, 0)"};)

Puede encontrar una lista de nombres de colores en la web. Visita this site para una lista de colornames (que es probablemente not complete).

Answer 3

Esta función te llevará a la R y G y B que se puede utilizar para crear cualquier formato que desee:

color_1 = resolve_color('#FFCC00'); 

color_2 = resolve_color('#FC0'); 

color_3 = resolve_color('rgb(255, 204, 0)'); 

color_4 = resolve_color('rgb(100%, 80%, 0%)'); 

En todos los ejemplos, color_N es:

/* color_N is an array 
* - color_N['red'] : 255 
* - color_N['greenn'] : 204 
* - color_N['red'] : 0 
*/ 

Función

function resolve_color(color){ 
    // return an array containing R, G and B values 
    if(color === 'transparent')// IE (6 and ?) 
     color = '#FFF'; 
    var r,g,b; 
    var hex_color_pcre = new RegExp("^#[0-9a-f]{3}([0-9a-f]{3})?$",'gi'); 
    var rgb_color_pcre = new RegExp("rgb\\(\\s*((?:[0-2]?[0-9])?[0-9])\\s*,\\s*((?:[0-2]?[0-9])?[0-9])\\s*,\\s*((?:[0-2]?[0-9])?[0-9])\\s*\\)$",'gi'); 
    var rgb_percent_color_pcre = new RegExp("rgb\\(\\s*((?:[0-1]?[0-9])?[0-9])%\\s*,\\s*((?:[0-1]?[0-9])?[0-9])%\\s*,\\s*((?:[0-1]?[0-9])?[0-9])%\\s*\\)$",'gi'); 
    if(color.match(hex_color_pcre)){ 
     if(color.length == 4){ 
      r = color.charAt(1)+""+color.charAt(1); 
      g = color.charAt(2)+""+color.charAt(2); 
      b = color.charAt(3)+""+color.charAt(3); 
     } 
     else{ 
      r = color.charAt(1)+""+color.charAt(2); 
      g = color.charAt(3)+""+color.charAt(4); 
      b = color.charAt(5)+""+color.charAt(6); 
     } 
     r = h2d(r); 
     g = h2d(g); 
     b = h2d(b); 
    } 
    else if(color.match(rgb_color_pcre)){ 
     r = RegExp.$1; 
     g = RegExp.$2; 
     b = RegExp.$3; 
    } 
    else if(color.match(rgb_percent_color_pcre)){ 
     r = parseInt((RegExp.$1)*2.55); 
     g = parseInt((RegExp.$2)*2.55); 
     b = parseInt((RegExp.$3)*2.55); 
    } 
    else 
     return false; 

    var returned =[]; 
    returned['red'] = r; 
    returned['green'] = g; 
    returned['blue'] = b; 
    return returned; 
} 

function h2d(h) { 
    // hex to decimal 
    return parseInt(h,16); 
} 

fuente: http://www.kadimi.com/en/javascript-tween-function-368