Màu nền hex thành biến JavaScript

Question

Tôi là loại mới đối với JavaScript và jQuery và giờ tôi đang gặp sự cố:

Tôi cần đăng một số dữ liệu lên PHP và một chút dữ liệu cần phải hex màu nền của div X.

jQuery có hàm css ("background-color") và với nó, tôi có thể nhận giá trị RGB của nền vào biến JavaScript.

Hàm CSS dường như trả về một chuỗi như rgb này (0, 70, 255).

Tôi không thể tìm thấy bất kỳ cách nào để có được hex của màu nền (mặc dù nó được đặt dưới dạng hex trong CSS).

Vì vậy, có vẻ như tôi cần chuyển đổi nó. Tôi tìm thấy một chức năng để chuyển đổi RGB thành hex, nhưng nó cần phải được gọi với ba biến khác nhau, r, g và b. Vì vậy, tôi sẽ cần phải phân tích chuỗi rgb (x, xx, xxx) thành var r = x; var g = xx; var b = xxx; bằng cách nào đó.

Tôi đã cố gắng phân tích cú pháp các chuỗi bằng JavaScript, nhưng tôi đã không thực sự hiểu được cụm từ thông dụng.

Có cách nào để lấy màu nền của div làm hex hay chuỗi có thể được chuyển đổi thành 3 biến khác nhau không?

Answer 1

thử này ra:

var rgbString = "rgb(0, 70, 255)"; // get this in whatever way. 

var parts = rgbString.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); 
// parts now should be ["rgb(0, 70, 255", "0", "70", "255"] 

delete (parts[0]); 
for (var i = 1; i <= 3; ++i) { 
    parts[i] = parseInt(parts[i]).toString(16); 
    if (parts[i].length == 1) parts[i] = '0' + parts[i]; 
} 
var hexString ='#'+parts.join('').toUpperCase(); // "#0070FF" 

Để đối phó với các câu hỏi trong các ý kiến ​​dưới đây:

Tôi đang cố gắng để thay đổi regex để xử lý cả hai rgb và rgba tùy cái nào tôi nhận được . Bất kỳ gợi ý nào? Cảm ơn.

Tôi không chắc chắn nếu nó có ý nghĩa trong bối cảnh của câu hỏi này (vì bạn không thể đại diện cho một màu rgba trong hex), nhưng tôi đoán có thể có sử dụng khác. Dù sao, bạn có thể thay đổi regex để được như thế này: đầu ra

/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(0\.\d+))?\)$/ 

Ví dụ:

var d = document.createElement('div'); 
d.style.backgroundColor = 'rgba(255, 60, 50, 0)'; 

/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(1|0\.\d+))?\)$/.exec(d.style.backgroundColor); 

// ["rgba(255, 60, 50, 0.33)", "255", "60", "50", "0.33"] 

Answer 2

Bạn có thể thiết lập một màu CSS sử dụng rgb cũng có, như thế này:

background-color: rgb(0, 70, 255); 

Đó là valid CSS, đừng lo lắng.

---

Edit: Xem nickf answer kiếm một cách thoải mái để chuyển đổi nó nếu bạn hoàn toàn cần đến.

Answer 3

tôi thấy chức năng khác một thời gian trở lại (by R0bb13). Nó không có regex, vì vậy tôi phải mượn nó từ nickf để nó hoạt động bình thường. Tôi chỉ đăng nó bởi vì nó là một phương pháp thú vị mà không sử dụng một tuyên bố nếu hoặc một vòng lặp để cung cấp cho bạn một kết quả.Ngoài ra kịch bản này trả về giá trị hex với # (Nó là cần thiết bởi các plugin Farbtastic Tôi đã sử dụng vào thời điểm đó)

//Function to convert hex format to a rgb color 
function rgb2hex(rgb) { 
var hexDigits = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"]; 
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); 
function hex(x) { 
    return isNaN(x) ? "00" : hexDigits[(x - x % 16)/16] + hexDigits[x % 16]; 
} 
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); 
} 

// call the function: rgb("rgb(0, 70, 255)"); 
// returns: #0046ff 

Lưu ý: Kết quả hex từ kịch bản nickf của nên 0046ff và không 0070ff, nhưng không lớn thỏa thuận: P

