RGB a esadecimale e esadecimale a RGB


555

Come convertire i colori in formato RGB in formato esadecimale e viceversa?

Ad esempio, converti '#0080C0'in (0, 128, 192).

Risposte:


1236

Nota : sia la versione di rgbToHexsi aspettano da valori interi per r, ge b, quindi avrai bisogno di fare la propria arrotondamento se si dispone di valori non interi.

Quanto segue farà alla conversione da RGB a esadecimale e aggiungerà l'eventuale riempimento zero richiesto:

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

Convertire in altro modo:

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

Infine, una versione alternativa di rgbToHex(), come discusso nella risposta di @ casablanca e suggerita nei commenti di @cwolves:

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

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

Aggiornamento 3 dicembre 2012

Ecco una versione hexToRgb()che analizza anche una tripletta esadecimale come "# 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: <<è l'operatore di spostamento a sinistra bit a bit. Supponendo che gsia un numero intero diverso da zero, g << 8quindi si moltiplica efficacemente gper 256, aggiungendo a zero alla fine della sua rappresentazione esadecimale. Allo stesso modo r << 16aggiunge 4 zeri. L'aggiunta 1 << 24(1000000 in esadecimale) garantisce che la rappresentazione esadecimale sia riempita a sinistra con tutti gli zeri richiesti una volta 1rimosso il comando utilizzando slice(). Ad esempio, se re gfossero entrambi zero e bfosse 51, ((r << 16) + (g << 8) + b).toString(16)restituirebbe la stringa "33"; aggiungi 1 << 24e otterrai "1000033". Quindi spoglia il 1e sei lì.
Tim Down,

Il bit shifting (ad es. (r << 16)) Darebbe lo stesso risultato su computer sia big che little endian? Modifica: non lo fa. Ecco perché: stackoverflow.com/questions/1041554/...
WoodenKitty

@Gothdo: mi dispiace ripristinare la modifica, ma spesso non è possibile o pratico utilizzare ES6. La versione precedente funzionerà ovunque.
Tim Down

3
il tuo rgbToHex non funziona. ottieni il risultato divertente: # f55b2f00
TheCrazyProfessor

1
Per quanto riguarda l'ultima rgbToHexfunzione. Uno vorrà o tipizzare i valori rgb passati come numeri interi o modificare leggermente la funzione rgbToHex. Esempio: jsfiddle.net/cydqo6wj Current: return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); Modified: return "#" + ((1 << 24) + ((+r) << 16) + ((+g) << 8) + (+b)).toString(16).slice(1); Nella versione modificata, forzo semplicemente i valori rgb per essere valutati a numeri interi prima della modifica in 16 / hex.
user2977468

148

Una versione alternativa di 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;
}

Modifica: 28/03/2017 Ecco un altro approccio sembra essere ancora più veloce

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

Modifica: 8/11/2017 Il nuovo approccio sopra dopo ulteriori test non è più veloce :(. Sebbene sia un modo alternativo divertente.


57
Una linea di perfezione: return [r, g, b].join();.
Pavlo,

5
O per la soluzione a una sola linea interamente incapsulante:return [(bigint = parseInt(hex, 16)) >> 16 & 255, bigint >> 8 & 255, bigint & 255].join();
Plutone

12
Lo sto usando con un tweak - rimuovi i caratteri non esadecimali (come un lead #) prima di parseInt:hex = hex.replace(/[^0-9A-F]/gi, '');
joews

5
Non essere così veloce da usare la versione abbreviata. JSPerf mostra che quello in questa risposta è il più veloce: jsperf.com/2014-09-16-hex-to-rgb
Olav Kokovkin,

1
Fai attenzione, il suo output non è affidabile. Ha fatto apparire un colore vicino al nero rosa scuro. Meglio usare la funzione dalla risposta migliore.
Maciej Krawczyk,

64

Versione ECMAScript 6 della risposta di Tim Down

Conversione di RGB in esadecimale

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'

Conversione esadecimale in RGB

Restituisce un array [r, g, b]. Funziona anche con terzine esagonali stenografiche come "#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: RGB in esadecimale usando il padStart()metodo

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

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

Si noti che questa risposta utilizza le funzionalità ECMAScript più recenti, che non sono supportate nei browser meno recenti. Se vuoi che questo codice funzioni in tutti gli ambienti, dovresti usare Babel per compilare il tuo codice.


hexToRgb () si adatta facilmente per gestire la notazione RGBA esadecimale a 4 e 8 cifre: .replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(m, r, g, b) => '#' + r + r + g + g + b + b)diventa: .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)Ma c'è un modo per far funzionare il regexp con A di RGBA come quarto valore esadecimale opzionale? Ciò completerebbe assolutamente la funzionalità, facendo funzionare una regexp con RGB esadecimale e RGBA. Altrimenti sono due regexps, uno con 3 valori, l'altro con 4. Devi dividere il 4o valore per 255 per ottenere il 4o arg per rgba ().
Jamess,

