Convert Hex to RGBA

问题:

My fiddle - http://jsbin.com/pitu/1/edit

I wanted to try an easy hex to rgba conversion. Ever browser I've used renders colors using rgb as default so when using the farbtastic color picker I'm converting the hex value to rgb by grabbing the background color the hex value generates (as rgb by default = simple conversion)

I tried replacing the ) symbol to , 1), but that didn't work so I went to just see how converting rgb to rgba would work, and I'm still having trouble.

The jquery

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

The goal

回答1:

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

回答2:

@ElDoRado1239 has the right idea, but there's also a cleaner way:

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

回答3:

If you want to convert hex to rgba then you can use this function,

function hex2rgba_convert(hex,opacity){  hex = hex.replace('#','');  r = parseInt(hex.substring(0, hex.length/3), 16);  g = parseInt(hex.substring(hex.length/3, 2*hex.length/3), 16);  b = parseInt(hex.substring(2*hex.length/3, 3*hex.length/3), 16);   result = 'rgba('+r+','+g+','+b+','+opacity/100+')';  return result; } 

Here is details is hex to rgba

回答4:

Here is a function that returns rgb or rgba if you provide an alpha. The function also converts short hex color codes too.

function:

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

examples:

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) 

回答5:

Pure JS solution if it helps:

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

"alphaYes" is "true" or "false" depending upon whether you want the alpha or not.

回答6:

Clean TypeScript version:

hexToRGB(hex, alpha) {    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 `rgba(${r}, ${g}, ${b})`;   } } 

Based on @AJFarkas's answer.

回答7:

I liked the @AJFarkas answer and append the support for shortcut hex (#fff) to it

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('
'); document.write(hexToRGB('#F00', 0.4));

回答8:

Try This

文章来源: Convert Hex to RGBA