555

আরজিবি ফর্ম্যাটে রঙগুলি কীভাবে হেক্স ফর্ম্যাটে রূপান্তর করবেন এবং বিপরীতে?

উদাহরণস্বরূপ, রূপান্তর '#0080C0'করুন (0, 128, 192)।

— Sindar
সূত্র

1234

নোট : উভয় সংস্করণ 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() আলোচনা করা এবং @ কলোভসের মন্তব্যে প্রস্তাবিত হিসাবে এর বিকল্প সংস্করণ :

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

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

স্নিপেট প্রসারিত করুন

আপডেট 3 ডিসেম্বর 2012

এখানে এর একটি সংস্করণ 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";

স্নিপেট প্রসারিত করুন

— টিম ডাউন
সূত্র

10

@ ভিটিম.ইউস: <<বিটওয়াইজ বাম শিফট অপারেটর। ধরে gনেওয়া একটি অ-শূন্য পূর্ণসংখ্যার, g << 8সুতরাং কার্যকরভাবে g256 দ্বারা গুণিত হয়, এর হেক্স উপস্থাপনার শেষে জিরোগুলিকে যুক্ত করে। একইভাবে r << 164 টি শূন্য যুক্ত করা হয়। 1 << 24(হেক্সে 1000000) যোগ করা নিশ্চিত করে যে হেক্সের উপস্থাপনাটি কোনও প্রয়োজনীয় শূন্যের সাথে বাম-প্যাডযুক্ত যখন নেতৃত্বটি 1ব্যবহার বন্ধ করে দেওয়া হয় slice()। উদাহরণস্বরূপ, rএবং যদি gউভয়ই শূন্য হয় এবং b51 হয় ((r << 16) + (g << 8) + b).toString(16)তবে স্ট্রিংটি "33" ফিরিয়ে আনবে; যোগ করুন 1 << 24এবং আপনি "1000033" পাবেন। তারপরে স্ট্রিপ করুন 1এবং আপনি সেখানে আছেন।

— টিম ডাউন

বিট শিফটিং (উদাহরণস্বরূপ (r << 16)) বড় এবং ছোট উভয় এন্ডিয়ান কম্পিউটারে একই ফলাফল দেবে? সম্পাদনা: এটি হয় না। এখানে কেন stackoverflow.com/questions/1041554/...

— WoodenKitty

@ গথডো: আপনার সম্পাদনাটি রোল করার জন্য দুঃখিত, তবে ES6 ব্যবহার করা প্রায়শই সম্ভব বা বাস্তব নয়। পূর্ববর্তী সংস্করণটি যে কোনও জায়গায় কাজ করবে।

— টিম ডাউন

3

আপনার rgbToHex কাজ করে না। # f55b2f00: মজার ফলাফল পেতে

— TheCrazyProfessor

1

সর্বশেষ rgbToHexকাজ সম্পর্কে। কেউ হয় আপনার পাস হওয়া আরজিবি মানকে পূর্ণসংখ্যা হিসাবে টাইপকাস্ট করতে বা 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 / hex এর পরিবর্তনের পূর্বে পূর্ণসংখ্যায় rgb মানগুলি খণ্ডন করতে বাধ্য করি।

— ব্যবহারকারী 2977468

147

