RGB à Hex et Hex à RGB


556

Comment convertir des couleurs au format RVB au format Hex et vice versa?

Par exemple, convertissez '#0080C0'en (0, 128, 192).

Réponses:


1237

Remarque : les deux versions de rgbToHexs'attendent à des valeurs entières pour r, get b, vous devrez donc faire votre propre arrondi si vous avez des valeurs non entières.

Ce qui suit fera la conversion RVB en hexadécimal et ajoutera tout remplissage nul requis:

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

Conversion dans l'autre sens:

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

Enfin, une version alternative de rgbToHex(), comme discuté dans la réponse de @ casablanca et suggéré dans les commentaires de @cwolves:

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

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

Mise à jour 3 décembre 2012

Voici une version hexToRgb()qui analyse également un triplet hexagonal raccourci tel que "# 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
@ Vitim.us: <<est l'opérateur de décalage gauche au niveau du bit. En supposant qu'il gs'agit d'un entier non nul, g << 8il se multiplie donc effectivement gpar 256, ajoutant des zéros à la fin de sa représentation hexadécimale. De même r << 16ajoute 4 zéros. Ajout 1 << 24(1000000 en hexadécimal) assure que la représentation hexadécimale est laissé rembourré avec tous les zéros nécessaires une fois que le premier plan 1est enlevée à l' aide slice(). Par exemple, si ret gétaient à la fois zéro et bétait 51, ((r << 16) + (g << 8) + b).toString(16)retournerait la chaîne "33"; ajoutez 1 << 24et vous obtenez "1000033". Ensuite, dépouillez- 1vous et vous y êtes.
Tim Down

Le décalage de bits (par exemple (r << 16)) donnerait-il le même résultat sur les ordinateurs grands et petits endians? Edit: ce n'est pas le cas. Voici pourquoi: stackoverflow.com/questions/1041554/…
WoodenKitty

@Gothdo: Désolé de revenir en arrière, mais il n'est souvent pas possible ou pratique d'utiliser ES6. La version précédente fonctionnera n'importe où.
Tim Down du

3
votre rgbToHex ne fonctionne pas. obtenez le résultat amusant: # f55b2f00
TheCrazyProfessor

1
Concernant la dernière rgbToHexfonction. On voudra soit transtyper vos valeurs RVB passées en entiers, soit modifier légèrement la fonction rgbToHex. Exemple: jsfiddle.net/cydqo6wj Actuel: return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); Modifié: return "#" + ((1 << 24) + ((+r) << 16) + ((+g) << 8) + (+b)).toString(16).slice(1); Dans la version modifiée, je force simplement les valeurs RVB à être évaluées en nombres entiers avant le passage à 16 / hex.
user2977468

148

Une version alternative de 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;
}

Edit: 28/03/2017 Voici une autre approche cela semble être encore plus rapide

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

Edit: 8/11/2017 La nouvelle approche ci-dessus après plus de tests n'est pas plus rapide :(. Bien que ce soit une manière alternative amusante.


57
Une ligne de perfection: return [r, g, b].join();.
Pavlo

5
Ou pour la solution à une ligne tout encapsulant:return [(bigint = parseInt(hex, 16)) >> 16 & 255, bigint >> 8 & 255, bigint & 255].join();
Pluton

12
J'utilise ceci avec un ajustement - supprimez les caractères non hexadécimaux (comme un #parseInthex = hex.replace(/[^0-9A-F]/gi, '');
interligne

5
Ne soyez pas si rapide à utiliser la version abrégée. JSPerf montre que celui de cette réponse est le plus rapide: jsperf.com/2014-09-16-hex-to-rgb
Olav Kokovkin

1
Soyez prudent avec cela, sa sortie n'est pas fiable. Il a fait apparaître une couleur proche du noir rose foncé. Mieux vaut utiliser la fonction de la première réponse.
Maciej Krawczyk

64

Version ECMAScript 6 de la réponse de Tim Down

Conversion de RVB en hexadécimal

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'

Conversion hexadécimale en RVB