44

Ecco la mia versione:

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

bello, ma la domanda era hex2rgb. Riesci a farlo in questo modo sarebbe bello :)
K. Kilian Lindberg

4
Anche se non va in entrambi i modi, devo dare un voto in tal senso perché per qualche ragione le altre soluzioni da rgb a hex in questa domanda non funzionavano per me.
Oca,

La domanda era prima di rgb2hex. Comunque ho aggiunto il mio hex2rgb.
FelipeC,

Un po 'confuso riguardo al rgb2hexmetodo. Perché aggiungiamo 0x1000000a rgb, e perché abbiamo bisogno di chiamare .slice(1)finalmente?
hackjutsu,

Poiché blu sarebbe #FF, aggiungiamo 0x1000000, quindi è # 10000FF, quindi rimuoviamo il primo "1".
FelipeC,

26

Suppongo che intendi la notazione esadecimale in stile HTML, vale a dire #rrggbb. Il tuo codice è quasi corretto, tranne per il fatto che l'ordine è stato invertito. Dovrebbe essere:

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

Inoltre, l'uso dei bit-shift potrebbe rendere un po 'più semplice la lettura:

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

Ottimo, tranne per il fatto che è necessario lasciare zero-pad a 6 caratteri se rosso <16:var decColor = (red < 16 ? '0' : '') + (red << 16) + (green << 8) + blue;
Mark Kahn

Sembra funzionare tranne per questo: (0,128,192) probabilmente a causa dello 0?
Sindar,

@cwolves: hai ragione, mi sono perso. Ma dovrebbe essere aggiunto alla stringa finale, non all'intero.
Casablanca,

@Sindar: vedi il commento di @cwolves, se red < 16devi aggiungere un prefisso 0al risultato finale.
Casablanca,

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

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

2
Adoro le risposte semplici
Bjorn Behrendt,

Stregoneria! dovresti aggiungere una spiegazione a questo fantastico one-liner.
James Harrington,

Bello! Ecco la stessa cosa, tranne minified e restituisce un oggetto con proprietà 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

Questo codice accetta le varianti e l'opacità di #fff e #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 a RGBA funzionale a una riga

Supporta entrambe #fffle #ffffffforme corte e lunghe .
Supporta il canale alfa (opacità).
Non importa se l'hash specificato o meno, funziona in entrambi i casi.

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

esempi:

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
Prova a scrivere un codice leggibile dall'uomo, non una riga. Non c'è guadagno se minimizzi il tuo codice prima della produzione comunque.
Roko C. Buljan,

11

Questo potrebbe essere usato per ottenere i colori dalle proprietà di stile calcolate:

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

Rif: https://github.com/k-gun/so/blob/master/so_util.js


Grazie per questo. Ma c'è un piccolo errore: dovrebbe tornare (r.length == 1 ? "0" + r : r)e allo stesso modo per verde e blu.
tifone

7

La soluzione bit a bit normalmente è strana. Ma in questo caso immagino sia più elegante 😄

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

Uso:

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

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

6

// Ignorando la notazione hsl, i valori di colore sono comunemente espressi come nomi, rgb, rgba o hex-

// Hex può essere 3 valori o 6.

// Rgb può essere percentuali e valori interi.

// Meglio tenere conto di tutti questi formati, almeno.

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

Ho votato per questa essendo la versione più completa che abbia mai visto. Sarebbe bello se potesse estrarre anche i colori da rgba.
Michael Scheper,

6

@ Tim, da aggiungere alla tua risposta (è un po 'imbarazzante inserirla in un commento).

Come scritto, ho scoperto che la funzione rgbToHex restituisce una stringa con elementi dopo il punto e richiede che i valori r, g, b rientrino nell'intervallo 0-255.

Sono sicuro che questo può sembrare ovvio per la maggior parte, ma ci sono volute due ore per capire e da allora il metodo originale era arrivato a 7 righe prima di rendermi conto che il mio problema era altrove. Quindi, nell'interesse di risparmiare tempo e fatica agli altri, ecco il mio codice leggermente modificato che controlla i pre-requisiti e taglia i bit estranei della stringa.

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) SIMPLE ES6 funzioni freccia componibili

Non posso resistere alla condivisione di questo per coloro che potrebbero scrivere dei moderni js funzionali / compositivi usando ES6. Ecco alcune semplici righe che sto usando in un modulo colore che esegue l'interpolazione del colore per la visualizzazione dei dati.

Si noti che questo non gestisce affatto il canale alfa.

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

Provare

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

Se è necessario confrontare due valori di colore (dati come RGB, nome colore o valore esadecimale) o convertire in esadecimale, utilizzare l'oggetto 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

Potresti cercare qualcosa del genere?

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

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

visualizza # 9687c8


1
> RGB2HTML> 2HTML> TO HTML (ಠ ʖ̯ ಠ) HEX non è correlato a HTML
Даниил Пронин