HexToRgb এর বিকল্প সংস্করণ:

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 এখানে অন্য পদ্ধতি is ~~এটি আরও দ্রুত বলে মনে হচ্ছে~~

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 আরও পরীক্ষার পরে উপরের নতুন পদ্ধতির দ্রুত নয় :( যদিও এটি মজাদার বিকল্প উপায়।

— ডেভিড
সূত্র

57

পরিপূর্ণতা একটি লাইন: return [r, g, b].join();।

— পাভলো

5

অথবা অল-এনক্যাপসুলেটিং ওয়ান-লাইনারের সমাধানের জন্য:return [(bigint = parseInt(hex, 16)) >> 16 & 255, bigint >> 8 & 255, bigint & 255].join();

— প্লুটো

12

আমি এটি একটি #parseInthex = hex.replace(/[^0-9A-F]/gi, '');

— টুইটের

5

শর্টহ্যান্ড সংস্করণটি ব্যবহার করার জন্য এত তাড়াতাড়ি না। জেএসপিআইপি দেখায় যে এই উত্তরের উত্তরটি দ্রুততম: jsperf.com/2014-09-16-hex-to-rgb

— ওলাভ কোকভকিন

1

এটির সাথে সতর্ক থাকুন, এর আউটপুট নির্ভরযোগ্য নয়। এটি কালো রঙের কাছাকাছি একটি গা dark় গোলাপী প্রদর্শিত হয়েছে। শীর্ষ উত্তর থেকে ফাংশনটি ব্যবহার করা আরও ভাল।

— ম্যাকিয়েজ ক্রাওকিজিক

64

টিম ডাউন এর উত্তরের ECMAScript 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"।

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'

স্নিপেট প্রসারিত করুন

মনে রাখবেন যে এই উত্তরটিতে সর্বশেষতম ইসমাস্ক্রিপ্ট বৈশিষ্ট্য ব্যবহার করা হয়েছে, যা পুরানো ব্রাউজারগুলিতে সমর্থিত নয়। আপনি যদি এই কোডটি সমস্ত পরিবেশে কাজ করতে চান তবে আপনার কোডটি সংকলনের জন্য আপনার বাবেল ব্যবহার করা উচিত ।

— মিশা পেরেকোভস্কি
সূত্র

HexToRgb () সহজেই 4 এবং 8 ডিজিটের হেক্স আরজিবিএ স্বরলিপিটি হ্যান্ডেল করার জন্য অভিযোজিত হয়: .replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(m, r, g, b) => '#' + r + r + g + g + b + b)হয়ে যায়: .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)তবে আরজিবিএর এ-এর সাথে রিজএক্সএক্সকে 4চ্ছিক চতুর্থ হেক্স মান হিসাবে তৈরি করার কোনও উপায় আছে কি? এটি হ্যাক্স আরজিবি এবং আরজিবিএর সাথে একটি রেজিপ এক্স কাজ করে একেবারে কার্যকারিতা সম্পূর্ণ করবে। অন্যথায় এটি দুটি রিজেক্সপস, একটি 3 টি মান সহ, অন্যটি 4 দিয়ে You

— jamess

44

আমার সংস্করণটি এখানে:

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

— FelipeC
সূত্র

দুর্দান্ত, তবে প্রশ্নটি hex2rgb ছিল। আপনি কি এটির মতো সংক্ষিপ্ত হিসাবে এটি করতে পারেন যে ভাল লাগবে :)

— কে। কিলিয়ান লিন্ডবার্গ

4

যদিও এটি উভয় পথে যায় না, আমাকে এটিকে উপস্থাপন করতে হবে কারণ কোনও কারণে এই প্রশ্নে হেক্স সমাধানের অন্যান্য আরজিবি আমার পক্ষে কাজ করছে না।

— গুজ

প্রশ্নটি প্রথমে rgb2hex থেকে হয়েছিল। যাইহোক আমি আমার নিজস্ব hex2rgb যুক্ত করেছি।

— FelipC

rgb2hexপদ্ধতি সম্পর্কে কিছুটা বিভ্রান্ত । কেন আমরা যুক্ত করব 0x1000000করার rgbএবং কেন আমরা কল প্রয়োজন .slice(1)অবশেষে?

— হ্যাকজুতসু

যেহেতু নীল হবে #FF, তাই আমরা 0x1000000 যুক্ত করি, সুতরাং এটি # 10000FF, এবং তারপরে আমরা প্রথম "1" সরিয়ে ফেলি।

— ফেলিপিসি

26

আমি ধরে নিচ্ছি আপনি এইচটিএমএল-স্টাইলের হেক্সাডেসিমাল স্বরলিপিটি বোঝাচ্ছেন, অর্থাত্ #rrggbb। আপনার কোডটি প্রায় সঠিক, যদি আপনি আদেশটি বিপরীত না পেয়ে থাকেন তবে। এটা করা উচিত:

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

এছাড়াও, বিট-শিফটগুলি ব্যবহার করা এটি পড়ার পক্ষে আরও সহজ করে তুলতে পারে:

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

— কাসাব্লাংকা
সূত্র

দুর্দান্ত, বাদে আপনার যদি শূন্য-প্যাডটি 6 অক্ষরে থাকে তবে লাল <16:var decColor = (red < 16 ? '0' : '') + (red << 16) + (green << 8) + blue;

— মার্ক কাহন

এই ব্যতীত কাজগুলি মনে হচ্ছে: (0,128,192) সম্ভবত 0 এর কারণে?

