आरजीबी को हेक्स और हेक्स को आरजीबी

Question

आरजीबी प्रारूप में रंगों को हेक्स प्रारूप में कैसे परिवर्तित करें और इसके विपरीत?

उदाहरण के लिए, में कनवर्ट '#0080C0'करें (0, 128, 192)।

Answer 1

नोट : दोनों rgbToHexपूर्णांक मानों के लिए r, gऔर b, इसलिए यदि आपके पास गैर-पूर्णांक मान हैं, तो आपको अपना राउंडिंग करने की आवश्यकता होगी।

निम्नलिखित आरजीबी को हेक्स रूपांतरण के लिए करेगा और किसी भी आवश्यक शून्य पैडिंग को जोड़ देगा:

function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

alert(rgbToHex(0, 51, 255)); // #0033ff

दूसरे तरीके से परिवर्तित करना:

function hexToRgb(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

alert(hexToRgb("#0033ff").g); // "51";

अंत में, @ कैसाब्लांका के उत्तरrgbToHex() में चर्चा की गई और @cwolves द्वारा टिप्पणियों में सुझाए गए के एक वैकल्पिक संस्करण :

function rgbToHex(r, g, b) {
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

alert(rgbToHex(0, 51, 255)); // #0033ff

अपडेट ३ दिसंबर २०१२

यहां इसका एक संस्करण hexToRgb()शॉर्टहैंड हेक्स ट्रिपलेट को भी प्रदर्शित करता है, जैसे "# 03F"

function hexToRgb(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

alert(hexToRgb("#0033ff").g); // "51";
alert(hexToRgb("#03f").g); // "51";

Comments

@ Vitim.us: <<बिटवाइस लेफ्ट शिफ्ट ऑपरेटर है। मान gलेना एक गैर-शून्य पूर्णांक है, g << 8इसलिए प्रभावी रूप gसे 256 से गुणा करता है, अपने हेक्स प्रतिनिधित्व के अंत में शून्य को जोड़ता है। इसी तरह r << 164 शून्य जोड़ता है। जोड़ा जा रहा है1 << 24 (100x हेक्स में) यह सुनिश्चित करता है कि प्रमुख प्रतिनिधित्व का 1उपयोग करने के बाद एक बार किसी भी आवश्यक शून्य के साथ हेक्स प्रतिनिधित्व को छोड़ दिया जाता है slice()। उदाहरण के लिए यदि rऔर gदोनों शून्य और b51 था, ((r << 16) + (g << 8) + b).toString(16)स्ट्रिंग "33" वापसी होगी; जोड़ें 1 << 24और आपको "1000033" मिलेगा। फिर पट्टी 1और तुम वहाँ हो।

— टिम डाउन

क्या बिट शिफ्टिंग (जैसे (r << 16)) दोनों बड़े और छोटे एंडियन कंप्यूटरों पर समान परिणाम देगा? संपादित करें: यह नहीं है। यहाँ क्यों है: stackoverflow.com/questions/1041554/…

— WoodKitty

@ गोथो: अपने संपादन को वापस करने के लिए क्षमा करें, लेकिन ES6 का उपयोग करना अक्सर संभव या व्यावहारिक नहीं है। पिछला संस्करण कहीं भी काम करेगा।

— टिम डाउन

आपका rgbToHex काम नहीं करता है। मजेदार परिणाम प्राप्त करें: # f55b2f00

— TheCrazyProfurer

नवीनतम rgbToHexफ़ंक्शन के बारे में । कोई भी आपके पास किए गए आरजीबी मानों को पूर्णांक के रूप में टाइपकास्ट करना चाहेगा, या आरजीबीओएचएक्स फ़ंक्शन को थोड़ा संशोधित कर सकता है। उदाहरण: jsfiddle.net/cydqo6wj वर्तमान: return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); संशोधित: return "#" + ((1 << 24) + ((+r) << 16) + ((+g) << 8) + (+b)).toString(16).slice(1); संशोधित संस्करण में, मैं केवल 16 / हेक्स से अधिक परिवर्तन से पहले पूर्णांक पर आरजीएल मूल्यों को निकालने के लिए मजबूर करता हूं।

— user2977468

Answer 2

हेक्सटॉर्ब का एक वैकल्पिक संस्करण:

function hexToRgb(hex) {
    var bigint = parseInt(hex, 16);
    var r = (bigint >> 16) & 255;
    var g = (bigint >> 8) & 255;
    var b = bigint & 255;

    return r + "," + g + "," + b;
}

संपादित करें: 3/28/2017 यहां एक और दृष्टिकोण है यह और भी तेज प्रतीत होता है

function hexToRgbNew(hex) {
  var arrBuff = new ArrayBuffer(4);
  var vw = new DataView(arrBuff);
  vw.setUint32(0,parseInt(hex, 16),false);
  var arrByte = new Uint8Array(arrBuff);

  return arrByte[1] + "," + arrByte[2] + "," + arrByte[3];
}

संपादित करें: 8/11/2017 अधिक परीक्षण के बाद ऊपर नया दृष्टिकोण तेज नहीं है :(। हालांकि यह एक मजेदार वैकल्पिक तरीका है।

Comments

पूर्णता की एक पंक्ति return [r, g, b].join();:।

— पावलो

या ऑल-इनकैप्सुलेटिंग वन-लाइनर समाधान के लिए:return [(bigint = parseInt(hex, 16)) >> 16 & 255, bigint >> 8 & 255, bigint & 255].join();

— प्लूटो

मैं इसे एक ट्वीक के साथ उपयोग कर रहा हूं - गैर-हेक्स वर्ण (एक अग्रणी की तरह #) को पहले हटा देंparseInthex = hex.replace(/[^0-9A-F]/gi, '');

— चार्ज़

शॉर्टहैंड संस्करण का उपयोग करने के लिए इतनी जल्दी मत बनो। JSPerf से पता चलता है कि इस उत्तर में सबसे तेज: jsperf.com/2014-09-16-hex-to-rgb

— Olav Kokovkin

इससे सावधान रहें, इसका आउटपुट विश्वसनीय नहीं है। इसने काले के करीब एक रंग को गहरा गुलाबी दिखाई दिया। शीर्ष उत्तर से फ़ंक्शन का उपयोग करने के लिए बेहतर है।

— मैकीज क्रैस्कीज

Answer 3

टिम डाउन के जवाब के 6 संस्करण ECMAScript

आरजीबी को हेक्स में परिवर्तित करना

const rgbToHex = (r, g, b) => '#' + [r, g, b].map(x => {
  const hex = x.toString(16)
  return hex.length === 1 ? '0' + hex : hex
}).join('')

console.log(rgbToHex(0, 51, 255)); // '#0033ff'

हेक्स को आरजीबी में परिवर्तित करना

एक सरणी देता है [r, g, b]। शॉर्टहैंड हेक्स ट्रिपल के साथ भी काम करता है "#03F"।

const hexToRgb = hex =>
  hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i
             ,(m, r, g, b) => '#' + r + r + g + g + b + b)
    .substring(1).match(/.{2}/g)
    .map(x => parseInt(x, 16))

console.log(hexToRgb("#0033ff")) // [0, 51, 255]
console.log(hexToRgb("#03f")) // [0, 51, 255]

बोनस: padStart()विधि का उपयोग करके हेक्स पर आरजीबी

const rgbToHex = (r, g, b) => '#' + [r, g, b]
  .map(x => x.toString(16).padStart(2, '0')).join('')

console.log(rgbToHex(0, 51, 255)); // '#0033ff'

ध्यान दें कि यह उत्तर नवीनतम ECMAScript सुविधाओं का उपयोग करता है, जो पुराने ब्राउज़रों में समर्थित नहीं हैं। यदि आप चाहते हैं कि यह कोड सभी वातावरणों में काम करे, तो आपको अपने कोड को संकलित करने के लिए बैबल का उपयोग करना चाहिए ।

Comments

hexToRgb () आसानी से 4 और 8 अंक को संभालने के लिए अनुकूलित किया .replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(m, r, g, b) => '#' + r + r + g + g + b + b)जाता है hex RGBA संकेतन: बन जाता है: .replace(/^#?([a-f\d])([a-f\d])([a-f\d])([a-f\d])$/i,(m, r, g, b, a) => '#' + r + r + g + g + b + b + a + a)लेकिन क्या आरजीबीए के साथ आरजीएक्सएपी काम करने का एक वैकल्पिक 4x हेक्स मान है? यह पूरी तरह से कार्यक्षमता को पूरा करेगा, हेक्स आरजीबी और आरजीबीए के साथ एक रेगेक्सपी काम करता है। अन्यथा यह दो regexps है, 3 मानों के साथ एक, 4 के साथ दूसरा। आपको rgba () के लिए 4 वें arg प्राप्त करने के लिए 4 मान को 255 से विभाजित करना होगा।

— जैम

Answer 4

यहाँ मेरा संस्करण है:

  function rgb2hex(red, green, blue) {
        var rgb = blue | (green << 8) | (red << 16);
        return '#' + (0x1000000 + rgb).toString(16).slice(1)
  }

  function hex2rgb(hex) {
        // long version
        r = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
        if (r) {
                return r.slice(1,4).map(function(x) { return parseInt(x, 16); });
        }
        // short version
        r = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i);
        if (r) {
                return r.slice(1,4).map(function(x) { return 0x11 * parseInt(x, 16); });
        }
        return null;
  }

Comments

शांत, लेकिन सवाल hex2rgb था। क्या आप इसे इस रूप में छोटा कर सकते हैं कि यह अच्छा होगा :)

— । केलियन लिंडबर्ग

यद्यपि यह दोनों तरीके से नहीं चलता है, मुझे इसे आगे बढ़ाना होगा क्योंकि किसी कारण से इस प्रश्न में अन्य आरजीबी से हेक्स समाधान मेरे लिए काम नहीं कर रहे थे।

— हंस

सवाल पहले rgb2hex से था। वैसे भी मैंने अपना खुद का हेक्स 2rgb जोड़ा।

— फेलिपक

rgb2hexविधि के बारे में थोड़ा भ्रमित । हम क्यों जोड़ते 0x1000000हैं rgb, और हमें आखिर में कॉल करने की आवश्यकता क्यों है .slice(1)?

— हैकजुत्सू

क्योंकि नीला रंग #FF होगा, हम 0x1000000 जोड़ते हैं, इसलिए यह # 10000FF है, और फिर हम पहले "1" को हटाते हैं।

— फेलिप सी सी

Answer 5

मैं मान रहा हूँ कि आप HTML- शैली हेक्साडेसिमल नोटेशन का अर्थ है #rrggbb। आपका कोड लगभग सही है, सिवाय इसके कि आपने ऑर्डर उलट दिया है। यह होना चाहिए:

var decColor = red * 65536 + green * 256 + blue;

इसके अलावा, बिट-शिफ्ट का उपयोग करने से इसे पढ़ना आसान हो सकता है:

var decColor = (red << 16) + (green << 8) + blue;

Comments

महान, सिवाय इसके कि आपको ज़ीरो-पैड को 6 वर्णों तक छोड़ना होगा यदि लाल <16:var decColor = (red < 16 ? '0' : '') + (red << 16) + (green << 8) + blue;

— मार्क कहन

इसके अलावा काम करने लगता है: (0,128,192) शायद 0 के कारण?

— सिंधार

@ चेवल्स: आप सही कह रहे हैं, मुझे याद आया। लेकिन इसे अंतिम स्ट्रिंग में जोड़ा जाना चाहिए, पूर्णांक नहीं।

— कैसाब्लांका

@ सिंदर: यदि red < 16आपको 0अंतिम परिणाम के लिए उपसर्ग करने की आवश्यकता है , तो @cwolves की टिप्पणी देखें ।

— कैसाब्लांका

ठीक है, यहाँ:var hexColor = ((1 << 24) + (red << 16) + (green << 8) + blue).toString(16).substr(1);

— मार्क कहन

Answer 6

function hex2rgb(hex) {
  return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];
}