Renvoie un tableau [r, g, b]. Fonctionne également avec les triplets hexagonaux sténographiques tels que "#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]

Bonus: RVB à hex en utilisant la padStart()méthode

const rgbToHex = (r, g, b) => '#' + [r, g, b]
  .map(x => x.toString(16).padStart(2, '0')).join('')

console.log(rgbToHex(0, 51, 255)); // '#0033ff'

Notez que cette réponse utilise les dernières fonctionnalités ECMAScript, qui ne sont pas prises en charge dans les anciens navigateurs. Si vous souhaitez que ce code fonctionne dans tous les environnements, vous devez utiliser Babel pour compiler votre code.


hexToRgb () est facilement adapté pour gérer la notation RGBA hexadécimale à 4 et 8 chiffres: .replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(m, r, g, b) => '#' + r + r + g + g + b + b)devient: .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)Mais existe-t-il un moyen de faire fonctionner l'expression rationnelle avec A de RGBA comme quatrième valeur hexadécimale facultative? Cela compléterait absolument la fonctionnalité, faisant fonctionner une expression rationnelle avec RVB hexadécimal et RVBA. Sinon, il s'agit de deux expressions rationnelles, l'une avec 3 valeurs, l'autre avec 4. Vous devez diviser la 4e valeur par 255 pour obtenir le 4e argument de rgba ().
jamess

44

Voici ma version:

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

cool, mais la question était hex2rgb. Pouvez-vous le faire aussi court que cela, ce serait bien :)
K. Kilian Lindberg

4
Bien que cela ne marche pas dans les deux sens, je dois voter contre cela parce que pour une raison quelconque, les autres solutions RVB à hexadécimal dans cette question ne fonctionnaient pas pour moi.
Goose

La question venait d'abord de rgb2hex. Quoi qu'il en soit, j'ai ajouté mon propre hex2rgb.
FelipeC

Un peu confus au sujet de la rgb2hexméthode. Pourquoi est - ce que nous ajoutons 0x1000000à rgb, et pourquoi nous devons appeler .slice(1)à la fin?
hackjutsu

Parce que le bleu serait #FF, nous ajoutons 0x1000000, c'est donc # 10000FF, puis nous supprimons le premier "1".
FelipeC

26

Je suppose que vous voulez dire la notation hexadécimale de style HTML, c'est-à-dire #rrggbb. Votre code est presque correct, sauf que vous avez inversé la commande. Ça devrait être:

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

De plus, l'utilisation des décalages de bits peut faciliter la lecture:

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

Génial, sauf que vous devez laisser le zéro-pad à 6 caractères si rouge <16:var decColor = (red < 16 ? '0' : '') + (red << 16) + (green << 8) + blue;
Mark Kahn

Semble fonctionner sauf pour cela: (0,128,192) probablement à cause du 0?
Sindar

@cwolves: Vous avez raison, ça m'a manqué. Mais il doit être ajouté à la chaîne finale, pas à l'entier.
casablanca

@Sindar: Voir le commentaire de @cwolves, si red < 16vous devez préfixer a 0au résultat final.
casablanca

20
ok, ICI:var hexColor = ((1 << 24) + (red << 16) + (green << 8) + blue).toString(16).substr(1);
Mark Kahn

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

2
J'adore les réponses simples
Bjorn Behrendt

La sorcellerie! vous devriez ajouter une explication à cette doublure très cool.
James Harrington

Agréable! Voici la même chose, sauf minified et retourner un objet avec des propriétés 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

Ce code accepte les variantes et l'opacité #fff et #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(',')+')';
}

11

HEX fonctionnel à une ligne vers RGBA

Prend en charge les formulaires courts #fffet longs #ffffff.
Prend en charge le canal alpha (opacité).
Peu importe si le hachage est spécifié ou non, fonctionne dans les deux cas.

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

exemples:

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)  

9
Essayez d'écrire du code lisible par l'homme, pas des lignes simples. Il n'y a aucun gain si vous réduisez votre code avant la production de toute façon.
Roko C. Buljan