— সিন্ডার

@ কলভস: আপনি ঠিক বলেছেন, আমি এটি মিস করেছি। তবে এটি পূর্ণসংখ্যার সাথে নয়, চূড়ান্ত স্ট্রিংয়ে যুক্ত করা উচিত।

— ক্যাসাব্ল্যাঙ্কা

@ সিন্ডার: আপনার চূড়ান্ত ফলাফলটির red < 16জন্য উপসর্গ করা দরকার হলে @colv's মন্তব্য দেখুন 0।

— ক্যাসাব্ল্যাঙ্কা

19

ঠিক আছে, এখানে:var hexColor = ((1 << 24) + (red << 16) + (green << 8) + blue).toString(16).substr(1);

— মার্ক কাহন

22

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

— rezoner
সূত্র

2

আমি সহজ উত্তরগুলি পছন্দ করি

— Bjorn Behrendt

উইচক্র্যাফট! আপনার এই খুব শীতল ওলাইনারের একটি ব্যাখ্যা যুক্ত করা উচিত।

— জেমস হ্যারিংটন

নিস! এখানে একই জিনিস, minified এবং বৈশিষ্ট্য সঙ্গে একটি বস্তু ফিরে ব্যতীত 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

21

এই কোডটি #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(',')+')';
}

— falko
সূত্র

11

আরজিবিএ থেকে এক-লাইন ফাংশনাল এইচএক্স

সংক্ষিপ্ত #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)

— ডেনিস
সূত্র

8

ওয়ান-লাইনার নয়, মানব-পঠনযোগ্য কোড লেখার চেষ্টা করুন। আপনি যদি যাইহোক উত্পাদনের আগে আপনার কোডটি ছোট করে দেন তবে কোনও লাভ নেই।

— রোকো সি বুলজান

11

এটি গণিত শৈলীর প্রপাগুলি থেকে রঙ পাওয়ার জন্য ব্যবহার করা যেতে পারে:

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

— কে-বন্দুক
সূত্র

এই জন্য আপনাকে ধন্যবাদ. তবে একটি ছোট ত্রুটি রয়েছে: ফিরে আসা উচিত (r.length == 1 ? "0" + r : r)এবং একইভাবে সবুজ এবং নীল রঙের জন্য।

— টাইফন

7

বিটওয়াস সলিউশন সাধারণত অদ্ভুত। তবে এই ক্ষেত্রে আমি অনুমান করি যে এটি আরও মার্জিত 😄

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

— আরাল রোকা
সূত্র

6

// এইচএসএল স্বরলিপি উপেক্ষা করে রঙের মানগুলি সাধারণত নাম, আরজিবি, আরজিবা বা হেক্স- হিসাবে প্রকাশ করা হয়

// হেক্স 3 মান বা 6 হতে পারে।

// আরজিবি শতাংশের পাশাপাশি পূর্ণসংখ্যার মানও হতে পারে।

// এই ফর্ম্যাটগুলির জন্য অ্যাকাউন্টে বেস্ট, কমপক্ষে।

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

— kennebec
সূত্র

এটি আমি সর্বাধিক বিস্তৃত সংস্করণ হিসাবে দেখেছি। এটি rgba থেকেও রঙ বের করতে পারত দুর্দান্ত।

— মাইকেল শ্যাপার

6

@ টিম, আপনার উত্তরে যুক্ত করতে (এটি একটি মন্তব্যে এটি কিছুটা বিশ্রী উপযুক্ত)।

যেমনটি লেখা হয়েছে, আমি পেয়েছি 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);
}

— ম্যাট স্টিভেন্স
সূত্র

5

(2017) সিম্পল ইএস 6 কম্পোজেবল তীর ফাংশন

যারা 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));

— রন গিলক্রিস্ট
সূত্র

5

চেষ্টা

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

স্নিপেট প্রসারিত করুন

— কামিল কিয়েসজেউস্কি
সূত্র

4

আপনার যদি দুটি বর্ণের মান (আরজিবি, নাম রঙ বা হেক্স মান হিসাবে দেওয়া হয়) তুলনা করতে বা এইচএক্স রূপান্তর করতে HTML5 ক্যানভাস অবজেক্ট ব্যবহার করুন।

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

— আন্তন পুতভ
সূত্র

3

আপনি কি এরকম কিছু পরে হতে পারেন?

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

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

# 9687c8 প্রদর্শন করে