Comments

मुझे सरल उत्तर पसंद हैं

— Bjorn Behrendt

जादू टोना! आपको इस बहुत अच्छे वन-लाइनर में स्पष्टीकरण जोड़ना चाहिए।

— जेम्स हैरिंगटन

अच्छा! यहाँ एक ही बात है, न्यूनतम किया गया और गुणों के साथ एक वस्तु लौटने को छोड़कर r, g, b:function hex2rgb(hex){return{r:'0x'+hex[1]+hex[2]|0,g:'0x'+hex[3]+hex[4]|0,b:'0x'+hex[5]+hex[6]|0}}

— ashleedawg

Answer 7

यह कोड #fff और #ffffff वेरिएंट और अपारदर्शिता को स्वीकार करता है।

function hex2rgb(hex, opacity) {
        var h=hex.replace('#', '');
        h =  h.match(new RegExp('(.{'+h.length/3+'})', 'g'));

        for(var i=0; i<h.length; i++)
            h[i] = parseInt(h[i].length==1? h[i]+h[i]:h[i], 16);

        if (typeof opacity != 'undefined')  h.push(opacity);

        return 'rgba('+h.join(',')+')';
}

Answer 8

RGBA के लिए एक-लाइन कार्यात्मक HEX

छोटे #fffऔर लंबे दोनों #ffffffरूपों का समर्थन करता है।
अल्फा चैनल (अपारदर्शिता) का समर्थन करता है।
यह निर्दिष्ट नहीं करता है कि हैश निर्दिष्ट है या नहीं, दोनों मामलों में काम करता है।

