আরজিবি মানের চেয়ে হেক্স রঙের মানটি কীভাবে পাবেন?


171

নিম্নলিখিত jQuery ব্যবহার করে কোনও উপাদানটির পটভূমির রঙের আরজিবি মান পাবেন:

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

আরজিবির চেয়ে হেক্স মান পাওয়ার কোনও উপায় আছে কি?


2
সম্পর্কিত বিষয়ে হেক্স এবং আরজিবি রঙের মধ্যে রূপান্তর করার আরও (এবং তর্কিততর আরও ভাল) উপায়গুলি এখানে: স্ট্যাকওভারফ্লো / প্রশ্নগুলি / 66৩৩৩83৮ / rgb- to-hex-and-hex-to- rgb এই চাকাটি পর্যাপ্ত সময় পুনরায় পুনর্নবীকরণ করা হয়েছে একটি রোড ট্রেন তৈরি করতে। আমি আশা করছিলাম যে জনপ্রিয় জেএস লাইব্রেরিগুলির মধ্যে একটির চেয়ে কম সহজ, একটি ইউটিলিটি ফাংশন থাকবে।
মাইকেল শ্যাপার

মনে রাখবেন যে কিছু ব্রাউজারগুলি আরজিবা (#, #, #, #) যেমন rgba (0,0,0,0) ফিরিয়ে দেয় যা স্বচ্ছ, কালো নয়। চতুর্থ মানটি অস্বচ্ছতা, 1.0 সহ পুরো রঙ 100% এবং 0.5 টি 50%।
দ্বাদশ 24

উত্তর:


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

( উত্স )


7
+1, আপনি নাম্বার টো স্ট্রিং (16) ব্যবহার করতে পারেন - কমপক্ষে প্রতিটি হেক্স ডিজিটের জন্য (বা 16 এর কম হলে 0 দিয়ে প্যাড)
orip

19
-1। অরিপ দ্বারা উল্লিখিত হিসাবে আপনি টু স্ট্রিং (16) ব্যবহার করতে পারেন। অন্যান্য অদক্ষতার জন্য বঞ্চিত। আপনি যদি প্রতিটি ফাংশন কলে হেক্সডিজিটস ঘোষণা করতে চলেছেন, কমপক্ষে এটি rgb2hex এর ফাংশন বডি (হেক্সের শরীরে নয়) করে নিন, সুতরাং অ্যারেটি আরজিবি 2হেক্সে 1 কল প্রতি 3 বার পুনরায় সংজ্ঞায়িত হয় না। 'ভার' ব্যবহার করতে শিখুন, যাতে আপনি বিশ্বব্যাপী সুযোগকে দূষিত করবেন না।
ম্যাট

3
এই পদ্ধতিটি সাদা-স্থান বা মূলধনকে পৃথক করার পক্ষে খুব সহনীয় বলে মনে হয় না। jsfiddle.net/Xotic750/pSQ7d
Xotic750

1
আপনি যদি সত্যই প্যাডেন্টিক হতে চান তবে আপনি রেইজেক্সকে আরও অনুমোদনযোগ্য করতে পারেন: rgb.match(/^rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i)তবে, দেওয়া রেজেক্সটি jQuery ব্যবহার করার সময় ব্রাউজারের দেওয়া ফর্ম্যাটটি মোকাবেলা করার জন্য ডিজাইন করা হয়েছে, এবং এতে আলাদা সাদা স্থান বা ক্যাপিলাইজেশন ধারাবাহিকতা নেই this আপনি কথা বলছেন আপনি একই রেজেক্স ব্যবহার করতে পারেন এবং কেবল সমস্ত হোয়াইটস্পেসগুলি সরিয়ে আরজিবিতে মিলার আগে ছোট হাতের অক্ষরে রূপান্তর করতে পারেন। পিএস আপনার বেহাল দৃষ্টান্ত উদাহরণ: 'আরজিবি (10, 128,)' আমি মনে করি না যে এটি পরীক্ষা করা যুক্তিসঙ্গত
বাইন্ডারবাউন্ড

এবং আমার জন্য jquery CSS ব্যাকগ্রাউন্ড-রঙগুলির ফিরতি rgba সহ ফর্ম্যাটে আসে, সুতরাং এটি কাজ করে না।
মিগুয়েল

159

@ ম্যাট পরামর্শের উপর ভিত্তি করে আমি যে ক্লিনারটি লিখেছিলাম তা এখানে রয়েছে:

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 সাল থেকে উপলব্ধ সিএসএস হুক ব্যবহার করতে পারেন , যেমনটি আমি এই প্রশ্নের উত্তর দেওয়ার সময় দেখিয়েছি: আমি কি jQuery.css ("ব্যাকগ্রাউন্ড কালার") রিটার্নকে হেক্সাডেসিমাল ফর্ম্যাটে জোর করতে পারি?


2
আমি সকলকে পরামর্শ দিচ্ছি: jQuery CSS হুক ব্যবহার করে উন্নত সংস্করণ দেখতে এখানে আমার প্রতিক্রিয়াটি একবার দেখুন ।
এরিক পেট্রোসেলি

1
@ জিগো, দুঃখিত তবে আপনি ভুল বলেছেন। IE8 ইতিমধ্যে হেক্সাডেসিমেল যেমন রং ফেরৎ যখন বর্তমান শৈলী এই ভাবে পেয়ে,: document.getElementById("your_id").currentStyle["backgroundColor"]। ফাংশন rgb2hex()প্রয়োজন হয় না। এখানে উপরে প্রস্তাবিত সিএসএস হুক ব্যবহার করে এখানে jQuery প্লাগইন দেওয়া হয়েছে, যা ইতিমধ্যে বিভিন্ন ব্রাউজারে রঙ পুনরুদ্ধার করার জন্য সমস্ত বৈধতা রয়েছে: স্ট্যাকওভারফ্লো
প্রশ্নগুলি

2
@ জিগো, আমি মনে করি আপনি ভুল বুঝেছেন: আপনি এইচএক্স-এ ফিরে আসা ব্রাউজারে থাকলে আপনি এই ফাংশনটি ব্যবহার করবেন না। এই ফাংশনটি আরজিবিকে এইচএক্স এবং রূপান্তরিত করে। আরজিবিতে না থাকলে এটি ব্যবহার করবেন না। আপনার আরও একটি সম্পূর্ণ সমাধানের প্রয়োজন (যেটি জিম-এফ দ্বারা নির্ধারিত মানটি ইতিমধ্যে আরজিবি হিসাবে রয়েছে কিনা তা সনাক্ত করে) এই সমাধানটি ওপি কর্তৃক অনুরোধ করা হয়েছে ঠিক তেমন প্রস্তাব দেয় তা পরিবর্তন করে না। আপনার ডাউনভোটটি কোনও অর্থ দেয় না, দুঃখিত।
এরিক পেট্রুসিলি

4
আমি দুঃখিত তবে আমি রাজি হই না। ব্রাউজার সনাক্তকরণের উপর ভিত্তি করে কার্যকরকরণের প্রয়োজনের চেয়ে ক্রস ব্রাউজার ফাংশনটি সর্বদা ভাল। ওপ $('#selector').css('backgroundColor')হেক্সে কোনও আরজিবি মান নয়, হেক্সে রূপান্তর করতে বলেছিল । এবং আই 8 এ, $('#selector').css('backgroundColor')ইতিমধ্যে হেক্স তাই এটি অবশ্যই পরিচালনা করা উচিত। এটাই. আমাকে পাগল করবেন না :)
ঝিগো