— miquel
সূত্র

1

> RGB2HTML> 2HTML> এ এইচটিএমএল (ಠ ʖ̯ ಠ) HEX এইচটিএমএল এর সাথে সম্পর্কিত নয়

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

3

টিম ডাউন এর 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;
};

— Erhan
সূত্র

2

আমি এই সমস্যাটি পেরিয়ে এসেছি যেহেতু আমি যে কোনও রঙের মান গ্রহণ করতে এবং একটি অস্বচ্ছতা যুক্ত করতে সক্ষম হতে চেয়েছিলাম, তাই আমি এই দ্রুত 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;
};

— প্যাট্রিক রবার্টস
সূত্র

2

আমার এমন একটি ফাংশন দরকার যা অবৈধ মানকেও পছন্দ করে

আরজিবি (-255, 255, 255) আরজিবি (510, 255, 255)

এটি @ চত্বর উত্তরগুলির একটি স্পিন off

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

— চাদ সায়রা
সূত্র

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}

কোনও সমস্যা ছাড়াই ফলাফল অর্জন করতে এই ফাংশনটি ব্যবহার করুন। :)

— user3767878
সূত্র

2

শর্টহ্যান্ড সংস্করণ যা একটি স্ট্রিং গ্রহণ করে:

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

স্নিপেট প্রসারিত করুন

— আর্ট ডেন ব্র্যাবার
সূত্র

2

যদিও এই উত্তরটি প্রশ্নের পুরোপুরি ফিট করার সম্ভাবনা নেই তবে এটি খুব কমই কার্যকর হতে পারে।

যেকোন এলোমেলো উপাদান তৈরি করুন

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

আপনি রূপান্তর করতে চান এমন কোনও বৈধ শৈলী সেট করুন

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

শৈলীর সম্পত্তিটিকে আবার কল করুন

> toRgb.style.color;

< "rgb(133, 225, 133)" আপনার রঙটি আরজিবিতে রূপান্তরিত হয়েছে

এর জন্য কাজ করে: এইচএসএল, হেক্স

এর জন্য কাজ করে না: নামযুক্ত রঙ

— এন্টাররা ডি'ল্যাকর্ড
সূত্র

ব্রাউজারের সাথে কাজ করার সময় এটি সবচেয়ে ব্যবহারিক উত্তর হতে পারে। আপনি প্রায়শই কিছু বিদ্যমান উপাদানটির রঙকে # নোটেশনে প্রকাশিত কিছু পরিচিত রঙের সাথে তুলনা করতে চান।

— পানু যুক্তি

2

Hex2rbg এর আমার সংস্করণ:

# Ff এর মতো সংক্ষিপ্ত hex গ্রহণ করুন
অ্যালগরিদম সামঞ্জস্যতা হ'ল (এন), রেজেক্স ব্যবহারের চেয়ে দ্রুত হওয়া উচিত। যেমন String.replace, String.split, String.matchইত্যাদি ..
ধ্রুবক স্থান ব্যবহার করুন।
আরজিবি এবং আরজিবি সমর্থন করুন।

আপনি যদি IE8 ব্যবহার করে থাকেন তবে আপনাকে 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()+')';
    }
}

— এরিক চেন
সূত্র

নোট যে h.join(',')হিসাবে একই জিনিস h.join()।

2

এই স্নিপেট হেক্সকে আরজিবি এবং আরজিবিতে হেক্সে রূপান্তরিত করে।

ডেমো দেখুন

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
}

— user2240578
সূত্র

শর্টহ্যান্ড হ্যান্ডল করার সাথে সাথে ভাল, তবে এটি স্ট্রিংয়ের পরিবর্তে কোনও কাঠামো ফিরিয়ে আনতে পারে?

— ডানক

1

আমি এক্সএএমএল ডেটা নিয়ে কাজ করছি যার #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/

— বেনসন
সূত্র

1

সরাসরি 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'))

— লুইস আমোর
সূত্র

1

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;

— user3237573
সূত্র

1

প্রচুর উত্তর বিবেচনা করে কেবলমাত্র আংশিকভাবে প্রশ্নের উত্তর দিন (হয় আরজিবি থেকে এইচএক্স বা অন্য কোনও উপায়ে) আমি আমার আংশিক উত্তরটিও পোস্ট করব thought