function hexToRGBA(hex, opacity) {
    return 'rgba(' + (hex = hex.replace('#', '')).match(new RegExp('(.{' + hex.length/3 + '})', 'g')).map(function(l) { return parseInt(hex.length%2 ? l+l : l, 16) }).concat(opacity||1).join(',') + ')';
}

उदाहरण:

hexToRGBA('#fff')        ->  rgba(255,255,255,1)  
hexToRGBA('#ffffff')     ->  rgba(255,255,255,1)  
hexToRGBA('#fff', .2)    ->  rgba(255,255,255,0.2)  
hexToRGBA('#ffffff', .2) ->  rgba(255,255,255,0.2)  
hexToRGBA('fff', .2)     ->  rgba(255,255,255,0.2)  
hexToRGBA('ffffff', .2)  ->  rgba(255,255,255,0.2)  

Comments

मानव-पठनीय कोड लिखने की कोशिश करें, एक-लाइनर नहीं। यदि आप उत्पादन कोड से पहले अपने कोड को छोटा करते हैं तो कोई लाभ नहीं है

— रोको सी। बुल्जन

Answer 9

इसका उपयोग गणनात्मक शैली के रंगों से रंग प्राप्त करने के लिए किया जा सकता है:

function rgbToHex(color) {
    color = ""+ color;
    if (!color || color.indexOf("rgb") < 0) {
        return;
    }

    if (color.charAt(0) == "#") {
        return color;
    }

    var nums = /(.*?)rgb\((\d+),\s*(\d+),\s*(\d+)\)/i.exec(color),
        r = parseInt(nums[2], 10).toString(16),
        g = parseInt(nums[3], 10).toString(16),
        b = parseInt(nums[4], 10).toString(16);

    return "#"+ (
        (r.length == 1 ? "0"+ r : r) +
        (g.length == 1 ? "0"+ g : g) +
        (b.length == 1 ? "0"+ b : b)
    );
}