Update, khác tốt hơn phương pháp thay thế:

function rgb2hex(rgb) { 
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); 
function hex(x) { 
    return ("0" + parseInt(x).toString(16)).slice(-2); 
} 
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); 
} 

Answer 4

tôi tìm thấy giải pháp này http://haacked.com/archive/2009/12/29/convert-rgb-to-hex.aspx và tôi đang sử dụng nó trong dự án của tôi

Answer 5

Các giải pháp này sẽ không thành công trong Chrome, vì nó trả về một rgba (x, x, x, x) cho màu nền.

CHỈNH SỬA: Điều này không nhất thiết phải đúng. Chrome sẽ vẫn đặt nền bằng cách sử dụng rgb(), tùy thuộc vào những gì bạn đang làm. Nhiều khả năng miễn là không có kênh alpha nào được áp dụng, Chrome sẽ phản hồi với rgb thay vì rgba.

Answer 6

Làm thế nào về giải pháp này, chức năng stringRGB2HEX trả về một bản sao của chuỗi đầu vào nơi mà tất cả occurencies màu sắc theo định dạng "rgb (r, g, b)" đã được thay thế bởi các định dạng hex "#rrggbb".

//function for private usage of the function below 
    //(declaring this one in global scope should make it faster rather than 
    //declaraing it as temporary function inside stringRGB2HEX that need to be 
    //instantieted at every call of stringRGB2HEX 
    function _rgb2hex(rgb_string, r, g, b) 
    { 
     //VERY IMPORTANT: by adding (1 << 24) we avoid 'rgb(0, 0, 0)' to be mistakenly converted into '#0' 
     var rgb = (1 << 24) | (parseInt(r) << 16) | (parseInt(g) << 8) | parseInt(b); //same thing of: (r + (256 * g) + (65536 * b) + 16777216) 
     //toString(16) specify hex 16 radix, works only for numbers [source: http://msdn.microsoft.com/en-us/library/dwab3ed2(v=VS.85).aspx] 
     return '#' + rgb.toString(16).substr(1); //substr(1) because we have to remove the (1 << 24) added above 
    } 

    function stringRGB2HEX(string) 
    { 
     if(typeof string === 'string') 
     string = string.replace(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/g, _rgb2hex); 
     return string; 
    } 

Điều này cũng chuyển đổi màu rgb theo kiểu phức tạp như background.

Một giá trị style.background như: "none no-repeat scroll rgb(0, 0, 0)" có thể dễ dàng chuyển đổi thành "none no-repeat scroll #000000" bằng cách đơn giản làm stringRGB2HEX(style.background)

Answer 7

Với JQuery ..

var cssColorToHex = function(colorStr){ 
    var hex = '#'; 
    $.each(colorStr.substring(4).split(','), function(i, str){ 
     var h = ($.trim(str.replace(')',''))*1).toString(16); 
     hex += (h.length == 1) ? "0" + h : h; 
    }); 
    return hex; 
}; 

Answer 8

http://www.phpied.com/rgb-color-parser-in-javascript/

lớp

Một JavaScript mà chấp nhận một chuỗi và cố gắng để con số ra một màu hợp lệ ra khỏi nó. Một số đầu vào được chấp nhận là ví dụ:

* rgb(0, 23, 255) 
* #336699 
* ffee66 
* fb0 
* red 
* darkblue 
* cadet blue 

Answer 9

Nếu bạn có jQuery, đây là phiên bản siêu nhỏ gọn mà tôi vừa mới đưa ra.

 
var RGBtoHEX = function(color) { 
    return "#"+$.map(color.match(/\b(\d+)\b/g),function(digit){ 
    return ('0' + parseInt(digit).toString(16)).slice(-2) 
    }).join(''); 
}; 

Answer 10

Ở đây bạn đi, điều này sẽ cho phép bạn sử dụng $ (selector) .getHexBackgroundColor() để trả về giá trị hex dễ dàng:

$.fn.getHexBackgroundColor = function() { 
    var rgb = $(this).css('background-color'); 
    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); 
    function hex(x) {return ("0" + parseInt(x).toString(16)).slice(-2);} 
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); 
}