RGB मान के बजाय हेक्स रंग मान कैसे प्राप्त करें?

Question

निम्नलिखित jQuery का उपयोग करने से किसी तत्व की पृष्ठभूमि रंग का RGB मान प्राप्त होगा:

$('#selector').css('backgroundColor');

आरजीबी के बजाय हेक्स मूल्य प्राप्त करने का एक तरीका है?

Comments

एक संबंधित विषय पर, हेक्स और आरजीबी रंगों के बीच परिवर्तित करने के लिए और अधिक (और यकीनन बेहतर) तरीके यहां हैं: stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb यह पहिया पर्याप्त बार में नयापन लाया कर दिया गया है एक सड़क ट्रेन बनाने के लिए। मैं लोकप्रिय जेएस पुस्तकालयों में से एक की उम्मीद कर रहा था, कम से कम, एक उपयोगिता समारोह होगा।

— माइकल शेपर

याद रखें कि कुछ ब्राउज़र rgba (#, #, #, #), जैसे कि rgba (0,0,0,0) लौटाते हैं, जो पारदर्शी होता है, काला नहीं। 4 का मूल्य अस्पष्टता है, जिसमें 1.0 पूर्ण रंग 100% और 0.5 50% है।

— बारह बारह

Answer 1

var hexDigits = new Array
        ("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); 

//Function to convert rgb color to hex format
function rgb2hex(rgb) {
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

function hex(x) {
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
 }

( स्रोत )

Comments

+1, आप नंबर का उपयोग कर सकते हैं। स्ट्रींग (16) - कम से कम प्रत्येक हेक्स डिजिट के लिए (या 0 के साथ पैड यदि 16 वर्ष से कम हो)

— orip

-1। जैसा कि ओरीप ने उल्लेख किया है, आप उपयोग कर सकते हैं (16)। अन्य अक्षमताओं के लिए नीचा दिखाया गया। यदि आप हर फ़ंक्शन कॉल पर hexDigits घोषित करने जा रहे हैं, तो कम से कम इसे rgb2hex के फ़ंक्शन बॉडी (hex's body) में नहीं करें, इसलिए rgb2hex के लिए कॉल को प्रति 1 कॉल पर 3 बार पुनर्निर्धारित नहीं किया जाता है। इसके अलावा 'var' का उपयोग करना सीखें, ताकि आप वैश्विक दायरे को प्रदूषित न करें।

— मैट

यह विधि भिन्न-भिन्न श्वेत-स्थान या पूंजीकरण के प्रति बहुत सहिष्णु नहीं लगती है। jsfiddle.net/Xotic750/pSQ7d

— Xotic750

यदि आप वास्तव में पांडित्यपूर्ण होना चाहते हैं, तो आप regex को अधिक अनुमति दे सकते हैं: rgb.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i)हालाँकि, दिए गए rexx को jQuery का उपयोग करते समय एक ब्राउज़र द्वारा दिए गए प्रारूप के साथ सामना करने के लिए डिज़ाइन किया गया है, और इसमें अलग-अलग श्वेत-स्थान या कैप्शन विभाजन नहीं हैं आप इस बारे में बात कर रहे हैं। आप एक ही रेगेक्स का उपयोग भी कर सकते हैं और बस सभी व्हाट्सएप को हटा सकते हैं और आरजीबी पर मिलान करने से पहले लोअरकेस में बदल सकते हैं। PS आपका फिडेल उदाहरण: 'rgb (10, 128,)' मुझे नहीं लगता कि परीक्षण करने के लिए उचित है

— binderbound

और मेरे लिए jquery css पृष्ठभूमि-रंग की वापसी rgba के साथ प्रारूप में आती है, इसलिए यह काम नहीं करता है।

— मिगेल

Answer 2

यहाँ मैं @ सुझाव पर आधारित क्लीनर समाधान लिखा गया है:

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

कुछ ब्राउज़र पहले से ही हेक्साडेसिमल (इंटरनेट एक्सप्लोरर 8 और नीचे के रूप में) के रूप में रंग लौटाते हैं। यदि आपको उन मामलों से निपटने की आवश्यकता है, तो फ़ंक्शन के अंदर एक शर्त को जोड़ दें, जैसे @gfrobenius ने सुझाव दिया है:

function rgb2hex(rgb) {
    if (/^#[0-9A-F]{6}$/i.test(rgb)) return 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]);
}

यदि आप jQuery का उपयोग कर रहे हैं और अधिक संपूर्ण दृष्टिकोण चाहते हैं, तो आप jQuery 1.4.3 के बाद से उपलब्ध CSS हुक का उपयोग कर सकते हैं , जैसा कि मैंने इस प्रश्न का उत्तर देते समय दिखाया: क्या मैं jQuery.css ("बैकग्राउंडर") को हेक्साडेसिमल प्रारूप पर वापस ला सकता हूं?

Comments

मैं हर किसी के लिए सुझाव देते हैं: मेरी प्रतिक्रिया पर एक नज़र यहाँ का उपयोग कर एक उन्नत संस्करण को देखने के लिए jQuery सीएसएस हुक ।

— एरिक पेट्रुकेली

@Ghigo, क्षमा करें, लेकिन आप गलत हैं। IE8 पहले से ही वर्तमान शैली प्राप्त करते समय रंगों को हेक्साडेसिमल के रूप में वापस करता है, इस तरह से document.getElementById("your_id").currentStyle["backgroundColor"]:। फ़ंक्शन rgb2hex()की आवश्यकता नहीं है। यहाँ ऊपर दिए गए CSS हुक का उपयोग करके jQuery प्लगइन है, जो मैंने पहले ही सुझाया था, जो पहले से ही अलग-अलग ब्राउज़रों में रंगों को पुनर्प्राप्त करने के लिए सभी सत्यापन करता है: stackoverflow.com/questions/6177454/…

— Erick Petrucelli

@Ghigo, मुझे लगता है कि आप गलत समझ रहे हैं: यदि आप एक ब्राउज़र में हैं जो HEX में लौटता है, तो आप इस फ़ंक्शन का उपयोग नहीं कर सकते। यह फ़ंक्शन RGB को HEX में परिवर्तित करता है और बस इसे। जब यह RGB में न हो तो इसका उपयोग न करें। तथ्य यह है कि आपको अधिक पूर्ण समाधान की आवश्यकता है (जो पता लगाता है कि मान पहले से ही आरजीबी के रूप में @ जिम-एफ द्वारा बनाया गया है) इस तथ्य को नहीं बदलता है कि यह समाधान बिल्कुल वही प्रदान करता है जो ओपी द्वारा अनुरोध किया गया था। आपके पतन का कोई मतलब नहीं है, क्षमा करें।

— एरिक पेट्रुकेली

मुझे खेद है लेकिन मैं सहमत नहीं हूं। क्रॉस ब्राउज़र फ़ंक्शन हमेशा एक से बेहतर होता है जिसे ब्राउज़र डिटेक्शन के आधार पर निष्पादन की आवश्यकता होती है। ओप $('#selector').css('backgroundColor')को हेक्स में बदलने के लिए कहा गया , हेग में आरजीबी मूल्य नहीं। और IE8 पर, $('#selector').css('backgroundColor')पहले से ही हेक्स है इसलिए इसे संभाला जाना चाहिए। बस। मुझ पर पागल मत हो :)

— घीगो

दोस्तों, एक सरल एक लाइनर मैंने rgb2hex()फंक्शन में जोड़ा , धन्यवाद @ErickPetru! मुझे IE7 पर विश्वास करने या न करने के लिए वापस कोड करना होगा। साथ .css('backgroundColor')और देशी obj.style.backgroundColorIE7 और 8 हेक्स, नहीं आरजीबी वापस आ जाएगी, तो मैं में पहली पंक्ति के रूप में इस जोड़ा rgb2hex(): तो यह सब काम करता है IE7 के लिए रास्ता वापस आपूर्ति जवाब में समारोह /* IE7&8 will return hex, so no need to run this function if it is already hex. */ if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb.substring(1, 7); //I'm doing a subtring here because I do not want the leading # symbolआशा है कि मदद करता है।

— gfrobenius

Answer 3

उपयोग करते समय अधिकांश ब्राउज़र RGB मान वापस करने लगते हैं:

$('#selector').css('backgroundColor');

केवल IE (अब तक केवल 6 परीक्षण किए गए) हेक्स मान लौटाता है।

IE में त्रुटि संदेशों से बचने के लिए, आप फ़ंक्शन को एक स्टेटमेंट में लपेट सकते हैं:

function rgb2hex(rgb) {
     if (  rgb.search("rgb") == -1 ) {
          return rgb;
     } else {
          rgb = rgb.match(/^rgba?\((\d+),\s*(\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]); 
     }
}

Comments

यह सबसे अधिक दूसरों की तुलना में बेहतर काम करता है, क्योंकि जिम आरजीबी को ध्यान में रखता है, जो कि सफारी (कम से कम मैक ओएस एक्स पर) का उपयोग करता है। धन्यवाद, जिम!

— पास्कल लिंडेलुफ

महान समाधान। ध्यान दें कि फ़ंक्शन लोअर केस लेटर्स देता है यानी # ff5544 नहीं # FF5544।

— पीटर

यह रेगेक्स aplha चैनलों के साथ-साथ उपरोक्त समाधान rgb = rgb.match (/ ^ rgba? (\ D +), \ s * (\ d +), \ s * (\ d +) (?:; \ S *) का समर्थन करेगा। (0 \ \ d +।))) $ /);

— हेनिंग विंटर

आकर्षण की तरह काम करें

— ucMedia

Answer 4

Rgba संगतता के लिए अपडेट किया गया @ErickPetru:

function rgb2hex(rgb) {
    rgb = rgb.match(/^rgba?\((\d+),\s*(\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]);
}

यदि परिभाषित किया गया है तो मैंने अल्फा वैल्यू से मिलान करने के लिए रेगेक्स को अपडेट किया, लेकिन इसका उपयोग नहीं किया।

Comments

बस पूर्णता के लिए: मैं एक ऐसी चीज़ पर काम कर रहा हूं जो PowerPoint को निर्यात करेगा (पूछें नहीं ...), और यह अल्फा चैनल के लिए हेक्स स्ट्रिंग पर एक चौथा बाइट स्वीकार करता है, इसलिए कोई इसका उपयोग इस तरह कर सकता है: return hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]) /* Add the alpha channel if it exists */ + (rgb[5] !== undefined ? hex(Math.round(rgb[5] * 255)) : ''); इसके अलावा मैं #इसे अंतिम उपयोग के अज्ञेय बनाने के लिए प्रतीक को हटा रहा हूं (कोई आउटपुट प्राप्त कर सकता है और 0xउदाहरण के लिए इसे प्रीपेन्ड कर सकता है , या इसे उपसर्ग के बिना छोड़ सकता है)। आशा है कि यह किसी की मदद करता है!

— सकर गोमेज़ अलकनीज़

Answer 5

यहाँ एक ES6 एक लाइनर है जो jQuery का उपयोग नहीं करता है:

var rgb = document.querySelector('#selector').style['background-color'];
return '#' + rgb.substr(4, rgb.indexOf(')') - 4).split(',').map((color) => parseInt(color).toString(16)).join('');

Comments

धन्यवाद, जिसने मुझे एक वर्डप्रेस पेज में शामिल करने में मदद की, जो पिछले उत्तरों में रेगेक्स बैकस्लैश को स्ट्रिप्स करता है।

— जेसन

Answer 6

यहां एक संस्करण है जो पारदर्शी के लिए भी जांच करता है, मुझे इसकी आवश्यकता थी क्योंकि मेरी वस्तु को एक शैली विशेषता में परिणाम डालना था, जहां एक हेक्स रंग का पारदर्शी संस्करण वास्तव में "पारदर्शी" शब्द है।

function rgb2hex(rgb) {
     if (  rgb.search("rgb") == -1 ) {
          return rgb;
     }
     else if ( rgb == 'rgba(0, 0, 0, 0)' ) {
         return 'transparent';
     }
     else {
          rgb = rgb.match(/^rgba?\((\d+),\s*(\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 7

फ़ंक्शन जो हेक्स में एक तत्व की पृष्ठभूमि का रंग देता है।

function getBgColorHex(elem){
    var color = elem.css('background-color')
    var hex;
    if(color.indexOf('#')>-1){
        //for IE
        hex = color;
    } else {
        var rgb = color.match(/\d+/g);
        hex = '#'+ ('0' + parseInt(rgb[0], 10).toString(16)).slice(-2) + ('0' + parseInt(rgb[1], 10).toString(16)).slice(-2) + ('0' + parseInt(rgb[2], 10).toString(16)).slice(-2);
    }
    return hex;
}

उपयोग उदाहरण:

$('#div1').click(function(){
   alert(getBgColorHex($(this));
}

jsfiddle

Answer 8

@Jim F उत्तर की तरह ही उत्तर लेकिन ES6 वाक्यविन्यास, इसलिए, कम निर्देश:

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

Answer 9

रंग वर्ग बूटस्ट्रैप रंग बीनने से लिया गया

// Color object
var Color = function(val) {
    this.value = {
        h: 1,
        s: 1,
        b: 1,
        a: 1
    };
    this.setColor(val);
};

Color.prototype = {
    constructor: Color,

    //parse a string to HSB
    setColor: function(val){
        val = val.toLowerCase();
        var that = this;
        $.each( CPGlobal.stringParsers, function( i, parser ) {
            var match = parser.re.exec( val ),
            values = match && parser.parse( match ),
            space = parser.space||'rgba';
            if ( values ) {
                if (space === 'hsla') {
                    that.value = CPGlobal.RGBtoHSB.apply(null, CPGlobal.HSLtoRGB.apply(null, values));
                } else {
                    that.value = CPGlobal.RGBtoHSB.apply(null, values);
                }
                return false;
            }
        });
    },

    setHue: function(h) {
        this.value.h = 1- h;
    },

    setSaturation: function(s) {
        this.value.s = s;
    },

    setLightness: function(b) {
        this.value.b = 1- b;
    },

    setAlpha: function(a) {
        this.value.a = parseInt((1 - a)*100, 10)/100;
    },

    // HSBtoRGB from RaphaelJS
    // https://github.com/DmitryBaranovskiy/raphael/
    toRGB: function(h, s, b, a) {
        if (!h) {
            h = this.value.h;
            s = this.value.s;
            b = this.value.b;
        }
        h *= 360;
        var R, G, B, X, C;
        h = (h % 360) / 60;
        C = b * s;
        X = C * (1 - Math.abs(h % 2 - 1));
        R = G = B = b - C;

        h = ~~h;
        R += [C, X, 0, 0, X, C][h];
        G += [X, C, C, X, 0, 0][h];
        B += [0, 0, X, C, C, X][h];
        return {
            r: Math.round(R*255),
            g: Math.round(G*255),
            b: Math.round(B*255),
            a: a||this.value.a
        };
    },

    toHex: function(h, s, b, a){
        var rgb = this.toRGB(h, s, b, a);
        return '#'+((1 << 24) | (parseInt(rgb.r) << 16) | (parseInt(rgb.g) << 8) | parseInt(rgb.b)).toString(16).substr(1);
    },

    toHSL: function(h, s, b, a){
        if (!h) {
            h = this.value.h;
            s = this.value.s;
            b = this.value.b;
        }
        var H = h,
        L = (2 - s) * b,
        S = s * b;
        if (L > 0 && L <= 1) {
            S /= L;
        } else {
            S /= 2 - L;
        }
        L /= 2;
        if (S > 1) {
            S = 1;
        }
        return {
            h: H,
            s: S,
            l: L,
            a: a||this.value.a
        };
    }
};

कैसे इस्तेमाल करे

var color = new Color("RGB(0,5,5)");
color.toHex()

Answer 10

पठनीय और & quot; रेग-एक्सप-फ्री (कोई रेग-एक्सप)

मैंने एक फ़ंक्शन बनाया है जो पठनीय बुनियादी कार्यों और कोई reg-exp का उपयोग करता है।
फ़ंक्शन हेक्स, आरजीबी या आरजीबीए सीएसएस प्रारूप में रंग को स्वीकार करता है और हेक्स प्रतिनिधित्व देता है।
संपादित करें: वहाँ एक बग था जिसे rgba () प्रारूप से तय किया गया था ...

function getHexColor( color ){
    //if color is already in hex, just return it...
    if( color.indexOf('#') != -1 ) return color;
    
    //leave only "R,G,B" :
    color = color
                .replace("rgba", "") //must go BEFORE rgb replace
                .replace("rgb", "")
                .replace("(", "")
                .replace(")", "");
    color = color.split(","); // get Array["R","G","B"]
    
    // 0) add leading #
    // 1) add leading zero, so we get 0XY or 0X
    // 2) append leading zero with parsed out int value of R/G/B
    //    converted to HEX string representation
    // 3) slice out 2 last chars (get last 2 chars) => 
    //    => we get XY from 0XY and 0X stays the same
    return  "#"
            + ( '0' + parseInt(color[0], 10).toString(16) ).slice(-2)
            + ( '0' + parseInt(color[1], 10).toString(16) ).slice(-2)
            + ( '0' + parseInt(color[2], 10).toString(16) ).slice(-2);
}

Comments

आरजीबीए (0,0,0,0) पर काम नहीं करता है। पहला: आदेश को बदलने की आवश्यकता है .replace("rgba", "") .replace("rgb", "") .replace("(", "") .replace(")", "");अन्यथा, आप a0,0,0,0 के साथ छोड़ देते हैं। और, यह पारदर्शी होने के बजाय # 000000, जो काला है, लौटाता है।

— बारहवीं

यदि एक आरजीबी में 4 मान 0 (शून्य) है, तो उस 'तत्व' के लिए सीएसएस के लिए: तत्व {रंग: # 000000, अस्पष्टता: 0.0;}; जो पारदर्शी है या बस सशर्त रूप से 'आरजीबीए (0,0) लौटाता है , फोन करने वाले को वापस कर दें।

— बारह 24

@ Twelve24 पार्सिंग तय - मैं वास्तव में देखा है कि अपनी टिप्पणी पढ़ने, लेकिन निश्चित रूप से है कि :) के लिए धन्यवाद से पहले, पारदर्शिता का सवाल है - ताकि एक है - समारोह HEXA रंग, या "आधार रंग" लौटने के लिए माना जाता है उद्देश्य पर :)

— jave.web

Answer 11

प्रयत्न

// c - color str e.g."rgb(12,233,43)", result color hex e.g. "#0ce92b"
let rgb2hex= c=> '#'+c.match(/\d+/g).map(x=>(+x).toString(16).padStart(2,0)).join``

// rgb - color str e.g."rgb(12,233,43)", result color hex e.g. "#0ce92b"
let rgb2hex= c=> '#'+c.match(/\d+/g).map(x=>(+x).toString(16).padStart(2,0)).join``

console.log(rgb2hex("rgb(12,233,43"));

Answer 12

यह एक सा अच्छा लग रहा है:

var rgb = $('#selector').css('backgroundColor').match(/\d+/g);
var r   = parseInt(rgb[0], 10);
var g   = parseInt(rgb[1], 10);
var b   = parseInt(rgb[2], 10);
var hex = '#'+ r.toString(16) + g.toString(16) + b.toString(16);

अधिक रसीला वन-लाइनर:

var rgb = $('#selector').css('backgroundColor').match(/\d+/g);
var hex = '#'+ Number(rgb[0]).toString(16) + Number(rgb[1]).toString(16) + Number(rgb[2]).toString(16);

मजबूरन jQuery को हमेशा हेक्स वापस करना:

$.cssHooks.backgroundColor = {
    get: function(elem) {
        if (elem.currentStyle)
            var bg = elem.currentStyle["backgroundColor"];
        else if (window.getComputedStyle) {
            var bg = document.defaultView.getComputedStyle(elem,
                null).getPropertyValue("background-color");
        }
        if (bg.search("rgb") == -1) {
            return bg;
        } else {
            bg = bg.match(/\d+/g);
            function hex(x) {
                return ("0" + parseInt(x).toString(16)).slice(-2);
            }
            return "#" + hex(bg[0]) + hex(bg[1]) + hex(bg[2]);
        }
    }
}

Answer 13

बस @ जस्टिन के उत्तर में ऊपर जोड़ने के लिए ..

यह होना चाहिए

var rgb = document.querySelector('#selector').style['background-color'];
return '#' + rgb.substr(4, rgb.indexOf(')') - 4).split(',').map((color) => String("0" + parseInt(color).toString(16)).slice(-2)).join('');

जैसा कि उपरोक्त पार्स इंट फ़ंक्शंस में अग्रणी शून्य को रौंदता है, इस प्रकार 5 या 4 अक्षरों के गलत रंग कोड का उत्पादन करता है ... यानी आरजीबी (216, 160, 10) के लिए यह # d8a0a पैदा करता है जबकि यह # d8aaa होना चाहिए।

धन्यवाद

Answer 14

यहाँ एक समाधान है जो मैंने पाया है कि IE में स्क्रिप्टिंग त्रुटियों को नहीं फेंकता है: http://haacked.com/archive/2009/12/29/convert-rgb-to-hex.aspx

Comments

IE के पुराने संस्करणों में, jquery का उपयोग करके किसी ऑब्जेक्ट का रंग मूल्य प्राप्त करना कभी-कभी आरजीबी के बजाय हेक्स वापस कर सकता है, जबकि अधिकांश आधुनिक ब्राउज़र आरजीबी लौटाते हैं। फंक्शन से जुड़े दोनों उपयोग मामलों को संभालते हैं

— पॉल टी

Answer 15

स्टीवन प्रिबिलिनस्की का उत्तर अग्रणी शून्य को गिरा देता है, उदाहरण के लिए # ff0000 # ff00 हो जाता है।

एक समाधान एक प्रमुख 0 को जोड़ना है और अंतिम 2 अंकों को प्रतिस्थापित करना है।

var rgb = $('#selector').css('backgroundColor').match(/\d+/g);
var hex = '#'+ String('0' + Number(rgb[0]).toString(16)).slice(-2) + String('0' + Number(rgb[1]).toString(16)).slice(-2) + String('0' + Number(rgb[2]).toString(16)).slice(-2);

Answer 16

चूंकि प्रश्न JQuery का उपयोग कर रहा था, यहाँ डैनियल इलियट के कोड के आधार पर एक JQuery प्लगइन है:

$.fn.cssAsHex = function(colorProp) {

    var hexDigits = '0123456789abcdef';

    function hex(x) {
        return isNaN(x) ? '00' : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
    };

    // Convert RGB color to Hex format
    function rgb2hex(rgb) {
        var rgbRegex = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
        return '#' + hex(rgbRegex[1]) + hex(rgbRegex[2]) + hex(rgbRegex[3]);
    };

    return rgb2hex(this.css(colorProp));
};

इसका उपयोग करें जैसे:

var hexBackgroundColor = $('#myElement').cssAsHex('background-color');

Answer 17

यहाँ मेरा समाधान है, एक तर्क के उपयोग द्वारा टुपर्सेसेज़ भी करता है और आपूर्ति किए गए स्ट्रिंग में अन्य संभावित सफेद-रिक्त स्थान और पूंजीकरण के लिए जांच करता है।

var a = "rgb(10, 128, 255)";
var b = "rgb( 10, 128, 255)";
var c = "rgb(10, 128, 255 )";
var d = "rgb ( 10, 128, 255 )";
var e = "RGB ( 10, 128, 255 )";
var f = "rgb(10,128,255)";
var g = "rgb(10, 128,)";

var rgbToHex = (function () {
    var rx = /^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i;

    function pad(num) {
        if (num.length === 1) {
            num = "0" + num;
        }

        return num;
    }

    return function (rgb, uppercase) {
        var rxArray = rgb.match(rx),
            hex;

        if (rxArray !== null) {
            hex = pad(parseInt(rxArray[1], 10).toString(16)) + pad(parseInt(rxArray[2], 10).toString(16)) + pad(parseInt(rxArray[3], 10).toString(16));

            if (uppercase === true) {
                hex = hex.toUpperCase();
            }

            return hex;
        }

        return;
    };
}());

console.log(rgbToHex(a));
console.log(rgbToHex(b, true));
console.log(rgbToHex(c));
console.log(rgbToHex(d));
console.log(rgbToHex(e));
console.log(rgbToHex(f));
console.log(rgbToHex(g));

पर jsfiddle

Jsperf पर गति की तुलना

एक और सुधार करने के लिए हो सकता है स्ट्रिंगtrim()rgb

var rxArray = rgb.trim().match(rx),

Answer 18

मेरा सुंदर गैर-मानक समाधान

एचटीएमएल

<div id="selector" style="background-color:#f5b405"></div>

jQuery

$("#selector").attr("style").replace("background-color:", "");

परिणाम

#f5b405

Comments

यह स्टाइल में सब कुछ लौटाता है। :

— एडी