// not computed 
<div style="color: #4d93bc; border: 1px solid red;">...</div> 
// computed 
<div style="color: rgb(77, 147, 188); border: 1px solid rgb(255, 0, 0);">...</div>

console.log( rgbToHex(color) ) // #4d93bc
console.log( rgbToHex(borderTopColor) ) // #ff0000

Ref: https://github.com/k-gun/so/blob/master/so_util.js

Comments

इसके लिए शुक्रिया। लेकिन एक छोटी सी त्रुटि है: वापस आना चाहिए (r.length == 1 ? "0" + r : r)और इसी तरह हरे और नीले रंग के लिए।

— टाइफॉन

Answer 10

बिटवाइज़ समाधान सामान्य रूप से अजीब है। लेकिन इस मामले में मुझे लगता है कि अधिक सुरुचिपूर्ण guess है

function hexToRGB(hexColor){
  return {
    red: (hexColor >> 16) & 0xFF,
    green: (hexColor >> 8) & 0xFF,  
    blue: hexColor & 0xFF,
  }
}

उपयोग:

const {red, green, blue } = hexToRGB(0xFF00FF)

console.log(red) // 255
console.log(green) // 0
console.log(blue) // 255

Answer 11

// hsl संकेतन को अनदेखा करना, रंग मूल्यों को आमतौर पर नाम, आरजीबी, आरजीबीए या हेक्स के रूप में व्यक्त किया जाता है।

// हेक्स 3 मान या 6 हो सकते हैं।

// Rgb प्रतिशत और पूर्णांक मान हो सकते हैं।

// इन सभी प्रारूपों के लिए कम से कम, सबसे अच्छा।

String.prototype.padZero= function(len, c){
    var s= this, c= c || "0", len= len || 2;
    while(s.length < len) s= c + s;
    return s;
}
var colors={
    colornames:{
        aqua: '#00ffff', black: '#000000', blue: '#0000ff', fuchsia: '#ff00ff',
        gray: '#808080', green: '#008000', lime: '#00ff00', maroon: '#800000',
        navy: '#000080', olive: '#808000', purple: '#800080', red: '#ff0000',
        silver: '#c0c0c0', teal: '#008080', white: '#ffffff', yellow: '#ffff00'
    },
    toRgb: function(c){
        c= '0x'+colors.toHex(c).substring(1);
        c= [(c>> 16)&255, (c>> 8)&255, c&255];
        return 'rgb('+c.join(',')+')';
    },
    toHex: function(c){
        var tem, i= 0, c= c? c.toString().toLowerCase(): '';
        if(/^#[a-f0-9]{3,6}$/.test(c)){
            if(c.length< 7){
                var A= c.split('');
                c= A[0]+A[1]+A[1]+A[2]+A[2]+A[3]+A[3];
            }
            return c;
        }
        if(/^[a-z]+$/.test(c)){
            return colors.colornames[c] || '';
        }
        c= c.match(/\d+(\.\d+)?%?/g) || [];
        if(c.length<3) return '';
        c= c.slice(0, 3);
        while(i< 3){
            tem= c[i];
            if(tem.indexOf('%')!= -1){
                tem= Math.round(parseFloat(tem)*2.55);
            }
            else tem= parseInt(tem);
            if(tem< 0 || tem> 255) c.length= 0;
            else c[i++]= tem.toString(16).padZero(2);
        }
        if(c.length== 3) return '#'+c.join('').toLowerCase();
        return '';
    }
}
//var c='#dc149c';
//var c='rgb(100%,25%,0)';
//
var c= 'red';
alert(colors.toRgb(c)+'\n'+colors.toHex(c));

Comments

मैंने इसे सबसे व्यापक संस्करण के रूप में देखा है। यह बहुत अच्छा होगा अगर यह आरजीबीए से भी रंग निकाल सकता है।

— माइकल शेपर

Answer 12

@ टिम, अपने जवाब में जोड़ने के लिए (एक टिप्पणी में यह थोड़ा अजीब फिटिंग)।

जैसा कि लिखा है, मैंने पाया rgbToHex फ़ंक्शन बिंदु के बाद तत्वों के साथ एक स्ट्रिंग लौटाता है और इसके लिए आवश्यक है कि r, g, b मान 0-255 के दायरे में आते हैं।

