Réponses:
Remarque : les deux versions de rgbToHex
s'attendent à des valeurs entières pour r
, g
et 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
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";
(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/…
rgbToHex
fonction. 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.
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.
return [r, g, b].join();
.
return [(bigint = parseInt(hex, 16)) >> 16 & 255, bigint >> 8 & 255, bigint & 255].join();
#
parseInt
hex = hex.replace(/[^0-9A-F]/gi, '');
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'
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]
padStart()
méthodeconst 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.
.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 ().
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;
}
rgb2hex
méthode. Pourquoi est - ce que nous ajoutons 0x1000000
à rgb
, et pourquoi nous devons appeler .slice(1)
à la fin?
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;
var decColor = (red < 16 ? '0' : '') + (red << 16) + (green << 8) + blue;
red < 16
vous devez préfixer a 0
au résultat final.
var hexColor = ((1 << 24) + (red << 16) + (green << 8) + blue).toString(16).substr(1);
function hex2rgb(hex) {
return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];
}
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}}
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(',')+')';
}
HEX fonctionnel à une ligne vers RGBA
Prend en charge les formulaires courts #fff
et 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)
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.length == 1 ? "0" + r : r)
et de même pour le vert et le bleu.
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
// 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));
@ 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);
}
(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));
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``
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);
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
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;
};
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;
};
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();
}
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. :)
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)"));
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"));
S'il est peu probable que cette réponse corresponde parfaitement à la question, elle peut néanmoins être très utile.
var toRgb = document.createElement('div');
toRg.style.color = "hsl(120, 60%, 70%)";
> 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
Ma version de hex2rbg:
String.replace, String.split, String.match
etc.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
}
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)";
}
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'))
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;
É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
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.
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(",")+")";
}
<<
est l'opérateur de décalage gauche au niveau du bit. En supposant qu'ilg
s'agit d'un entier non nul,g << 8
il se multiplie donc effectivementg
par 256, ajoutant des zéros à la fin de sa représentation hexadécimale. De mêmer << 16
ajoute 4 zéros. Ajout1 << 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 plan1
est enlevée à l' aideslice()
. Par exemple, sir
etg
étaient à la fois zéro etb
était 51,((r << 16) + (g << 8) + b).toString(16)
retournerait la chaîne "33"; ajoutez1 << 24
et vous obtenez "1000033". Ensuite, dépouillez-1
vous et vous y êtes.