web-dev-qa-db-fra.com

Conversion de Hex en RGBA

Mon violon - http://jsbin.com/pitu/1/edit

Je voulais essayer un hex facile à la conversion RGBA. Tous les navigateurs que j'ai utilisés rendent les couleurs avec rgb par défaut. Ainsi, lors de l'utilisation du sélecteur de couleurs farbtastic, je convertis la valeur hexadécimale en rgb en saisissant la couleur d'arrière-plan générée par cette valeur (en tant que rgb par défaut = conversion simple).

J'ai essayé de remplacer le symbole ) par , 1), mais comme cela ne fonctionnait pas, je me suis contenté de voir comment convertir rgb en rgba fonctionnerait, et j'ai toujours des problèmes.

Le jquery 

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

Le but
enter image description here

MODIFIER: 

TinyColor Est une excellente bibliothèque de manipulation des couleurs js qui fait tout ce que je veux ici et plus. Je pense que vous voudrez peut-être essayer! - https://github.com/bgrins/TinyColor

javascriptjquerycolors
45
Michael Schwartz
//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)
*/
100
kennebec

@ ElDoRado1239 a la bonne idée, mais il existe aussi un moyen plus propre: 

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

46
AJFarkas

Fonction ES6 pour gérer uniquement les hexagones de 6 caractères avec ou sans le '#':

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

Usage:

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)
9
Lobster Fighter

Si vous voulez convertir hex en rgba, vous pouvez utiliser cette fonction,

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

Voici les détails est hex à rgba

9
Sajjad Hossain

Version Clean TypeScript: 

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

Basé sur la réponse de @ AJFarkas.

7
Chrillewoodz

Voici une fonction qui retourne rgb ou rgba si vous fournissez un alpha. La fonction convertit également les codes de couleur hexadécimaux courts.

une fonction: 

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

exemples: 

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

ES6 modern, sans RegEx, solution avec vérification des erreurs et fonction de flèche constante, renvoyant la valeur null pour les erreurs Si alpha n'est pas donné, la valeur par défaut de un est utilisée:

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

Remarque: Il retourne null pour les erreurs. Vous pouvez remplacer {return null;} par une instruction throw: {throw "Not a valid hex color!";}, mais vous devrez alors l'appeler de l'intérieur try-catch:

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

Solution Pure JS si cela vous aide:

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" est "true" ou "false" selon que vous souhaitiez l'alpha ou non.

Preview

3
ElDoRado1239

J'ai aimé la réponse de @AJFarkas et y ajouter le support pour le raccourci hexadécimal

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

2
Peter Denev

Voici une version ES2015 + un peu plus défensive et qui gère la syntaxe abrégée à 3 chiffres.

/*
 * 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(', ')})`;
}
2
Geoff

Déc 2018 - toute approche modulaire sous forme hexagonale

Le principal défi est qu’à partir de 2018, il existe quelques formes de HEX. La forme traditionnelle à 6 caractères, la forme raccourcie à 3 caractères et une nouvelle forme à 4 et 8 caractères incluant alpha (qui n'est que partiellement prise en charge à ce jour). La fonction suivante peut gérer n’importe quelle forme HEX. 

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 (a) {return a / 256}
    if (alpha){
        if (1 < alpha && alpha <= 100) { return alpha / 100}
        if (0 <= alpha && alpha <= 1) { return alpha }
    }
    return 1
}

const hexToRGB = (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)})`
}

Notez que l'alpha peut être fourni à la fonction de l'une des manières suivantes: 

  1. En tant que partie d'un 4, ou 8 forme HEX. 
  2. En second paramètre entre 0-1, 
  3. En second paramètre entre 1-100

OutPut 

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

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

console.log(hexToRGB(c1, 0.5))   //  rgba(255, 136, 0, 0.5)
console.log(hexToRGB(c1, 50))   //  rgba(255, 136, 0, 0.5)
console.log(hexToRGB(c3, 0.5))   //  rgba(0, 136, 255, 0.5)
console.log(hexToRGB(c3, 50))   //  rgba(0, 136, 255, 0.5)
console.log(hexToRGB(c3, 120))   //  rgba(0, 136, 255, 1)

Manuscrit

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

const getChunksFromString : (str:string, chunkSize:number) => string[] | null = 
    (str, chunkSize) => str.match(new RegExp(`.{${chunkSize}}`, "g"))

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

const getAlphafloat : (a?:number, alpha?:number) => number = 
    (a, alpha) => {
        if (a) {return a / 256}
        if (alpha){
            if (1 < alpha && alpha <= 100) { return alpha / 100}
            if (0 <= alpha && alpha <= 1) { return alpha }
        }
        return 1
    }

export const hexToRGB : (hex:string, alpha?:number) => string = 
    (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) as string[]
        const [r, g, b, a] = hexArr.map(convertHexUnitTo256)
        return `rgba(${r}, ${g}, ${b}, ${getAlphafloat(a, alpha)})`
    }
2
Ben Carp

Et un autre basé sur le transfert de bits.

// 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})`;
};
0
nitzel