RVB à hex et hex à RVB
Comment convertir des couleurs au format RVB au format Hex et vice versa?
Par exemple, convertissez '#0080C0' en (0, 128, 192).
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)); // #0033ffConversion de 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 indiqué dans réponse de @ casablanca et suggérée 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)); // #0033ffMise à jour du 3 décembre 2012
Voici une version de hexToRgb() qui analyse également un triplet hexadécimal abrégé 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";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: 3/28/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.
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;
}
Version ECMAScript 6 de 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 d'hex en RVB
Retourne un tableau [r, g, b]. Fonctionne également avec les triplets hexadécimaux abrégés 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 à hexagone en utilisant la méthode padStart()
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 par les navigateurs plus anciens. Si vous voulez que ce code fonctionne dans tous les environnements, vous devez utiliser Babel pour le compiler.
Je suppose que vous voulez dire une notation hexadécimale de style HTML, c'est-à-dire #rrggbb. Votre code est presque correct, sauf que l'ordre est inversé. CA devrait etre:
var decColor = red * 65536 + green * 256 + blue;
De plus, l'utilisation de bits décalés pourrait rendre la lecture un peu plus facile:
var decColor = (red << 16) + (green << 8) + blue;
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(',')+')';
}
function hex2rgb(hex) {
return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];
}
Ceci 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
HEX fonctionnel à une ligne à RGBA
Prend en charge les deux formulaires _#fff_ et _#ffffff_.
Prend en charge le canal alpha (opacité).
Peu importe que le hash soit 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)
_// En ignorant la notation hsl, les valeurs de couleur sont généralement exprimées sous la forme de noms, rgb, rgba ou hex-
// Hex peut être 3 valeurs ou 6.
// Rgb peut être un pourcentage ainsi que des valeurs entières.
// Le mieux est de rendre 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));
@ Tim, pour ajouter à votre réponse (c'est un peu gênant de l'intégrer à un commentaire).
Comme écrit, j'ai trouvé que la fonction rgbToHex renvoie une chaîne avec des éléments après le point et nécessite que les valeurs r, g, b soient comprises entre 0 et 255.
Je suis sûr que cela peut sembler évident à la plupart des gens, mais il m'a fallu deux heures pour comprendre et, à ce moment-là, la méthode originale avait grimpé à 7 lignes avant que je réalise que mon problème était ailleurs. Donc, dans le but de gagner du temps et des tracas, voici mon code légèrement modifié qui vérifie les pré-requis et élimine les bits superflus 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);
}
(2017) fonctions de flèches composables pour SIMPLE ES6
Je ne peux pas m'empêcher de partager cela avec ceux qui écrivent peut-être des js modernes fonctionnels/compositionnels utilisant ES6. Voici quelques lignes simples que j'utilise dans un module de couleur qui effectue une interpolation de couleur 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));
Si vous avez besoin de comparer deux valeurs de couleur (exprimées en RVB, couleur de nom ou valeur hexadécimale) ou de convertir en HEX, utilisez l’objet HTML5 de la toile.
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);
La 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
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 n ° 9687c8
Pour 3 chiffres, la fonction hexToRgb de Tim Down peut être améliorée comme suit:
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;
};
j'avais besoin d'une fonction qui accepte des valeurs non valides aussi, comme
rgb (-255, 255, 255) rgb (510, 255, 255)
ceci est une retombée de la réponse de @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();
}
Je suis tombé sur ce problème car je voulais accepter n'importe quelle valeur de couleur et pouvoir ajouter une opacité. J'ai donc créé ce plugin rapide jQuery qui utilise le canevas natif des navigateurs modernes. Semble fonctionner tout simplement génial.
Éditer
Il s'avère que je n'arrive pas à comprendre comment en faire un bon plugin jQuery, je vais donc le présenter comme une fonction normale.
//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;
};
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"));Ma version de hex2rbg:
- Accepte les hexs courts comme #fff
- La compacité de l'algorithme est o (n), devrait être plus rapide que l'utilisation de regex. par exemple
String.replace, String.split, String.matchetc .. - Utilisez un espace constant.
- Soutenez rgb et rgba.
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()+')';
}
}
Cet extrait convertit hex en rgb et rgb en hex.
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
}
Bien que cette réponse ne corresponde probablement pas parfaitement à la question, elle peut néanmoins être très utile.
- Créer n'importe quel élément aléatoire
var toRgb = document.createElement('div');
- Définissez n'importe quel style valide sur la couleur que vous souhaitez convertir
toRg.style.color = "hsl(120, 60%, 70%)";
- Appelez à nouveau la propriété de style
> toRgb.style.color;
< "rgb(133, 225, 133)" Votre couleur a été convertie en RGB
Fonctionne pour: Hsl, Hex
Ne fonctionne pas pour: couleurs nommées
Mon exemple =)
color: {
toHex: function(num){
var str = num.toString(16);
return (str.length<6?'#00'+str:'#'+str);
},
toNum: function(hex){
return parseInt(hex.replace('#',''), 16);
},
rgbToHex: function(color)
{
color = color.replace(/\s/g,"");
var aRGB = color.match(/^rgb\((\d{1,3}[%]?),(\d{1,3}[%]?),(\d{1,3}[%]?)\)$/i);
if(aRGB)
{
color = '';
for (var i=1; i<=3; i++) color += Math.round((aRGB[i][aRGB[i].length-1]=="%"?2.55:1)*parseInt(aRGB[i])).toString(16).replace(/^(.)$/,'0$1');
}
else color = color.replace(/^#?([\da-f])([\da-f])([\da-f])$/i, '$1$1$2$2$3$3');
return '#'+color;
}Je travaille avec des données XAML au format hexadécimal de #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)";
}
ne approche totalement différente pour convertir le code couleur hex en RVB sans regex
Il gère les formats #FFF et #FFFFFF à la base de la longueur de la chaîne. Il supprime # du début de chaîne et divise chaque caractère de chaîne, le convertit en base10 et l'ajoute à l'index correspondant à la base de sa position.
//Algorithm of hex to rgb conversion in ES5
function hex2rgbSimple(str){
str = str.replace('#', '');
return str.split('').reduce(function(result, char, index, array){
var j = parseInt(index * 3/array.length);
var number = parseInt(char, 16);
result[j] = (array.length == 3? number : result[j]) * 16 + number;
return result;
},[0,0,0]);
}
//Same code in ES6
hex2rgb = str => str.replace('#','').split('').reduce((r,c,i,{length: l},j,n)=>(j=parseInt(i*3/l),n=parseInt(c,16),r[j]=(l==3?n:r[j])*16+n,r),[0,0,0]);
//hex to RGBA conversion
hex2rgba = (str, a) => str.replace('#','').split('').reduce((r,c,i,{length: l},j,n)=>(j=parseInt(i*3/l),n=parseInt(c,16),r[j]=(l==3?n:r[j])*16+n,r),[0,0,0,a||1]);
//hex to standard RGB conversion
hex2rgbStandard = str => `RGB(${str.replace('#','').split('').reduce((r,c,i,{length: l},j,n)=>(j=parseInt(i*3/l),n=parseInt(c,16),r[j]=(l==3?n:r[j])*16+n,r),[0,0,0]).join(',')})`;
console.log(hex2rgb('#aebece'));
console.log(hex2rgbSimple('#aebece'));
console.log(hex2rgb('#aabbcc'));
console.log(hex2rgb('#abc'));
console.log(hex2rgba('#abc', 0.7));
console.log(hex2rgbStandard('#abc'));Basé sur @ MichałPerłakowski answer (EcmaScipt 6) et sa réponse basée sur réponse de Tim Down
J'ai écrit une version modifiée de la fonction de conversion de hexToRGB avec l'ajout de la vérification sûre si les composantes de couleur r/g/b sont comprises entre 0 et 255 et les fonctions peuvent également prendre les paramètres Number r/g/b ou String r/g/b paramètres et le voici:
function rgbToHex(r, g, b) {
r = Math.abs(r);
g = Math.abs(g);
b = Math.abs(b);
if ( r < 0 ) r = 0;
if ( g < 0 ) g = 0;
if ( b < 0 ) b = 0;
if ( r > 255 ) r = 255;
if ( g > 255 ) g = 255;
if ( b > 255 ) b = 255;
return '#' + [r, g, b].map(x => {
const hex = x.toString(16);
return hex.length === 1 ? '0' + hex : hex
}).join('');
}
Pour utiliser la fonction en toute sécurité, vous devez vérifier si la chaîne qui passe est une vraie couleur de chaîne rbg. Par exemple, une vérification très simple pourrait être:
if( rgbStr.substring(0,3) === 'rgb' ) {
let rgbColors = JSON.parse(rgbStr.replace('rgb(', '[').replace(')', ']'))
rgbStr = this.rgbToHex(rgbColors[0], rgbColors[1], rgbColors[2]);
.....
}
J'ai trouvé cela et, parce que je pense que c'est assez simple, que j'ai des tests de validation et qu'il prend en charge les valeurs alpha (facultatif), cela conviendra parfaitement.
Commentez la ligne de regex si vous savez ce que vous faites et que 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(",")+")";
}
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 problème. :)
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;
Au lieu de copier des extraits trouvés ici et là, je vous conseillerais d'utiliser une bibliothèque bien testée et maintenue: Colors.js (disponible pour node.js et le navigateur). C'est juste 7 KB (minifié, gzippé encore moins).
La réponse la mieux notée de Tim Down fournit la meilleure solution possible pour la conversion au format RVB. J'aime mieux cette solution pour la conversion Hex car elle fournit la vérification des limites la plus succincte et un remplissage nul pour la conversion en 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);
};
Utilisation du décalage à gauche '<<' et ou '|' les opérateurs en font une solution amusante aussi.
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'))
Considérant que beaucoup de réponses ne répondent que partiellement à la question (de RVB à HEX ou dans l’inverse), j’ai pensé poster ma réponse partielle sous la forme bien.
J'avais un problème similaire et je voulais faire quelque chose comme ceci: entrez 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 à cette fin. Il peut être trouvé sur GitHub (il nécessite jQuery, mais si vous le souhaitez, vous pouvez le créer et en faire une version Vanilla). Voici ne 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:
RGB Generator accepte un argument, la couleur, et fournit 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, par contre, vous souhaitez ajouter un canal alpha, vous pouvez définir addAlpha pour toute valeur comprise entre 0 et 1. Lorsque l'entrée est une couleur non transparente, la valeur alpha est ajoutée. S'il s'agit d'une valeur transparente, la valeur fournie écrasera le composant 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) sous forme d'objet. Il consistera en 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
Note latérale CSS de niveau 4: Généralement, si vous souhaitez pouvoir convertir un fichier Hex en RVB, c’est pour le canal alpha. peut bientôt le faire avec CSS4 en ajoutant un hex final. Exemple: #FF8800FF ou #f80f pour une orange totalement transparente.
Cela dit, le code ci-dessous répond aux deux questions dans une seule fonction, aller de et vers une autre. Cela accepte un canal alpha facultatif, prend en charge les formats chaîne et chaîne, analyse les chaînes hexagonales de 3,4,6,7 caractères et les chaînes complètes ou partielles de rgb/a (à l'exception des valeurs rgb/a définies en pourcentage) sans indicateur.
(Remplacez les quelques syntaxes ES6 si vous utilisez IE)
En ligne:
function rgbaHex(c,a,i){return(Array.isArray(c)||(typeof c==='string'&&/,/.test(c)))?((c=(Array.isArray(c)?c:c.replace(/[\sa-z\(\);]+/gi,'').split(',')).map(s=>parseInt(s).toString(16).replace(/^([a-z\d])$/i,'0$1'))),'#'+c[0]+c[1]+c[2]):(c=c.replace(/#/,''),c=c.length%6?c.replace(/(.)(.)(.)/,'$1$1$2$2$3$3'):c,a=parseFloat(a)||null,`rgb${a?'a':''}(${[(i=parseInt(c,16))>>16&255,i>>8&255,i&255,a].join().replace(/,$/,'')})`);}
Version lisible:
function rgbaHex(c, a) {
// RGBA to Hex
if (Array.isArray(c) || (typeof c === 'string' && /,/.test(c))) {
c = Array.isArray(c) ? c : c.replace(/[\sa-z\(\);]+/gi, '').split(',');
c = c.map(s => window.parseInt(s).toString(16).replace(/^([a-z\d])$/i, '0$1'));
return '#' + c[0] + c[1] + c[2];
}
// Hex to RGBA
else {
c = c.replace(/#/, '');
c = c.length % 6 ? c.replace(/(.)(.)(.)/, '$1$1$2$2$3$3') : c;
c = window.parseInt(c, 16);
a = window.parseFloat(a) || null;
const r = (c >> 16) & 255;
const g = (c >> 08) & 255;
const b = (c >> 00) & 255;
return `rgb${a ? 'a' : ''}(${[r, g, b, a].join().replace(/,$/,'')})`;
}
}
sages:
rgbaHex('#a8f')
rgbaHex('#aa88ff')
rgbaHex('#A8F')
rgbaHex('#AA88FF')
rgbaHex('#AA88FF', 0.5)
rgbaHex('#a8f', '0.85')
// etc.
rgbaHex('rgba(170,136,255,0.8);')
rgbaHex('rgba(170,136,255,0.8)')
rgbaHex('rgb(170,136,255)')
rgbaHex('rg170,136,255')
rgbaHex(' 170, 136, 255 ')
rgbaHex([170,136,255,0.8])
rgbaHex([170,136,255])
// etc.
Voici le code Javascript à modifier HEX Valeur de couleur pour le R ed, G reen, B lue individuellement.
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}
J'ai trouvé ça...
http://jsfiddle.net/Mottie/xcqpF/1/light/
function rgb2hex(rgb){
rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
return (rgb && rgb.length === 4) ? "#" +
("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
}
HTML utilise le système hexadécimal et la RVB utilise le système décimal. vous devez donc convertir le nombre hexadécimal en décimal et inversement.
Utilisation de la combinaison de fonctions anonymes et de Array.map pour un nettoyeur; look plus simple.
var write=function(str){document.body.innerHTML=JSON.stringify(str,null,' ');};
function hexToRgb(hex, asObj) {
return (function(res) {
return res == null ? null : (function(parts) {
return !asObj ? parts : { r : parts[0], g : parts[1], b : parts[2] }
}(res.slice(1,4).map(function(val) { return parseInt(val, 16); })));
}(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)));
}
function rgbToHex(r, g, b) {
return (function(values) {
return '#' + values.map(function(intVal) {
return (function(hexVal) {
return hexVal.length == 1 ? "0" + hexVal : hexVal;
}(intVal.toString(16)));
}).join('');
}(arguments.length === 1 ? Array.isArray(r) ? r : [r.r, r.g, r.b] : [r, g, b]))
}
// Prints: { r: 255, g: 127, b: 92 }
write(hexToRgb(rgbToHex(hexToRgb(rgbToHex(255, 127, 92), true)), true));body{font-family:monospace;white-space:pre}Une version propre de coffeescript de ce qui précède (merci @TimDown):
rgbToHex = (rgb) ->
a = rgb.match /\d+/g
rgb unless a.length is 3
"##{ ((1 << 24) + (parseInt(a[0]) << 16) + (parseInt(a[1]) << 8) + parseInt(a[2])).toString(16).slice(1) }"
On dirait que vous cherchez quelque chose comme ça:
function hexstr(number) {
var chars = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f");
var low = number & 0xf;
var high = (number >> 4) & 0xf;
return "" + chars[high] + chars[low];
}
function rgb2hex(r, g, b) {
return "#" + hexstr(r) + hexstr(g) + hexstr(b);
}