আমার অনুরূপ সমস্যা ছিল এবং আমি এই জাতীয় কিছু করতে চেয়েছিলাম: যে কোনও বৈধ সিএসএস বর্ণ (এইচএসএল (ক), আরজিবি (ক), এইচএক্স বা রঙের নাম) এবং ১। একটি আলফা মান যুক্ত করতে বা মুছতে সক্ষম হতে পারে, ২। একটি rgb (a) অবজেক্ট ফিরিয়ে দিন। আমি ঠিক এই উদ্দেশ্যে একটি প্লাগইন লিখেছি। এটি গিটহাবে পাওয়া যাবে (এর জন্য jQuery প্রয়োজন, তবে আপনি চাইলে এটি কাঁটাচামচ করে একটি ভ্যানিলা সংস্করণ তৈরি করতে পারেন)। এখানে একটি ডেমো পৃষ্ঠা । আপনি নিজের জন্য চেষ্টা করতে পারেন পারেন এবং ফ্লাইতে উত্পন্ন আউটপুটটি দেখতে পারেন।

আমি বিকল্পগুলি এখানে অনুলিপি করব:

আরজিবি জেনারেটর একটি আর্গুমেন্ট, রঙটি গ্রহণ করে এবং তিনটি বিকল্প সরবরাহ করে: আসবজেক্ট, অ্যাড আলফা এবং অপসারণ আলফা। তিনটি বিকল্প বাদ দিলে আরজিবি রঙটি স্ট্রিং হিসাবে ফিরে আসবে।

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

নোট করুন যে ডিফল্টরূপে আলফা উপাদানগুলি অন্তর্ভুক্ত রয়েছে। যদি ইনপুট মানটিতে একটি আলফা মান থাকে তবে আউটপুটটি আরজিবি ফর্ম্যাটে থাকবে।

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

আপনি আলফা কে সত্যে সেট করে এই আচরণটি অক্ষম করতে পারেন। এটি প্রাথমিক এইচএসএলএ বা আরজিবিএ রঙ থেকে যে কোনও আলফা মান সরিয়ে ফেলবে।

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

অন্যদিকে, আপনি যদি একটি আলফা চ্যানেল যুক্ত করতে চান, আপনি 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 এবং allyচ্ছিকভাবে 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

— ব্রাম ভ্যানরোয়
সূত্র

1

টিম ডাউন দ্বারা সর্বাধিক রেট করা উত্তরটি আরজিবিতে রূপান্তর করার জন্য আমি দেখতে পাই সেরা সমাধান সরবরাহ করে। আমি হেক্স রূপান্তরকরণের জন্য এই সমাধানটি আরও ভাল পছন্দ করি কারণ এটি হেক্সে রূপান্তরকরণের জন্য সর্বাধিক সংহত সীমানা যাচাই এবং শূন্য প্যাডিং সরবরাহ করে।

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

বাম শিফট '<<' এবং বা '|' ব্যবহার করুন অপারেটররা এটিকে একটি মজাদার সমাধানও করে তোলে।

— srolfe26
সূত্র

1

আমি এটি পেয়েছি এবং কারণ আমি মনে করি এটি বেশ সোজা এগিয়ে রয়েছে এবং এর বৈধতা পরীক্ষা রয়েছে এবং আলফা মানগুলি ((চ্ছিক) সমর্থন করে, এটি ক্ষেত্রে উপযুক্ত হবে।

আপনি কী করছেন তা যদি জানা থাকে এবং এটি খুব সামান্য দ্রুততর হয় তবে কেবলমাত্র রেজেক্স লাইনটি মন্তব্য করুন।

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

— redestructa
সূত্র

আরজিবি থেকে হেক্স এবং হেক্স থেকে আরজিবি

আপডেট 3 ডিসেম্বর 2012

টিম ডাউন এর উত্তরের ECMAScript 6 সংস্করণ

আরজিবিকে হেক্সে রূপান্তর করা হচ্ছে

হেক্সকে আরজিবিতে রূপান্তর করা হচ্ছে

বোনাস: আরজিবি থেকে হেক্স padStart()পদ্ধতি ব্যবহার করে

শর্টহ্যান্ড সংস্করণ যা একটি স্ট্রিং গ্রহণ করে:

এটি ইতিমধ্যে হেক্সাডেসিমাল নয় কিনা তা পরীক্ষা করতে

বোনাস: আরজিবি থেকে হেক্স `padStart()`পদ্ধতি ব্যবহার করে