मुझे यकीन है कि यह सबसे स्पष्ट लग सकता है, लेकिन मुझे यह पता लगाने में दो घंटे लग गए और तब तक मूल विधि 7 लाइनों तक गुब्बारा हो चुकी थी, इससे पहले कि मुझे पता चले कि मेरी समस्या कहीं और थी। तो दूसरों के समय और परेशानी को बचाने के हितों में, यहां मेरा थोड़ा संशोधित कोड है जो पूर्व-आवृत्तियों की जांच करता है और स्ट्रिंग के बाहरी हिस्सों को बंद कर देता है।

function rgbToHex(r, g, b) {
    if(r < 0 || r > 255) alert("r is out of bounds; "+r);
    if(g < 0 || g > 255) alert("g is out of bounds; "+g);
    if(b < 0 || b > 255) alert("b is out of bounds; "+b);
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1,7);
}

Answer 13

(२०१LE) SIMPLE ES6 रचना योग्य तीर कार्य

मैं उन लोगों के लिए इसे साझा करने का विरोध नहीं कर सकता, जो ईएस 6 का उपयोग करके कुछ आधुनिक कार्यात्मक / रचनात्मक जेएस लिख सकते हैं। यहां कुछ स्लीक वन-लाइनर्स दिए गए हैं जिनका मैं एक कलर मॉड्यूल में उपयोग कर रहा हूं जो डेटा विज़ुअलाइज़ेशन के लिए रंग प्रक्षेप करता है।

ध्यान दें कि यह अल्फा चैनल को बिल्कुल भी हैंडल नहीं करता है।

const arrayToRGBString = rgb => `rgb(${rgb.join(',')})`;
const hexToRGBArray = hex => hex.match(/[A-Za-z0-9]{2}/g).map(v => parseInt(v, 16));
const rgbArrayToHex = rgb => `#${rgb.map(v => v.toString(16).padStart(2, '0')).join('')}`;
const rgbStringToArray = rgb => rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).splice(1, 3)
  .map(v => Number(v));
const rgbStringToHex = rgb => rgbArrayToHex(rgbStringToArray(rgb));

Answer 14

प्रयत्न

let hex2rgb= c=> `rgb(${c.substr(1).match(/../g).map(x=>+`0x${x}`)})`;
let rgb2hex= c=>'#'+c.match(/\d+/g).map(x=>(+x).toString(16).padStart(2,0)).join``

let hex2rgb= c=> `rgb(${c.substr(1).match(/../g).map(x=>+`0x${x}`)})`;
let rgb2hex= c=> '#'+c.match(/\d+/g).map(x=>(+x).toString(16).padStart(2,0)).join``;

// TEST
console.log('#0080C0          -->', hex2rgb('#0080C0'));
console.log('rgb(0, 128, 192) -->', rgb2hex('rgb(0, 128, 192)'));

Answer 15

यदि आपको दो रंग मानों (RGB, नाम रंग या हेक्स मान के रूप में दिए गए) की तुलना करने या एचईएक्स का उपयोग करने के लिए एचटीएमएल 5 कैनवस ऑब्जेक्ट में कनवर्ट करने की आवश्यकता है।

var canvas = document.createElement("canvas");
var ctx = this.canvas.getContext('2d');

ctx.fillStyle = "rgb(pass,some,value)";
var temp =  ctx.fillStyle;
ctx.fillStyle = "someColor";

alert(ctx.fillStyle == temp);

Answer 16

क्या आप इस तरह से हो सकते हैं?

function RGB2HTML(red, green, blue)
{
    return '#' + red.toString(16) +
           green.toString(16) +
           blue.toString(16);
}

alert(RGB2HTML(150, 135, 200));

# 9687c8 प्रदर्शित करता है

Comments

> RGB2HTML> 2HTML> TO HTML (ʖ̯ ಠ H) HEX HTML से संबंधित नहीं है

— Даниил Пронин

Answer 17

टिम डाउन के 3 अंकों के हेक्सटॉर्ग फ़ंक्शन को नीचे के रूप में सुधार किया जा सकता है:

var hex2Rgb = function(hex){
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})|([a-f\d]{1})([a-f\d]{1})([a-f\d]{1})$/i.exec(hex);
  return result ? {        
    r: parseInt(hex.length <= 4 ? result[4]+result[4] : result[1], 16),
    g: parseInt(hex.length <= 4 ? result[5]+result[5] : result[2], 16),
    b: parseInt(hex.length <= 4 ? result[6]+result[6] : result[3], 16),
    toString: function() {
      var arr = [];
      arr.push(this.r);
      arr.push(this.g);
      arr.push(this.b);
      return "rgb(" + arr.join(",") + ")";
    }
  } : null;
};

Answer 18

