如何将“背景颜色”转换为 rgb() 格式？

Posted 2023-02-21

【中文标题】如何将“背景颜色”转换为 rgb() 格式？

【英文标题】：How to convert "background-color" to rgb() format?

【发布时间】：2011-11-19 20:06:35

【问题描述】：

这是我的问题：

我想更改页面上其中一个元素的背景颜色的不透明度。为此，我需要先将颜色转换为 rgb() 格式。 （或提取 r、g 和 b 元素）。

here 我可以看到如何将十六进制字符串转换为数字格式，但颜色并不总是十六进制格式。它们可以命名为“红色”等颜色。

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

有人知道如何做到这一点吗？

问候。

【问题讨论】：

那不是rgba() 格式，那是rgb() 格式。

这没什么区别，rgb() 和 rgba() 格式很容易相互转换。如果问题更清楚，我们可以编辑问题。

【参考方案1】：

要将颜色名称转换为 RGB 或 HEX，您首先需要一个颜色名称字典和相应的值，然后才能执行此操作：

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>

【讨论】：

请再次阅读问题，这仅适用于十六进制字符串。

ok valipour。比我马上写一个 [red,green,gray,black....] 的 var 列表并转换它的值。

这是可行的，但老实说我觉得这样做不太好，我认为必须从浏览器中获取它，因为浏览器已经知道它！

@roXon：这是语法高亮器将您的代码高亮为 javascript 的提示。查看更多信息：meta.stackexchange.com/questions/78363/…

【参考方案2】：

使用window.getComputedStyle(elem, null).getPropertyValue("background-color"); 获取背景色字符串。然后，检查它是否是所需的格式。

rgb(n, n, n) 其他，例如 hsl、rgba、hsla、... 使用易于查找的算法转换这些 颜色名称：创建颜色名称到 rgb 的映射（例如：var name2rgb = red: "rgb(255, 0, 0)";）

可以在网络上找到颜色名称列表。访问this site 获取颜色名称列表（可能是not complete）。

【参考方案3】：

此函数将为您提供 r 和 g 和 b，您可以使用它们来创建您想要的任何格式：

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%)');

在所有示例中，color_N 为：

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

功能

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);
 

来源： http://www.kadimi.com/en/javascript-tween-function-368