Làm cách nào để chuyển đổi định dạng "background-color" thành rgb()?

Question

Đây là vấn đề của tôi:

Tôi muốn thay đổi độ mờ của màu nền của một trong các thành phần trên trang của tôi. để làm điều này, trước tiên tôi cần chuyển đổi màu thành định dạng rgb(). (hoặc trích xuất các phần tử r, g và b).

here Tôi có thể xem cách chuyển đổi chuỗi hex thành định dạng số nhưng màu không phải lúc nào cũng ở định dạng thập lục phân. chúng có thể được đặt tên là màu sắc như "đỏ".

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

Không ai có bất kỳ ý tưởng như thế nào điều này có thể được thực hiện?

Trân trọng.

Answer 1

Để chuyển đổi một colorName để RGB hoặc HEX, trước tiên bạn sẽ cần một cuốn từ điển tên màu và các giá trị tương ứng, hơn bạn có thể làm:

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

Sử dụng window.getComputedStyle(elem, null).getPropertyValue("background-color"); để lấy chuỗi màu nền. Sau đó, kiểm tra xem nó có ở định dạng mong muốn hay không.

• rgb (n, n, n)
• Những người khác, chẳng hạn như HSL, rgba, HSLA, ... chuyển đổi các sử dụng một cách dễ dàng để tìm thấy thuật toán
• tên Màu: Tạo bản đồ của colornames-to-rgb (chẳng hạn như: var name2rgb = {red: "rgb(255, 0, 0)"};)

Danh sách tên màu có thể được tìm thấy trên web. Truy cập this site để biết danh sách tên màu (có thể là not complete).

Answer 3

Chức năng này sẽ giúp bạn có được r và g và b mà bạn có thể sử dụng để tạo ra bất kỳ định dạng mà bạn muốn:

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

Trong tất cả các ví dụ, color_N là:

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

Chức năng

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

nguồn: http://www.kadimi.com/en/javascript-tween-function-368