मुझे इस समस्या का सामना करना पड़ा क्योंकि मैं किसी भी रंग मूल्य को स्वीकार करना चाहता था और एक अस्पष्टता को जोड़ने में सक्षम था, इसलिए मैंने यह त्वरित jQuery प्लगइन बनाया जो आधुनिक ब्राउज़रों पर मूल कैनवास का उपयोग करता है। सिर्फ महान काम करने लगता है।

संपादित करें

पता चलता है कि मैं यह पता नहीं लगा सकता कि इसे एक उचित jQuery प्लगइन कैसे बनाया जाए, इसलिए मैं इसे एक नियमित फ़ंक्शन के रूप में प्रस्तुत करूंगा।

//accepts any value like '#ffffff', 'rgba(255,255,255,1)', 'hsl(0,100%,100%)', or 'white'
function toRGBA( c ) {
    var
        can  = document.createElement( 'canvas' ),
        ctx  = can.getContext( '2d' );
    can.width = can.height = 1;
    ctx.fillStyle = c;
    console.log( ctx.fillStyle ); //always css 6 digit hex color string, e.g. '#ffffff'
    ctx.fillRect( 0, 0, 1, 1 ); //paint the canvas
    var
        img  = ctx.getImageData( 0, 0, 1, 1 ),
        data = img.data,
        rgba = {
            r: data[ 0 ], //0-255 red
            g: data[ 1 ], //0-255 green
            b: data[ 2 ], //0-255 blue
            a: data[ 3 ]  //0-255 opacity (0 being transparent, 255 being opaque)
        };
    return rgba;
};

Answer 19

मुझे ऐसे फ़ंक्शन की ज़रूरत थी जो अमान्य मानों को भी स्वीकार करता हो

आरजीबी (-255, 255, 255) आरजीबी (510, 255, 255)

यह @cwolves उत्तर का एक स्पिन ऑफ है

function rgb(r, g, b) {
  this.c = this.c || function (n) {
    return Math.max(Math.min(n, 255), 0)
  };

  return ((1 << 24) + (this.c(r) << 16) + (this.c(g) << 8) + this.c(b)).toString(16).slice(1).toUpperCase();
}

Answer 20

R = HexToR("#FFFFFF");
G = HexToG("#FFFFFF");
B = HexToB("#FFFFFF");

function HexToR(h) {return parseInt((cutHex(h)).substring(0,2),16)}
function HexToG(h) {return parseInt((cutHex(h)).substring(2,4),16)}
function HexToB(h) {return parseInt((cutHex(h)).substring(4,6),16)}
function cutHex(h) {return (h.charAt(0)=="#") ? h.substring(1,7):h}

बिना किसी समस्या के परिणाम प्राप्त करने के लिए इन फ़ंक्शन का उपयोग करें। :)

Answer 21

शॉर्टहैंड संस्करण जो एक स्ट्रिंग को स्वीकार करता है:

function rgbToHex(a){
  a=a.replace(/[^\d,]/g,"").split(","); 
  return"#"+((1<<24)+(+a[0]<<16)+(+a[1]<<8)+ +a[2]).toString(16).slice(1)
}

document.write(rgbToHex("rgb(255,255,255)"));

यह जांचने के लिए कि क्या यह पहले से ही हेक्साडेसिमल नहीं है

function rgbToHex(a){
  if(~a.indexOf("#"))return a;
  a=a.replace(/[^\d,]/g,"").split(","); 
  return"#"+((1<<24)+(+a[0]<<16)+(+a[1]<<8)+ +a[2]).toString(16).slice(1)
}

document.write("rgb: "+rgbToHex("rgb(255,255,255)")+ " -- hex: "+rgbToHex("#e2e2e2"));

Answer 22

हालांकि यह जवाब पूरी तरह से फिट होने की संभावना नहीं है, यह बहुत उपयोगी हो सकता है कोई भी कम नहीं।

1. किसी भी यादृच्छिक तत्व बनाएँ

var toRgb = document.createElement('div');

2. जिस भी रंग को आप परिवर्तित करना चाहते हैं, उसके लिए कोई मान्य शैली सेट करें

toRg.style.color = "hsl(120, 60%, 70%)";

3. स्टाइल प्रॉपर्टी को फिर से कॉल करें

> toRgb.style.color;

< "rgb(133, 225, 133)" आपका रंग Rgb में बदल दिया गया है

के लिए काम करता है: एचएसएल, हेक्स

के लिए काम नहीं करता है: नामित रंग

Comments

ब्राउज़र के साथ काम करते समय यह सबसे व्यावहारिक जवाब हो सकता है। आप अक्सर # -notation में व्यक्त किए गए कुछ मौजूदा रंग के रंग की तुलना कुछ ज्ञात रंग से करना चाहते हैं।

— पानू लॉजिक

Answer 23

हेक्स 2rbg का मेरा संस्करण:

1. # हेफ़ की तरह छोटी हेक्स स्वीकार करें
2. एल्गोरिथ्म कम्पास ओ (एन) है, रेगेक्स का उपयोग करने से तेज होना चाहिए। उदा String.replace, String.split, String.matchआदि ।।
3. निरंतर स्थान का उपयोग करें।
4. आरजीबी और आरजीबीए का समर्थन करें।