11

Cela pourrait être utilisé pour obtenir des couleurs à partir de propriétés de style calculées:

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

Réf: https://github.com/k-gun/so/blob/master/so_util.js


Merci pour ça. Mais il y a une petite erreur: devrait revenir (r.length == 1 ? "0" + r : r)et de même pour le vert et le bleu.
typhon du

7

Une solution au niveau du bit est normalement bizarre. Mais dans ce cas, je suppose que c'est plus élégant 😄

function hexToRGB(hexColor){
  return {
    red: (hexColor >> 16) & 0xFF,
    green: (hexColor >> 8) & 0xFF,  
    blue: hexColor & 0xFF,
  }
}

Usage:

const {red, green, blue } = hexToRGB(0xFF00FF)

console.log(red) // 255
console.log(green) // 0
console.log(blue) // 255

6

// En ignorant la notation hsl, les valeurs de couleur sont généralement exprimées sous forme de noms, rgb, rgba ou hex-

// Hex peut avoir 3 valeurs ou 6.

// Rgb peut être des pourcentages ainsi que des valeurs entières.

// Mieux vaut tenir compte de tous ces formats, au moins.

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

A voté pour que ce soit la version la plus complète que j'ai regardée. Ce serait génial s'il pouvait aussi extraire les couleurs de rgba.
Michael Scheper

6

@ Tim, pour ajouter à votre réponse (c'est un peu gênant de l'adapter à un commentaire).

Comme écrit, j'ai trouvé que la fonction rgbToHex retourne une chaîne avec des éléments après le point et elle nécessite que les valeurs r, g, b soient comprises entre 0 et 255.

Je suis sûr que cela peut sembler évident pour la plupart, mais il m'a fallu deux heures pour comprendre et à ce moment-là, la méthode d'origine avait monté en 7 lignes avant de réaliser que mon problème était ailleurs. Donc, pour gagner du temps et des tracas aux autres, voici mon code légèrement modifié qui vérifie les prérequis et supprime les bits étrangers de la chaîne.

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) Fonctions flèches composables SIMPLE ES6

Je ne peux pas résister à partager cela pour ceux qui peuvent écrire des js fonctionnels / compositionnels modernes en utilisant ES6. Voici quelques lignes simples que j'utilise dans un module de couleurs qui fait une interpolation des couleurs pour la visualisation des données.

Notez que cela ne gère pas du tout le canal alpha.

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

Essayer

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``


4

Si vous avez besoin de comparer deux valeurs de couleur (données en RVB, couleur de nom ou valeur hexadécimale) ou de convertir en HEX, utilisez un objet canvas 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

Pouvez-vous être après quelque chose comme ça?

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

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

affiche # 9687c8


1
> RGB2HTML> 2HTML> TO HTML (ಠ ʖ̯ ಠ) HEX n'est pas lié au HTML
Даниил Пронин

3

Pour 3 chiffres, la fonction hexToRgb de Tim Down peut être améliorée comme ci-dessous:

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

2

J'ai rencontré ce problème car je voulais accepter n'importe quelle valeur de couleur et pouvoir ajouter une opacité, j'ai donc créé ce plugin jQuery rapide qui utilise le canevas natif sur les navigateurs modernes. Semble fonctionner très bien.

Éditer

Il s'avère que je ne sais pas comment en faire un plugin jQuery approprié, donc je vais simplement le présenter comme une fonction régulière.

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

j'avais besoin d'une fonction qui accepte aussi des valeurs invalides

rgb (-255, 255, 255) rgb (510, 255, 255)

ceci est un spin off de @cwolves réponse

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}

Utilisez ces fonctions pour obtenir le résultat sans aucun problème. :)


2

Version abrégée qui accepte une chaîne:

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

Pour vérifier si ce n'est pas déjà hexadécimal

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

S'il est peu probable que cette réponse corresponde parfaitement à la question, elle peut néanmoins être très utile.

  1. Créez n'importe quel élément aléatoire

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

  1. Définissez un style valide à la couleur que vous souhaitez convertir

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

  1. Appelez à nouveau la propriété de style

