হেক্সকে আরজিবিএতে রূপান্তর করুন

Question 1

আমার ফিডল - http://jsbin.com/pitu/1/edit

আমি rgba রূপান্তর করতে একটি সহজ হেক্স চেষ্টা করতে চেয়েছিলাম। কখনও ব্রাউজারে আমি ডিগ্রি হিসাবে আরজিবি ব্যবহার করে রঙগুলি রেন্ডার ব্যবহার করেছি তাই হ'ল মানটি উত্পন্ন ব্যাকগ্রাউন্ডের রঙটি ধরে আমি হেক্স মানকে আরজিবিতে রূপান্তর করছি (ডিফল্ট = সাধারণ রূপান্তর হিসাবে আরজিবি হিসাবে)

আমি )প্রতীকটি প্রতিস্থাপনের চেষ্টা করেছি , 1), তবে এটি কার্যকর হয়নি তাই আমি আরজিবিকে আরজিবিতে রূপান্তর কীভাবে কাজ করবে তা দেখতে গিয়েছিলাম, এবং এখনও আমার সমস্যা হচ্ছে।

Jquery

$('.torgb').val($('#color').css('background-color'));
$('.torgba').val().replace(/rgb/g,"rgba");

লক্ষ
এখানে চিত্র বর্ণনা লিখুন

সম্পাদনা :

টিনিকালার হ'ল একটি দুর্দান্ত রঙের কারসাজি জেএস লাইব্রেরি যা এখানে এবং আরও বেশি কিছু করতে চাই does আমি মনে করি আপনি ছেলেরা চেষ্টা করে দেখতে পারেন! - https://github.com/bgrins/TinyColor

Question 2

//If you write your own code, remember hex color shortcuts (eg., #fff, #000)

function hexToRgbA(hex){
    var c;
    if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
        c= hex.substring(1).split('');
        if(c.length== 3){
            c= [c[0], c[0], c[1], c[1], c[2], c[2]];
        }
        c= '0x'+c.join('');
        return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',1)';
    }
    throw new Error('Bad Hex');
}

hexToRgbA('#fbafff')

/*  returned value: (String)
rgba(251,175,255,1)
*/

Question 3

@ এলডোরোডো 1239 এর সঠিক ধারণা আছে তবে এটির একটি পরিষ্কার উপায় রয়েছে:

function hexToRGB(hex, alpha) {
    var r = parseInt(hex.slice(1, 3), 16),
        g = parseInt(hex.slice(3, 5), 16),
        b = parseInt(hex.slice(5, 7), 16);

    if (alpha) {
        return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
    } else {
        return "rgb(" + r + ", " + g + ", " + b + ")";
    }
}

hexToRGB('#FF0000', 0.5);

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

Question 4

'#' এর সাথে বা ছাড়াই কেবলমাত্র 6 টি অক্ষরের হেক্স পরিচালনা করার জন্য ES6 ফাংশন:

const hex2rgba = (hex, alpha = 1) => {
  const [r, g, b] = hex.match(/\w\w/g).map(x => parseInt(x, 16));
  return `rgba(${r},${g},${b},${alpha})`;
};

ব্যবহার:

hex2rgba('#af087b', .5)   // returns: rgba(175,8,123,0.5)
hex2rgba('af087b', .5)    // returns: rgba(175,8,123,0.5)
hex2rgba('af087b')        // returns: rgba(175,8,123,1)

Question 5

ক্লিন টাইপস্ক্রিপ্ট সংস্করণ:

hexToRGB(hex: string, alpha: string) {

  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);

  if (alpha) {
    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
  } else {
    return `rgb(${r}, ${g}, ${b})`;
  }
}

@ এজেফারকাসের উত্তরের ভিত্তিতে

Question 6

যে কোনও হেক্স ফর্ম মডুলার পদ্ধতির

মূল চ্যালেঞ্জটি হ'ল 2018 সালের হিসাবে এইচএক্সের কয়েকটি ফর্ম রয়েছে। 6 চর সনাতন ফর্ম, 3 চর সংক্ষিপ্ত রূপ এবং আলফা অন্তর্ভুক্ত একটি নতুন 4 এবং 8 চর ফর্ম। নিম্নলিখিত ফাংশনটি যে কোনও এইচএক্স ফর্মটি পরিচালনা করতে পারে।

const isValidHex = (hex) => /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex)

const getChunksFromString = (st, chunkSize) => st.match(new RegExp(`.{${chunkSize}}`, "g"))

const convertHexUnitTo256 = (hexStr) => parseInt(hexStr.repeat(2 / hexStr.length), 16)

const getAlphafloat = (a, alpha) => {
    if (typeof a !== "undefined") {return a / 255}
    if ((typeof alpha != "number") || alpha <0 || alpha >1){
      return 1
    }
    return alpha
}