यदि आप IE8 का उपयोग कर रहे हैं तो आपको हेक्स.ट्रीम () को हटाने की आवश्यकता हो सकती है।

जैसे

hex2rgb('#fff') //rgb(255,255,255) 
hex2rgb('#fff', 1) //rgba(255,255,255,1) 
hex2rgb('#ffffff') //rgb(255,255,255)  
hex2rgb('#ffffff', 1) //rgba(255,255,255,1)

कोड:

function hex2rgb (hex, opacity) {
    hex = hex.trim();
    hex = hex[0] === '#' ? hex.substr(1) : hex;
    var bigint = parseInt(hex, 16), h = [];
    if (hex.length === 3) {
        h.push((bigint >> 4) & 255);
        h.push((bigint >> 2) & 255);
    } else {
        h.push((bigint >> 16) & 255);
        h.push((bigint >> 8) & 255);
    }
    h.push(bigint & 255);
    if (arguments.length === 2) {
        h.push(opacity);
        return 'rgba('+h.join()+')';
    } else {
        return 'rgb('+h.join()+')';
    }
}

Comments

ध्यान दें कि h.join(',')जैसा है वैसा ही है h.join()।

Answer 24

यह स्निपेट हेक्स को आरजीबी और आरजीबी को हेक्स में परिवर्तित करता है।

डेमो देखें

function hexToRgb(str) { 
    if ( /^#([0-9a-f]{3}|[0-9a-f]{6})$/ig.test(str) ) { 
        var hex = str.substr(1);
        hex = hex.length == 3 ? hex.replace(/(.)/g, '$1$1') : hex;
        var rgb = parseInt(hex, 16);               
        return 'rgb(' + [(rgb >> 16) & 255, (rgb >> 8) & 255, rgb & 255].join(',') + ')';
    } 

    return false; 
}

function rgbToHex(red, green, blue) {
    var out = '#';

    for (var i = 0; i < 3; ++i) {
        var n = typeof arguments[i] == 'number' ? arguments[i] : parseInt(arguments[i]);

        if (isNaN(n) || n < 0 || n > 255) {
            return false;
        }

        out += (n < 16 ? '0' : '') + n.toString(16);
    }
    return out
}

Comments

अच्छा है क्योंकि यह शॉर्टहैंड को संभालता है, लेकिन क्या यह एक स्ट्रिंग के बजाय एक संरचना वापस कर सकता है?

— डंके

Answer 25

मैं XAML डेटा के साथ काम कर रहा हूं जिसमें #AARRGGBB (अल्फा, रेड, ग्रीन, ब्लू) का एक हेक्स प्रारूप है। उपरोक्त उत्तरों का उपयोग करते हुए, यहां मेरा समाधान है:

function hexToRgba(hex) {
    var bigint, r, g, b, a;
    //Remove # character
    var re = /^#?/;
    var aRgb = hex.replace(re, '');
    bigint = parseInt(aRgb, 16);

    //If in #FFF format
    if (aRgb.length == 3) {
        r = (bigint >> 4) & 255;
        g = (bigint >> 2) & 255;
        b = bigint & 255;
        return "rgba(" + r + "," + g + "," + b + ",1)";
    }

    //If in #RRGGBB format
    if (aRgb.length >= 6) {
        r = (bigint >> 16) & 255;
        g = (bigint >> 8) & 255;
        b = bigint & 255;
        var rgb = r + "," + g + "," + b;

        //If in #AARRBBGG format
        if (aRgb.length == 8) {
            a = ((bigint >> 24) & 255) / 255;
            return "rgba(" + rgb + "," + a.toFixed(1) + ")";
        }
    }
    return "rgba(" + rgb + ",1)";
}

http://jsfiddle.net/kvLyscs3/

Answer 26

सीधे jQuery से बदलने के लिए आप कोशिश कर सकते हैं:

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

  rgbToHex($('.col-tab-bar .col-tab span').css('color'))

Answer 27

function getRGB(color){
  if(color.length == 7){
    var r = parseInt(color.substr(1,2),16);
    var g = parseInt(color.substr(3,2),16);
    var b = parseInt(color.substr(5,2),16);    
    return 'rgb('+r+','+g+','+b+')' ;
  }    
  else
    console.log('Enter correct value');
}
var a = getRGB('#f0f0f0');
if(!a){
 a = 'Enter correct value'; 
}

a;

Answer 28

बहुत सारे जवाबों को ध्यान में रखते हुए केवल आंशिक रूप से प्रश्न का उत्तर दें (या तो आरजीबी से एचईएक्स या अन्य तरीके से) मैंने सोचा कि मैं अपना आंशिक उत्तर भी पोस्ट करूंगा।