> toRgb.style.color;

< "rgb(133, 225, 133)" Votre couleur a été convertie en RVB

Fonctionne pour: Hsl, Hex

Ne fonctionne pas pour: couleurs nommées


Cela peut être la réponse la plus pratique lorsque vous travaillez avec le navigateur. Vous voulez souvent simplement comparer la couleur d'un élément existant à une couleur connue exprimée en # -notation.
Panu Logic

2

Ma version de hex2rbg:

  1. Accepter un hex court comme #fff
  2. La compacité de l'algorithme est o (n), devrait être plus rapide que l'utilisation de l'expression régulière. par exemple String.replace, String.split, String.matchetc.
  3. Utilisez un espace constant.
  4. Soutenez RVB et RVBA.

vous devrez peut-être supprimer hex.trim () si vous utilisez IE8.

par exemple

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)

code:

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

Notez que h.join(',')c'est la même chose que h.join().

2

Cet extrait convertit hex en rgb et rgb en hex.

Voir la démo

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
}

Bon car il gère la sténographie, mais pourrait-il retourner une structure plutôt qu'une chaîne?
Dunc

1

Je travaille avec des données XAML qui ont un format hexadécimal #AARRGGBB (Alpha, rouge, vert, bleu). En utilisant les réponses ci-dessus, voici ma solution:

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

Pour convertir directement à partir de jQuery, vous pouvez essayer:

  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;

1

Étant donné que de nombreuses réponses ne répondent que partiellement à la question (de RVB à HEX ou inversement ), j'ai pensé publier également ma réponse partielle.

J'ai eu un problème similaire et je voulais faire quelque chose comme ceci: saisir n'importe quelle couleur CSS valide (HSL (a), RGB (a), HEX ou nom de couleur) et 1. pouvoir ajouter ou supprimer une valeur alpha, 2. retourne un objet rgb (a). J'ai écrit un plugin exactement à cet effet. Il peut être trouvé sur GitHub (il nécessite jQuery, mais si vous le souhaitez, vous pouvez le bifurquer et créer une version vanille). Voici une page de démonstration . Vous pouvez essayer par vous - même et voir la sortie générée à la volée.

Je vais copier-coller les options ici:

Le générateur RVB accepte un argument, la couleur, et propose trois options: asObject, addAlpha et removeAlpha. Lorsque les trois options sont omises, la couleur RVB sera renvoyée sous forme de chaîne.

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

Notez que par défaut, les composants alpha sont inclus. Si la valeur d'entrée contient une valeur alpha, la sortie sera au format RGBa.

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

Vous pouvez désactiver ce comportement en définissant removeAlpha sur true. Cela supprimera toute valeur alpha d'une couleur HSLa ou RGBa initiale.

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

Si, d'autre part, vous souhaitez ajouter un canal alpha, vous pouvez le faire en définissant addAlpha sur n'importe quelle valeur entre 0 et 1. Lorsque l'entrée est une couleur non transparente, la valeur alpha sera ajoutée. Si elle est transparente, la valeur fournie remplacera la composante alpha de l'entrée.

$.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)

Enfin, il est également possible de sortir la couleur RVB (a) en tant qu'objet. Il sera composé de r, g, b et éventuellement 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

La réponse la mieux notée de Tim Down fournit la meilleure solution que je puisse voir pour la conversion en RVB. J'aime mieux cette solution pour la conversion Hex car elle fournit la vérification des limites la plus succincte et le remplissage nul pour la conversion Hex.

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

L'utilisation du décalage vers la gauche '<<' et ou '|' les opérateurs en font également une solution amusante.


1

J'ai trouvé cela et parce que je pense que c'est assez simple et qu'il a des tests de validation et prend en charge les valeurs alpha (facultatif), cela conviendra au cas.

Il suffit de commenter la ligne d'expression régulière si vous savez ce que vous faites et c'est un tout petit peu plus rapide.

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(",")+")";
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.