1
এই ছেলেরা করুন, আমি একটি সাধারণ একটি লাইনার rgb2hex()ফাংশনে যুক্ত করেছি, ধন্যবাদ @ এরিকপেট্রু! আমি আইই 7 তে ফিরে কোড করতে হবে এটি বিশ্বাস করুন বা না করুন। সাথে .css('backgroundColor')এবং নেটিভ obj.style.backgroundColorআই 7 এবং 8 হেক্স ফিরে আসবে, আরজিবি নয়, তাই আমি rgb2hex()সরবরাহকৃত উত্তরে ফাংশনটির প্রথম লাইন হিসাবে এটি যুক্ত করেছি যাতে এটি আই 7-তে ফিরে সমস্তভাবে কাজ করে: /* 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

61

বেশিরভাগ ব্রাউজারগুলি ব্যবহার করার সময় আরজিবি মানটি ফেরত দেয় বলে মনে হয়:

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

কেবলমাত্র আইই (এখনও পর্যন্ত পরীক্ষিত 6) হেক্স মানটি প্রদান করে।

আইই তে ত্রুটি বার্তা এড়ানোর জন্য, আপনি যদি একটি বিবৃতিতে ফাংশনটি মোড়ানো করতে পারেন:

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

1
এটি বেশিরভাগের তুলনায় আরও ভাল কাজ করে, যেহেতু জিম rgba আমলে নেয়, যা সাফারি (অন্তত ম্যাক ওএস এক্সে) ব্যবহার করে। ধন্যবাদ, জিম!
পাস্কাল লিন্ডেলাফ

1
দুর্দান্ত সমাধান। নোট করুন যে ফাংশনটি ছোট হাতের অক্ষরগুলি দেয় যেমন # ff5544 # FF5544 নয়।
পিটার

উপরের সমাধান rgb = rgb.match (/ ^ rgba? ((\ D +)), \ s * (\ d +), \ s * (\ d +) (?:, \ S * এ এই রেজেক্স অ্যাপ্লা চ্যানেলগুলিকেও সমর্থন করবে) (0 \ \ D +।))) $ /);
হেনিং শীতকাল


22

আরজিবা সামঞ্জস্যের জন্য @ এরিকপেট্রু আপডেট করেছেন:

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

আমি সংজ্ঞায়িত হয়ে থাকলে আলফা মানটির সাথে মিলে মিশ্রিত করতে আপডেট করেছিলাম, তবে এটি ব্যবহার না করে not


কেবল সম্পূর্ণতার জন্য: আমি এমন একটি জিনিসে কাজ করছি যা পাওয়ারপয়েন্টে রফতানি করবে (জিজ্ঞাসা করবেন না ...) এবং এটি আলফা চ্যানেলের জন্য হেক্স স্ট্রিংয়ের একটি চতুর্থ বাইট গ্রহণ করে, যাতে কেউ এটির মতো এটি ব্যবহার করতে পারে: 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উদাহরণস্বরূপ প্রেন্ডেন্ড করতে পারে , বা উপসর্গ ছাড়াই এটি ছেড়ে দিতে পারে)। আশা করি এটি কাউকে সাহায্য করবে!
এস্কার গমেজ আলকায়েজ

10

এখানে একটি 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('');

1
ধন্যবাদ, এটি আমাকে এটি একটি ওয়ার্ডপ্রেস পৃষ্ঠায় অন্তর্ভুক্ত করতে সহায়তা করেছিল যা পূর্ববর্তী উত্তরে রেজেেক্স ব্যাকস্ল্যাশগুলি বাদ দেয়।
জেসন

5

এখানে এমন একটি সংস্করণ রয়েছে যা স্বচ্ছের জন্যও যাচাই করে, আমার এটি প্রয়োজন যেহেতু আমার অবজেক্টটি ফলাফলটিকে স্টাইলের বৈশিষ্ট্যে সন্নিবেশ করানো ছিল, যেখানে হেক্স রঙের স্বচ্ছ সংস্করণটি আসলে "স্বচ্ছ" শব্দটি ..

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

4

ফাংশন যা হেক্সে কোনও উপাদানের পটভূমি রঙ দেয়।

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


4

@ জিম এফ উত্তর মত একই উত্তর কিন্তু 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]);
};

3

বুটস্ট্র্যাপের রঙ চয়নকারী থেকে নেওয়া রঙের ক্লাস

// 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()

3

পঠনযোগ্য ও& রেগ-এক্সপ্রেস বিনামূল্যে (কোনও রেগ-এক্সপ্রেস নেই)

আমি এমন একটি ফাংশন তৈরি করেছি যা পঠনযোগ্য বেসিক ফাংশন এবং কোনও রেগ-এক্সপ্রেস ব্যবহার করে।
ফাংশনটি হেক্স, আরজিবি বা আরজিবা সিএসএস ফর্ম্যাটে রঙ গ্রহণ করে এবং হেক্সের উপস্থাপনা প্রদান করে।
সম্পাদনা: আরগবা () ফর্ম্যাটটি পার্সিং সহ একটি বাগ ছিল, স্থির ...

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

1
Rgba (0,0,0,0) এ কাজ করে না। প্রথম: আদেশটি পরিবর্তন করা দরকার .replace("rgba", "") .replace("rgb", "") .replace("(", "") .replace(")", "");অন্যথায়, আপনি a0,0,0,0 দিয়ে বামে যান। এবং এটি # 000000 ফেরত দেয় যা স্বচ্ছের পরিবর্তে কালো is
দ্বাদশবার

যদি কোনও আরজিবিএর চতুর্থ মান 0 (শূন্য) হয়, তবে সেই 'এলিমেন্ট' এর জন্য সিএসএসের জন্য হবে: উপাদান {রঙ: # 000000, অস্বচ্ছতা: 0.0; transparent যা স্বচ্ছ বা কেবল শর্তাধীন 'rgba (0,0) প্রদান করে , 0,0) 'কলারে ফিরে।
দ্বাদশবার

@ দ্বাদশ ২৪ পার্সিং ঠিক করা - আমি আসলে লক্ষ্য করেছি যে আপনার মন্তব্য পড়ার আগে, তবে অবশ্যই তার জন্য ধন্যবাদ :), স্বচ্ছতার জন্য - ফাংশনটি হেক্সা রঙ বা "বেস রঙ" ফেরত দেওয়ার কথা বলেছে - যাতে এটি উদ্দেশ্যযুক্ত হয় :)
jave.web

3

চেষ্টা

// 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``


2

এটিকে কিছুটা সুন্দর লাগছে:

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 সর্বদা hex ফিরে আসতে বাধ্য:

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

2

উপরে উপরে @ জাস্টিনের উত্তর যুক্ত করতে ..

এটা করা উচিত

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 উত্পাদন করে যখন এটি # d8a00a হওয়া উচিত।

ধন্যবাদ


1

আমি এখানে একটি সমাধান পেয়েছি যা আইপি তে স্ক্রিপ্টিং ত্রুটিগুলি ফেলে না: http://haacked.com/archive/2009/12/29/convert-rgb-to-hex.aspx


IE এর পুরানো সংস্করণগুলিতে, jquery ব্যবহার করে কোনও সামগ্রীর রঙের মান আনতে কখনও কখনও rgb এর পরিবর্তে হেক্স ফিরে আসতে পারে, যখন বেশিরভাগ আধুনিক ব্রাউজারগুলি আরজিবি ফিরে আসে। ফাংশনে লিঙ্কযুক্ত উভয় ব্যবহারের কেস পরিচালনা করে
পল টি

1

স্টিভেন প্রবিলিনস্কির উত্তর সর্বাধিক জিরোগুলি ফেলেছে, উদাহরণস্বরূপ # 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);

1

যেহেতু প্রশ্নটি জিকিউরি ব্যবহার করছিল তাই ড্যানিয়েল এলিয়টের কোডের ভিত্তিতে এখানে একটি জিকুয়েরি প্লাগইন রয়েছে:

$.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');

0

এখানে আমার সমাধানটিও রয়েছে, আর্গুমেন্টের ব্যবহার করেও স্প্রেস কেস সরবরাহ করে এবং সরবরাহ করা স্ট্রিংয়ের অন্যান্য সম্ভাব্য সাদা-স্পেস এবং মূলধনের জন্য পরীক্ষা করে।

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

Jspਫ਼ফের সাথে গতির তুলনা

আরও উন্নতি হতে পারে স্ট্রিংtrim()rgb

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

0

আমার সুন্দর অ-মানক সমাধান

এইচটিএমএল

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

jQuery এর

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

ফলাফল

#f5b405

1
এটি স্টাইলে সবকিছু ফিরিয়ে দেয়। : সি
এডি
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.