मेरे पास एक समान मुद्दा था और मैं कुछ इस तरह करना चाहता था: इनपुट कोई भी वैध सीएसएस रंग (एचएसएल (ए), आरजीबी (ए), एचईएक्स या रंग का नाम) और 1. एक अल्फा वैल्यू को जोड़ने या हटाने में सक्षम हो, 2। एक आरजीबी (ए) वस्तु लौटाएं। मैंने इस उद्देश्य के लिए बिल्कुल एक प्लगइन लिखा था। यह GitHub पर पाया जा सकता है (इसमें jQuery की आवश्यकता होती है, लेकिन यदि आप चाहें तो आप इसे फोर्क कर सकते हैं और वैनिला संस्करण बना सकते हैं)। यहाँ एक डेमो पेज है । आप अपने लिए कोशिश कर सकते हैं और मक्खी पर उत्पन्न आउटपुट देख सकते हैं।

मैं यहां विकल्पों को कॉपी-पेस्ट करूंगा:

RGB जनरेटर एक तर्क, रंग को स्वीकार करता है, और तीन विकल्प प्रदान करता है: asObject, addAlpha और removeAlpha। जब तीन विकल्प छोड़ दिए जाते हैं, आरजीबी रंग एक स्ट्रिंग के रूप में वापस आ जाएगा।

$.rgbGenerator("white")
// Will return rgb(255,255,255)

ध्यान दें कि डिफ़ॉल्ट रूप से अल्फा घटक शामिल हैं। यदि इनपुट मान में एक अल्फा मान है, तो आउटपुट RGBa प्रारूप में होगा।

$.rgbGenerator("hsla(0,100%,50%,0.8)")
// Will return rgba(255,0,0,0.8)

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

$.rgbGenerator("hsla(0,100%,50%,0.8)", {removeAlpha: true})
// Will return rgb(255,0,0)

यदि, दूसरी ओर, आप एक अल्फा चैनल जोड़ना चाहते हैं, तो आप ऐसा कर सकते हैं कि AddAlpha को 0 और 1. के बीच किसी भी मान में सेट करके जब इनपुट एक गैर-पारदर्शी रंग है, तो अल्फा मान जोड़ा जाएगा। यदि यह एक पारदर्शी है, तो प्रदान किया गया मूल्य इनपुट के अल्फा घटक को अधिलेखित कर देगा।

$.rgbGenerator("hsl(0,100%,50%)", {addAlpha: 0.4})
// Will return rgba(255,0,0,0.4)
$.rgbGenerator("hsla(0,100%,50%,0.8)", {addAlpha: 0.4})
// Will return rgba(255,0,0,0.4)

अंत में आरजीबी (ए) रंग को ऑब्जेक्ट के रूप में आउटपुट करना भी संभव है। इसमें r, g, b और वैकल्पिक रूप से a शामिल होगा।

$.rgbGenerator("hsla(0,100%,50%,0.8)", {asObject: true})
/* Will return
{
  "r": 255,
  "g": 0,
  "b": 0,
  "a": 0.8
}
*/
$.rgbGenerator("hsla(0,100%,50%,0.8)", {asObject: true}).r
// Will return 255

Answer 29

टिम डाउन द्वारा शीर्ष रेटेड उत्तर आरजीबी में रूपांतरण के लिए सबसे अच्छा समाधान प्रदान करता है। मैं हेक्स रूपांतरण के लिए इस समाधान को बेहतर तरीके से पसंद करता हूं, क्योंकि यह हेक्स में रूपांतरण के लिए सबसे सफल सीमा जाँच और शून्य गद्दी प्रदान करता है।

function RGBtoHex (red, green, blue) {
  red = Math.max(0, Math.min(~~this.red, 255));
  green = Math.max(0, Math.min(~~this.green, 255));
  blue = Math.max(0, Math.min(~~this.blue, 255));

  return '#' + ('00000' + (red << 16 | green << 8 | blue).toString(16)).slice(-6);
};

बाईं ओर का उपयोग '<<' और '' | ' ऑपरेटर इसे एक मजेदार समाधान भी बनाते हैं।

Answer 30

मैंने यह पाया और क्योंकि मुझे लगता है कि यह बहुत सीधा है और सत्यापन परीक्षण है और अल्फा वैल्यू (वैकल्पिक) का समर्थन करता है, यह मामला फिट होगा।

यदि आप जानते हैं कि आप क्या कर रहे हैं तो रेगेक्स लाइन पर टिप्पणी करें और यह थोड़ा तेज़ है।

function hexToRGBA(hex, alpha){
    hex = (""+hex).trim().replace(/#/g,""); //trim and remove any leading # if there (supports number values as well)
    if (!/^(?:[0-9a-fA-F]{3}){1,2}$/.test(hex)) throw ("not a valid hex string"); //Regex Validator
    if (hex.length==3){hex=hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2]} //support short form
    var b_int = parseInt(hex, 16);
    return "rgba("+[
        (b_int >> 16) & 255, //R
        (b_int >> 8) & 255, //G
        b_int & 255, //B
        alpha || 1  //add alpha if is set
    ].join(",")+")";
}