Cum de a converti culori în RGB format la format Hex și vice-versa?
De exemplu, pentru a converti '#0080C0' sa
(0, 128, 192)`.
Următoarele va face să RGB hex de conversie și de a adăuga orice este necesar zero padding:
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
Conversia la alt mod:
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";
În cele din urmă, o versiune alternativă a rgbToHex()
, cum s-a discutat în @casablanca's a răspunde și a sugerat în comentariile 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
Aici's o versiune de hexToRgb()` care analizează, de asemenea, o prescurtare hex triplet, cum ar fi "#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";
O versiune alternativă a 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
Aici este o altă abordare asta pare a fi chiar mai repede
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 Noua abordare de mai sus, după mai mult de testare nu este mai repede :(. Deși este o distractiv mod alternativ.
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'
Returnează o matrice [r, g, b]
. Funcționează, de asemenea, cu prescurtare hex tripleti cum ar fi"#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()
metodaconst rgbToHex = (r, g, b) => '#' + [r, g, b]
.map(x => x.toString(16).padStart(2, '0')).join('')
console.log(rgbToHex(0, 51, 255)); // '#0033ff'
Rețineți că acest răspuns foloseste cele mai recente ECMAScript caracteristici, care nu sunt acceptate în browsere mai vechi. Dacă doriți acest cod pentru a lucra în toate mediile, ar trebui să utilizați Babel pentru a compila codul.
Aici's versiunea mea:
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;
}
Am'm presupunând că vrei să spui HTML-stil de notație hexazecimal, și anume #rrggbb
. Codul este aproape corectă, în afară de tine'am primit ordinul inversat. Ar trebui să fie:
var decColor = red * 65536 + green * 256 + blue;
De asemenea, folosind pic-ture s-ar putea face un pic mai ușor de citit:
var decColor = (red << 16) + (green << 8) + blue;
Acest cod accepta #fff și #ffffff variante și opacitate.
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(',')+')';
}
Acest lucru ar putea fi utilizat pentru obtinerea de culori de calculat stil cu proprietăți:
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
O-linie funcțională HEX pentru RGBA
Sprijină atât pe termen scurt #fff
și lung #ffffff
forme.
Acceptă canal alfa (opacitate).
Nu-i pasă dacă hash specificat sau nu, funcționează în ambele cazuri.
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(',') + ')';
}
exemple:
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)
Bitwise soluție, în mod normal, este ciudat. Dar în acest caz cred că este mult mai elegant 😄
js funcția hexToRGB(hexColor){ întoarcere { red: (hexColor >> 16) & 0xFF, verde: (hexColor >> 8) & 0xFF, albastru: hexColor & 0xFF, } }
Utilizare:
``js const {rosu, verde, albastru } = hexToRGB(0xFF00FF)
console.log(roșu) // 255 console.log(verde) // 0 console.log(albastru) // 255 ``
// Ignorarea hsl notație, valori de culoare sunt de obicei exprimate ca nume, rgb, rgba sau hex-
// Hex poate fi de 3 valori sau 6.
// Rgb poate fi procentele precum și valori întregi.
// Cel mai bun de a ține cont de toate aceste formate, cel puțin.
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, pentru a adăuga la raspunsul tau (este un pic ciudat care se potrivește într-un comentariu).
Ca de scris, am găsit rgbToHex funcția returnează un șir cu elemente de după punct și se cere ca r, g, b, valorile se încadrează în intervalul 0-255.
Am'sunt sigur că acest lucru poate părea evident pentru cele mai multe, dar acesta a luat două ore să-mi dau seama și de atunci metoda originală s-a umflat la 7 linii înainte de a-am dat seama că problema mea era în altă parte. Atât în interesul de a-i salva pe alții de timp & hassle, aici's my ușor modificat codul care verifică pre-rechizite și ornamente de pe străine bucăți de sfoară.
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);
}
Dacă aveți nevoie de a compara două valori de culoare (dat fiind ca RGB, nume de culoare sau valoare hex) sau de a converti la HEX folosi HTML5 canvas obiect.
`` var canvas = document.createElement("panza"); var ctx = acest lucru.panza.getContext('2d');
ctx.fillStyle = "rgb(trece,unele,valoare)"; var temp = ctx.fillStyle; ctx.fillStyle = "someColor";
alert(ctx.fillStyle == temp); ``
(2017) SIMPLU ES6 composable săgeată funcții
Pot't rezista schimbul asta pentru cei care ar putea fi scris unele moderne, funcționale/compoziție js folosind ES6. Aici sunt unele slick-garnituri sunt utilizați într-o culoare modulul care are culoare de interpolare pentru vizualizarea datelor.
Rețineți că acest lucru nu se ocupa canalul alfa, la toate.
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));
Timp de 3 cifre hexToRgb funcție de Tim Jos pot fi îmbunătățite ca mai jos:
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;
};
Am dat peste această problemă, deoarece am vrut să accepte orice valoare de culoare și de a fi capabil de a adăuga o opacitate, așa că am făcut repede plugin jQuery care utilizează nativ panza pe browserele moderne. Pare să funcționeze de minune.
Edit
Se pare că pot't dau seama cum de a face o buna jQuery plugin, așa că am'll prezintă doar ca o funcție regulate.
//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;
};
Acest fragment convertește hex rgb rgb și hex.
[Vezi demo](
)`` funcția hexToRgb(str) { if ( /^#([0-9a-f]{3}|[0-9a-f]{6})$/ig.test(str) ) { var hex = str.substr(1); hex = hex.lungimea == 3 ? hex.replace(/(.)/g, '$1$1') : hex; var rgb = parseInt(hex, 16); reveni 'rgb(' + [(rgb >> 16) & 255, (rgb >> 8) & 255, rgb & 255].alăturați-vă(',') + ')'; }
return false; }
funcția rgbToHex(roșu, verde, albastru) { var afară = '#';
pentru (var i = 0; i < 3; ++i) { var n = typeof argumente[i] == 'număr' ? argumente[i] : parseInt(argumente[i]);
if (isNaN(n) || n < 0 || n > 255) { return false; }
afară += (n < 16 ? '0' : '') + n.toString(16); } profit } ``
Versiunea mea de hex2rbg:
ați putea avea nevoie de a elimina hex.trim() dacă utilizați IE8.
de exemplu
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)
cod:
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()+')';
}
}
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}
Utilizați aceste Funcții pentru a atinge rezultatul, fără nici o problemă. :)