javascript - आरजीबी से हेक्स और हेक्स से आरजीबी तक




colors hex (20)

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

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


टिम डाउन के उत्तर का ईसीएमएस्क्रिप्ट 6 संस्करण

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

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" जैसे "#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]

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

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

चेतावनी: निम्न कोड padStart() विधि का उपयोग करता है, जो वर्तमान में padStart() 2017 ड्राफ्ट का हिस्सा है । यह अभी तक सभी ब्राउज़रों द्वारा समर्थित नहीं है ( संगतता तालिका की जांच करें)। यदि आप आज इसका उपयोग करना चाहते हैं, तो बेबेल या 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'


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

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


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

जैसा कि लिखा गया है, मैंने पाया कि rgbToHex फ़ंक्शन बिंदु के बाद तत्वों के साथ एक स्ट्रिंग देता है और इसके लिए आवश्यक है कि आर, जी, बी मान 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);
}

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

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

रेफरी: https://github.com/k-gun/so/blob/master/so_util.js#L43


ऐसा लगता है कि आप इस तरह कुछ ढूंढ रहे हैं:

function hexstr(number) {
    var chars = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f");
    var low = number & 0xf;
    var high = (number >> 4) & 0xf;
    return "" + chars[high] + chars[low];
}

function rgb2hex(r, g, b) {
    return "#" + hexstr(r) + hexstr(g) + hexstr(b);
}

क्या आप इस तरह कुछ के बाद हो सकता है?

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

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

# 9687 सी 8 प्रदर्शित करता है


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

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

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


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

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

3 दिसंबर 2012 अपडेट करें

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

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";

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

आरजीबी (-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();
}

मुझे लगता है कि आप एचटीएमएल शैली हेक्साडेसिमल नोटेशन, यानी #rrggbb मतलब है। आपका कोड लगभग सही है, सिवाय इसके कि आपको ऑर्डर उलट दिया गया है। यह होना चाहिए:

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

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

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

मैं इस समस्या से आया क्योंकि मैं किसी भी रंग मूल्य को स्वीकार करना चाहता था और एक अस्पष्टता जोड़ने में सक्षम होना चाहता था, इसलिए मैंने यह त्वरित 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;
};

मैं एक्सएएमएल डेटा के साथ काम कर रहा हूं जिसमें #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/


यदि आपको दो रंग मानों की तुलना करने की आवश्यकता है (आरजीबी, नाम रंग या हेक्स मान के रूप में दिया गया है) या हेक्स का उपयोग एचटीएमएल 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);

यह कोड #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(',')+')';
}

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

  1. कोई यादृच्छिक तत्व बनाएँ

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

  1. उस रंग में कोई वैध शैली सेट करें जिसे आप कनवर्ट करना चाहते हैं

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

  1. स्टाइल प्रॉपर्टी को दोबारा कॉल करें

> toRgb.style.color;

< "rgb(133, 225, 133)" आपका रंग आरजीबी में परिवर्तित कर दिया गया है

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

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


हेक्स 2 आरबीजी का मेरा संस्करण:

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

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

जैसे

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()+')';
    }
}

(2017) सिंपल ES6 composable तीर फ़ंक्शन

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

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

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

आरजीबीए के लिए एक लाइन कार्यात्मक हेक्स

लघु #ffffff और लंबे #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)  

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}

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


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;




rgb