3

Per 3 cifre la funzione hexToRgb di Tim Down può essere migliorata come di seguito:

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

Mi sono imbattuto in questo problema poiché volevo accettare qualsiasi valore di colore ed essere in grado di aggiungere un'opacità, quindi ho realizzato questo rapido plug-in jQuery che utilizza la tela nativa sui browser moderni. Sembra funzionare alla grande.

modificare

Risulta che non riesco a capire come renderlo un plugin jQuery corretto, quindi lo presenterò come una normale funzione.

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

avevo bisogno di una funzione che accetta anche valori non validi

RGB (-255, 255, 255) RGB (510, 255, 255)

questo è uno spin-off della risposta di @cwolves

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}

Utilizzare queste funzioni per ottenere il risultato senza problemi. :)


2

Versione abbreviata che accetta una stringa:

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

Per verificare se non è già esadecimale

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

È improbabile che questa risposta si adatti perfettamente alla domanda, ma può essere molto utile.

  1. Crea qualsiasi elemento casuale

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

  1. Impostare uno stile valido sul colore che si desidera convertire

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

  1. Chiamare di nuovo la proprietà dello stile

> toRgb.style.color;

< "rgb(133, 225, 133)" Il tuo colore è stato convertito in Rgb

Funziona per: Hsl, Hex

Non funziona per: colori con nome


Questa potrebbe essere la risposta più pratica quando si lavora con il browser. Spesso vuoi semplicemente confrontare il colore di un elemento esistente con un colore noto espresso in # -notation.
Panu Logic,

2

La mia versione di hex2rbg:

  1. Accetta esagoni brevi come #fff
  2. La compacità dell'algoritmo è o (n), dovrebbe essere più veloce dell'uso di regex. ad es String.replace, String.split, String.match. ecc.
  3. Usa spazio costante.
  4. Supporta rgb e rgba.

potrebbe essere necessario rimuovere hex.trim () se si utilizza IE8.

per esempio

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)

codice:

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

Nota che h.join(',')è la stessa cosa di h.join().

2

Questo frammento converte hex in rgb e rgb in hex.

Visualizza la demo

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
}

Buono in quanto gestisce la stenografia, ma potrebbe restituire una struttura piuttosto che una stringa?
Dunc,

1

Sto lavorando con i dati XAML che hanno un formato esadecimale di #AARRGGBB (Alpha, Red, Green, Blue). Utilizzando le risposte sopra, ecco la mia soluzione:

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

Per convertire direttamente da jQuery puoi provare:

  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

Considerando che molte risposte rispondono solo parzialmente alla domanda (da RGB a HEX o viceversa), ho pensato di pubblicare anche la mia risposta parziale.

Ho avuto un problema simile e volevo fare qualcosa del genere: inserire qualsiasi colore CSS valido (HSL (a), RGB (a), HEX o nome del colore) e 1. essere in grado di aggiungere o rimuovere un valore alfa, 2. restituisce un oggetto rgb (a). Ho scritto un plugin esattamente per questo scopo. Può essere trovato su GitHub (richiede jQuery, ma se vuoi puoi forkarlo e creare una versione vaniglia). Ecco una pagina dimostrativa . Puoi provare tu stesso e vedere l'output generato al volo.

Copia e incolla le opzioni qui:

RGB Generator accetta un argomento, il colore e offre tre opzioni: asObject, addAlpha e removeAlpha. Quando le tre opzioni vengono omesse, il colore RGB verrà restituito come una stringa.

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

Si noti che per impostazione predefinita sono inclusi i componenti alfa. Se il valore di input contiene un valore alfa, l'output sarà in formato RGBa.

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

È possibile disabilitare questo comportamento impostando removeAlpha su true. Ciò rimuoverà qualsiasi valore alfa da un colore HSLa o RGBa iniziale.

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

Se, d'altra parte, si desidera aggiungere un canale alfa, è possibile farlo impostando addAlpha su qualsiasi valore compreso tra 0 e 1. Quando l'input è un colore non trasparente, verrà aggiunto il valore alfa. Se è trasparente, il valore fornito sovrascriverà il componente alfa dell'input.

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

Infine è anche possibile produrre il colore RGB (a) come oggetto. Consisterà in r, g, be facoltativamente 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 risposta più votata da Tim Down offre la migliore soluzione che posso vedere per la conversione in RGB. Mi piace questa soluzione per la conversione esadecimale meglio perché fornisce il controllo dei limiti più conciso e lo zero padding per la conversione in esadecimale.

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'uso dello spostamento a sinistra '<<' e o '|' gli operatori rendono anche questa una soluzione divertente.


1

Ho trovato questo e poiché penso che sia piuttosto semplice e che abbia test di validazione e supporti valori alfa (opzionale), questo si adatterà al caso.

Commenta la riga regex se sai cosa stai facendo ed è un po 'più veloce.

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(",")+")";
}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.