Hoe converteer ik kleuren in RGB-indeling naar hex-indeling en vice versa?
Converteer bijvoorbeeld '#0080C0'naar (0, 128, 192).
Antwoord 1, autoriteit 100%
Opmerking: beide versies van rgbToHexverwachten gehele waarden voor r, gen b, dus je moet je eigen afronding doen als je niet-gehele waarden hebt.
Het volgende is van toepassing op de RGB-naar-hex-conversie en voegt eventueel vereiste nul-opvulling toe:
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)); // #0033ffAntwoord 2, autoriteit 11%
Een alternatieve versie van 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;
}
Bewerken: 28-3-2017
Hier is een andere benadering die nog sneller lijkt te zijn
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];
}
Bewerken: 11-8-2017
De nieuwe aanpak hierboven na meer testen is niet sneller :(. Hoewel het een leuke plaats is.
Antwoord 3, Autoriteit 7%
Ecmascript 6-versie van Tim Down’s Answer
RGB omzetten naar HEX
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'Antwoord 4, Autoriteit 3%
Hier is mijn versie:
function rgb_to_hex(red, green, blue) {
const rgb = (red << 16) | (green << 8) | (blue << 0);
return '#' + (0x1000000 + rgb).toString(16).slice(1);
}
function hex_to_rgb(hex) {
const normal = hex.match(/^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i);
if (normal) return normal.slice(1).map(e => parseInt(e, 16));
const shorthand = hex.match(/^#([0-9a-f])([0-9a-f])([0-9a-f])$/i);
if (shorthand) return shorthand.slice(1).map(e => 0x11 * parseInt(e, 16));
return null;
}
Antwoord 5, Autoriteit 2%
function hex2rgb(hex) {
return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];
}
Antwoord 6, Autoriteit 2%
Ik neem aan dat u bedoelt HTML-stijl hexadecimale notatie, d.w.z. #rrggbb. Je code is bijna correct, behalve dat je de bestelling hebt omgekeerd. Het zou moeten zijn:
var decColor = red * 65536 + green * 256 + blue;
Ook het gebruik van bit-shifts kan het een beetje gemakkelijker lezen:
var decColor = (red << 16) + (green << 8) + blue;
Antwoord 7, Autoriteit 2%
One-Line Functional Hex naar RGBA
Ondersteunt zowel korte #fffen lange #ffffffformulieren.
Ondersteunt alfakanaal (dekking).
Maakt het niet uit als hash is opgegeven of niet, werkt in beide gevallen.
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(isFinite(opacity) ? opacity : 1).join(',') + ')';
}
Voorbeelden:
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)
hexToRGBA('#ffffff', 0) -> rgba(255,255,255,0)
hexToRGBA('#ffffff', .5) -> rgba(255,255,255,0.5)
hexToRGBA('#ffffff', 1) -> rgba(255,255,255,1)
Antwoord 8
Deze code accepteert #fff en #ffffff-varianten en dekking.
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(',')+')';
}
Antwoord 9
Probeer (bonus)
let hex2rgb= c=> `rgb(${c.match(/\w\w/g).map(x=>+`0x${x}`)})`
let rgb2hex=c=>'#'+c.match(/\d+/g).map(x=>(+x).toString(16).padStart(2,0)).join``
Antwoord 10
Bitsgewijze oplossing is normaal gesproken raar. Maar in dit geval denk ik dat dat eleganter is 😄
function hexToRGB(hexColor){
return {
red: (hexColor >> 16) & 0xFF,
green: (hexColor >> 8) & 0xFF,
blue: hexColor & 0xFF,
}
}
Gebruik:
const {red, green, blue } = hexToRGB(0xFF00FF)
console.log(red) // 255
console.log(green) // 0
console.log(blue) // 255
Antwoord 11
Dit kan worden gebruikt voor het verkrijgen van kleuren uit berekende stijleigenschappen:
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
Ref: https://github.com/k-gun /so/blob/master/so_util.js
Antwoord 12
(2017) EENVOUDIGE ES6 configureerbare pijlfuncties
Ik kan het niet laten om dit te delen voor degenen die misschien wat moderne functionele/compositionele js schrijven met ES6. Hier zijn enkele gelikte oneliners die ik gebruik in een kleurenmodule die kleurinterpolatie uitvoert voor gegevensvisualisatie.
Merk op dat dit het alfakanaal helemaal niet behandelt.
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));
BTW, als je van deze stijl/syntaxis houdt, heb ik een volledige kleurenmodule (modern-kleur) geschreven die je kunt pakken vanaf npm. Ik heb het zo gemaakt dat ik prop-getters voor conversie kon gebruiken en vrijwel alles kon ontleden (Color.parse(anything)). Een kijkje waard als je net als ik veel met kleur omgaat.
Antwoord 13
// Als u de hsl-notatie negeert, worden kleurwaarden gewoonlijk uitgedrukt als namen, rgb, rgba of hex-
// Hex kan 3 waarden zijn of 6.
// RGB kan zowel percentages als gehele waarden zijn.
// Best om rekening te houden voor al deze formaten, tenminste.
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));
Antwoord 14
@ Tim, om toe te voegen aan je antwoord (het is een beetje onhandig om dit in een opmerking te plaatsen).
Zoals geschreven, vond ik dat de rgbToHex-functie een string retourneert met elementen na het punt en het vereist dat de r, g, b-waarden binnen het bereik 0-255 vallen.
Ik weet zeker dat dit voor de meesten vanzelfsprekend lijkt, maar het kostte me twee uur om erachter te komen en tegen die tijd was de oorspronkelijke methode gestegen tot 7 regels voordat ik me realiseerde dat mijn probleem ergens anders lag. Dus in het belang om anderen tijd te besparen & gedoe, hier is mijn enigszins gewijzigde code die de vereisten controleert en de overbodige stukjes van de string afsnijdt.
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);
}
Antwoord 15
Als u twee kleurwaarden wilt vergelijken (gegeven als RGB, naamkleur of hexwaarde) of wilt converteren naar HEX, gebruik dan HTML5 canvasobject.
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);
Antwoord 16
Misschien ben je op zoek naar zoiets?
function RGB2HTML(red, green, blue)
{
return '#' + red.toString(16) +
green.toString(16) +
blue.toString(16);
}
alert(RGB2HTML(150, 135, 200));
geeft #9687c8 weer
Antwoord 17
Verkorte versie die een tekenreeks accepteert:
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)"));Antwoord 18
In plaats van hier en daar gevonden fragmenten te kopiëren en plakken, raad ik aan om een goed geteste en onderhouden bibliotheek te gebruiken: Colors.js(beschikbaar voor node.js en browser). Het is slechts 7 KB (verkleind, nog minder gegzipt).
Antwoord 19
Voor 3 cijfers kan de hexToRgb-functie van Tim Down worden verbeterd zoals hieronder:
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;
};
Antwoord 20
ik had een functie nodig die ook ongeldige waarden accepteert, zoals
rgb(-255, 255, 255)
rgb(510, 255, 255)
dit is een spin-off van het antwoord van @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();
}
Antwoord 21
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}
Gebruik deze Functie om het resultaat zonder enig probleem te bereiken. 🙂
Antwoord 22
Hoewel dit antwoord waarschijnlijk niet perfect bij de vraag past, kan het toch erg nuttig zijn.
- Maak een willekeurig element
var toRgb = document.createElement('div');
- Stel een geldige stijl in op de kleur die u wilt converteren
toRg.style.color = "hsl(120, 60%, 70%)";
- Noem de stijleigenschap opnieuw
> toRgb.style.color;
< "rgb(133, 225, 133)"Je kleur is omgezet naar Rgb
Werkt voor: Hsl, Hex
Werkt niet voor: Benoemde kleuren
Antwoord 23
Mijn versie van hex2rbg:
- Accepteer korte hex zoals #fff
- Compacity van algoritmen is o(n), zou sneller moeten zijn dan het gebruik van regex. bijv.
String.replace, String.split, String.matchenz.. - Gebruik constante spatie.
- Ondersteun rgb en rgba.
mogelijk moet u hex.trim() verwijderen als u IE8 gebruikt.
bijv.
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()+')';
}
}
Antwoord 24
Dit fragment converteert hex naar rgb en rgb naar 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
}
Antwoord 25
Een eenvoudig antwoord voor rgb naar hex
function rgbtohex(r,g,b){
return "#" + (Math.round(r) * 65536 + Math.round(g) * 256 + Math.round(b)).toString(16));
}
Antwoord 26
Ik kwam dit probleem tegen omdat ik elke kleurreekswaarde wilde ontleden en een dekking wilde specificeren, dus schreef ik deze functie die gebruikmaakt van de canvas-API.
var toRGBA = function () {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = 1;
canvas.height = 1;
return function (color) {
context.fillStyle = color;
context.fillRect(0, 0, 1, 1);
var data = context.getImageData(0, 0, 1, 1).data;
return {
r: data[0],
g: data[1],
b: data[2],
a: data[3]
};
};
}();
Opmerking over context.fillStyle:
Als het ontleden van de waarde tot een mislukking leidt, moet deze worden genegeerd en moet het kenmerk zijn eerdere waarde behouden.
Hier is een Stack Snippet-demo die u kunt gebruiken om invoer te testen:
var toRGBA = function () {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = 1;
canvas.height = 1;
return function (color) {
context.fillStyle = color;
context.fillRect(0, 0, 1, 1);
var data = context.getImageData(0, 0, 1, 1).data;
return {
r: data[0],
g: data[1],
b: data[2],
a: data[3]
};
};
}();
var inputs = document.getElementsByTagName('input');
function setColor() {
inputs[1].value = JSON.stringify(toRGBA(inputs[0].value));
document.body.style.backgroundColor = inputs[0].value;
}
inputs[0].addEventListener('input', setColor);
setColor();input {
width: 200px;
margin: 0.5rem;
}<input value="cyan" />
<input readonly="readonly" />Antwoord 27
Versie 2021
Je kunt gewoon rgb-hex& hex-rgbomdat het in de strijd is getest & heeft meerdere opties die niet beschikbaar zijn in andere oplossingen.
Ik was onlangs bezig met het bouwen van een Color Picker & deze 2 pakketten kwamen goed van pas.
Gebruik
rgb-hex
import rgbHex from 'rgb-hex';
rgbHex(65, 131, 196);
//=> '4183c4'
rgbHex('rgb(40, 42, 54)');
//=> '282a36'
rgbHex(65, 131, 196, 0.2);
//=> '4183c433'
rgbHex(40, 42, 54, '75%');
//=> '282a36bf'
rgbHex('rgba(40, 42, 54, 75%)');
//=> '282a36bf'
hex-rgb
import hexRgb from 'hex-rgb';
hexRgb('4183c4');
//=> {red: 65, green: 131, blue: 196, alpha: 1}
hexRgb('#4183c4');
//=> {red: 65, green: 131, blue: 196, alpha: 1}
hexRgb('#fff');
//=> {red: 255, green: 255, blue: 255, alpha: 1}
hexRgb('#22222299');
//=> {red: 34, green: 34, blue: 34, alpha: 0.6}
hexRgb('#0006');
//=> {red: 0, green: 0, blue: 0, alpha: 0.4}
hexRgb('#cd2222cc');
//=> {red: 205, green: 34, blue: 34, alpha: 0.8}
hexRgb('#cd2222cc', {format: 'array'});
//=> [205, 34, 34, 0.8]
hexRgb('#cd2222cc', {format: 'css'});
//=> 'rgb(205 34 34 / 80%)'
hexRgb('#000', {format: 'css'});
//=> 'rgb(0 0 0)'
hexRgb('#22222299', {alpha: 1});
//=> {red: 34, green: 34, blue: 34, alpha: 1}
hexRgb('#fff', {alpha: 0.5});
//=> {red: 255, green: 255, blue: 255, alpha: 0.5}
Antwoord 28
Ik werk met XAML-gegevens met de hexadecimale indeling #AARRGGBB (alfa, rood, groen, blauw). Met behulp van de bovenstaande antwoorden, hier is mijn oplossing:
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)";
}
Antwoord 29
Om rechtstreeks vanuit jQuery te converteren, kunt u het volgende proberen:
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'))
ANTWOORD 30
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;