export const hexToRGBA = (hex, alpha) => {
    if (!isValidHex(hex)) {throw new Error("Invalid HEX")}
    const chunkSize = Math.floor((hex.length - 1) / 3)
    const hexArr = getChunksFromString(hex.slice(1), chunkSize)
    const [r, g, b, a] = hexArr.map(convertHexUnitTo256)
    return `rgba(${r}, ${g}, ${b}, ${getAlphafloat(a, alpha)})`
}

নিম্নলিখিত পদ্ধতিতে আলফা প্রদান করা যেতে পারে:

4 বা 8 এর অংশ হিসাবে HEX গঠন করুন।
0-1 এর মধ্যে দ্বিতীয় প্যারামিটার হিসাবে,

আউটপুট

    const c1 = "#f80"
    const c2 = "#f808"
    const c3 = "#0088ff"
    const c4 = "#0088ff88"
    const c5 = "#98736"

    console.log(hexToRGBA(c1))   //  rgba(255, 136, 0, 1)
    console.log(hexToRGBA(c2))   //  rgba(255, 136, 0, 0.53125)
    console.log(hexToRGBA(c3))   //  rgba(0, 136, 255, 1)
    console.log(hexToRGBA(c4))   //  rgba(0, 136, 255, 0.53125)
    console.log(hexToRGBA(c5))   //  Uncaught Error: Invalid HEX

    console.log(hexToRGBA(c1, 0.5))   //  rgba(255, 136, 0, 0.5)
    console.log(hexToRGBA(c3, 0.5))   //  rgba(0, 136, 255, 0.5)

Question 7

এখানে একটি ফাংশন রয়েছে যা আপনি একটি আলফা সরবরাহ করে যদি rgb বা rgba ফেরত দেয়। ফাংশনটি শর্ট হেক্স রঙের কোডগুলিও রূপান্তর করে।

ফাংশন:

function hexToRgb(hex, alpha) {
   hex   = hex.replace('#', '');
   var r = parseInt(hex.length == 3 ? hex.slice(0, 1).repeat(2) : hex.slice(0, 2), 16);
   var g = parseInt(hex.length == 3 ? hex.slice(1, 2).repeat(2) : hex.slice(2, 4), 16);
   var b = parseInt(hex.length == 3 ? hex.slice(2, 3).repeat(2) : hex.slice(4, 6), 16);
   if ( alpha ) {
      return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + alpha + ')';
   }
   else {
      return 'rgb(' + r + ', ' + g + ', ' + b + ')';
   }
}

উদাহরণ:

hexToRgb('FF0000');// rgb(255, 0, 0)
hexToRgb('#FF0000');// rgb(255, 0, 0)
hexToRgb('#FF0000', 1);// rgba(255, 0, 0, 1)
hexToRgb('F00');// rgb(255, 0, 0)
hexToRgb('#F00');// rgb(255, 0, 0)
hexToRgb('#F00', 1);// rgba(255, 0, 0, 1)

Question 8

ES6 আধুনিক, RegEx বিনামূল্যে, ত্রুটি যাচাই এবং ধ্রুবক তীর ফাংশন সহ সমাধান, যা ত্রুটির জন্য নাল ফেরায়। যদি আলফা দেওয়া না হয় তবে একটির ডিফল্ট মানটি ব্যবহৃত হয়:

const hexToRGB = (hex, alpha = 1) => {
    let parseString = hex;
    if (hex.startsWith('#')) {parseString = hex.slice(1, 7);}
    if (parseString.length !== 6) {return null;}
    const r = parseInt(parseString.slice(0, 2), 16);
    const g = parseInt(parseString.slice(2, 4), 16);
    const b = parseInt(parseString.slice(4, 6), 16);
    if (isNaN(r) || isNaN(g) || isNaN(b)) {return null;}
    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
};

দ্রষ্টব্য: এটি nullত্রুটির জন্য ফিরে আসে । আপনি {return null;}একটি থ্রো বিবৃতি দিয়ে প্রতিস্থাপন করতে পারেন : {throw "Not a valid hex color!";}তবে তারপরে আপনার এটিকে কল করা উচিত try-catch:

hexToRGB("#3454r5") => null
hexToRGB("#345465") => rgba(52, 84, 101, 1)
hexToRGB("#345465", 0.5) => rgba(52, 84, 101, 0.5)

Question 9

খাঁটি জেএস সমাধান যদি এটি সহায়তা করে:

function hexToRGB(hex,alphaYes){
 var h = "0123456789ABCDEF";
 var r = h.indexOf(hex[1])*16+h.indexOf(hex[2]);
 var g = h.indexOf(hex[3])*16+h.indexOf(hex[4]);
 var b = h.indexOf(hex[5])*16+h.indexOf(hex[6]);
 if(alphaYes) return "rgba("+r+", "+g+", "+b+", 1)";
 else return "rgb("+r+", "+g+", "+b+")";
}

আপনি আলফা চান কিনা তার উপর নির্ভর করে "আলফায়েস" "সত্য" বা "মিথ্যা"।

পূর্বরূপ

Question 10

আমি @ এজেফারকাসের উত্তরটি পছন্দ করেছি এবং এতে শর্টকাট হেক্স (# ফাফ) সমর্থন যোগ করি

function hexToRGB(hex, alpha) {
    if (!hex || [4, 7].indexOf(hex.length) === -1) {
        return; // throw new Error('Bad Hex');
    }

    hex = hex.substr(1);
    // if shortcuts (#F00) -> set to normal (#FF0000)
    if (hex.length === 3) { 
        hex = hex.split('').map(function(el){ 
              return el + el + '';
            }).join('');
    }

    var r = parseInt(hex.slice(0, 2), 16),
        g = parseInt(hex.slice(2, 4), 16),
        b = parseInt(hex.slice(4, 6), 16);

    if (alpha !== undefined) {
        return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
    } else {
        return "rgb(" + r + ", " + g + ", " + b + ")";
    }
}

document.write(hexToRGB('#FF0000', 0.5));
document.write('<br>');
document.write(hexToRGB('#F00', 0.4));

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

Question 11

এখানে একটি ES2015 + সংস্করণ যা আরও কিছুটা প্রতিরক্ষামূলক এবং শর্টহ্যান্ড 3-অঙ্কের সিনট্যাক্স পরিচালনা করে।

/*
 * Takes a 3 or 6-digit hex color code, and an optional 0-255 numeric alpha value
 */
function hexToRGB(hex, alpha) {
  if (typeof hex !== 'string' || hex[0] !== '#') return null; // or return 'transparent'

  const stringValues = (hex.length === 4)
        ? [hex.slice(1, 2), hex.slice(2, 3), hex.slice(3, 4)].map(n => `${n}${n}`)
        : [hex.slice(1, 3), hex.slice(3, 5), hex.slice(5, 7)];
  const intValues = stringValues.map(n => parseInt(n, 16));

  return (typeof alpha === 'number')
    ? `rgba(${intValues.join(', ')}, ${alpha})`
    : `rgb(${intValues.join(', ')})`;
}

Question 12

এবং বিট স্থানান্তর কাছাকাছি অন্য একটি।

// hex can be a string in the format of "fc9a04", "0xfc9a04" or "#fc90a4" (uppercase digits are allowed) or the equivalent number
// alpha should be 0-1
const hex2rgb = (hex, alpha) => {
  const c = typeof(hex) === 'string' ? parseInt(hex.replace('#', ''), 16)  : hex;
  return `rgb(${c >> 16}, ${(c & 0xff00) >> 8}, ${c & 0xff}, ${alpha})`;
};

Question 13

চেষ্টা করুন

// hex - str e.g. "#abcdef"; a - alpha range 0-1; result e.g. "rgba(1,1,1,0)"
let hex2rgba= (hex,a)=> `rgb(${hex.substr(1).match(/../g).map(x=>+`0x${x}`)},${a})`

কোড স্নিপেট দেখান

/// hex - str e.g. "#abcdef"; a - alpha range 0-1; result e.g. "rgba(1,1,1,0)"
let hex2rgba= (hex,a)=> `rgb(${hex.substr(1).match(/../g).map(x=>+`0x${x}`)},${a})`;

function convert() {
  console.log(hex2rgba(inp.value,1));
}

<input id="inp" value="#abcdef" >
<button onclick="convert()">convert</button>

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

Question 14

এখানে একটি দ্রুত ফাংশন যা 3, 4, 6 এবং 8 বর্ণ বর্ণের কোডগুলিকে সমর্থন করে:

function hexToRGBA(hex) {
    // remove invalid characters
    hex = hex.replace(/[^0-9a-fA-F]/g, '');

    if (hex.length < 5) { 
        // 3, 4 characters double-up
        hex = hex.split('').map(s => s + s).join('');
    }

    // parse pairs of two
    let rgba = hex.match(/.{1,2}/g).map(s => parseInt(s, 16));

    // alpha code between 0 & 1 / default 1
    rgba[3] = rgba.length > 3 ? parseFloat(rgba[3] / 255).toFixed(2): 1;

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

এটি কি করে তা এখানে। এটি কোনও অ-হেক্সাডেসিমাল অক্ষর সরিয়ে দেয়। যদি এইচএক্স 5 (3 বা 4) টির চেয়ে কম হয় তবে এটি প্রতিটি অক্ষরকে দ্বিগুণ করে। এরপরে এটি এইচএক্সকে দুটি চরিত্রের জোড়ায় বিভক্ত করে এবং প্রতিটি জোড়কে পূর্ণসংখ্যায় পার্স করে। যদি কোনও আলফা এইচএক্স থাকে তবে এটি 0 থেকে 1 পর্যন্ত একটি ফ্লোটে পার্স করা হয়, অন্যথায় এটি ডিফল্ট হয়েছে 1 এ The

Question 15

এইচএক্সকে আলফা (অহেক্স) দিয়ে আরগিবায় রূপান্তর করুন।

function ahex_to_rba(ahex) {
    //clean #
    ahex = ahex.substring(1, ahex.length);
    ahex = ahex.split('');

    var r = ahex[0] + ahex[0],
        g = ahex[1] + ahex[1],
        b = ahex[2] + ahex[2],
        a = ahex[3] + ahex[3];

    if (ahex.length >= 6) {
        r = ahex[0] + ahex[1];
        g = ahex[2] + ahex[3];
        b = ahex[4] + ahex[5];
        a = ahex[6] + (ahex[7] ? ahex[7] : ahex[6]);
    }

    var int_r = parseInt(r, 16),
        int_g = parseInt(g, 16),
        int_b = parseInt(b, 16),
        int_a = parseInt(a, 16);


    int_a = int_a / 255;

    if (int_a < 1 && int_a > 0) int_a = int_a.toFixed(2);

    if (int_a || int_a === 0)
        return 'rgba('+int_r+', '+int_g+', '+int_b+', '+int_a+')';
    return 'rgb('+int_r+', '+int_g+', '+int_b+')';
}

স্নিপেট দিয়ে নিজে চেষ্টা করুন:

কোড স্নিপেট দেখান

function ahex_to_rba(ahex) {
    //clean #
    ahex = ahex.substring(1, ahex.length);
    ahex = ahex.split('');

    var r = ahex[0] + ahex[0],
        g = ahex[1] + ahex[1],
        b = ahex[2] + ahex[2],
        a = ahex[3] + ahex[3];

    if (ahex.length >= 6) {
        r = ahex[0] + ahex[1];
        g = ahex[2] + ahex[3];
        b = ahex[4] + ahex[5];
        a = ahex[6] + (ahex[7] ? ahex[7] : ahex[6]);
    }

    var int_r = parseInt(r, 16),
        int_g = parseInt(g, 16),
        int_b = parseInt(b, 16),
        int_a = parseInt(a, 16);


    int_a = int_a / 255;

    if (int_a < 1 && int_a > 0) int_a = int_a.toFixed(2);

    if (int_a || int_a === 0)
        return 'rgba('+int_r+', '+int_g+', '+int_b+', '+int_a+')';
    return 'rgb('+int_r+', '+int_g+', '+int_b+')';
}


$(function() {
  $('#go').click(function() {
    $('p b').text(ahex_to_rba($('#hex').val()));
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="hex" type="text" value="#ffaaffaa">
<input id="go" type="button" value="Go">

<p>Result: <b></b></p>

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

মূল লেখক

Question 16

@ এলডোআরডো 1239 এ যুক্ত করা হচ্ছে

যারা আলফা মান (টাইপ স্ক্রিপ্ট স্নিপেট) পাস করতে চান তাদের জন্য:

static hexToRGB(hex: string, alpha: number): string {
    var h = "0123456789ABCDEF";
    var r = h.indexOf(hex[1]) * 16 + h.indexOf(hex[2]);
    var g = h.indexOf(hex[3]) * 16 + h.indexOf(hex[4]);
    var b = h.indexOf(hex[5]) * 16 + h.indexOf(hex[6]);
    if (alpha) {
      return `rgba(${r}, ${g}, ${b}, ${alpha})`
    }

    return `rgba(${r}, ${g}, ${b})`;
  }

Question 17

চাকাটি পুনরায় বাস্তবায়নের দরকার নেই:

আরজিবি থেকে এইচএক্স: https://github.com/sindresorhus/rgb-hex
এইচএক্স টু আরজিবি: https://github.com/sindresorhus/hex-rgb

Question 18

এটা চেষ্টা কর

<div class="torgb" onclick="rgba();" style="background-color:#000; width:20px; height:20px;"></div>
<script>
function rgba(){
$('.torgb').attr('background-color','rgba(0,0,0,1)');
$('.torgb').attr('onclick','hex();');
}
function hex(){
$('.torgb').attr('background-color','#000');
$('.torgb').attr('onclick','rgba();');
}
</script>