RGB to hex and hex to RGB

Questions : RGB to hex and hex to RGB

How to convert colors in RGB format to hex format and vice versa?

For example, convert '#0080C0' to (0, 128, 192).

Total Answers: 56 Answers 56


Popular Answers:

  1. Note: both versions of rgbToHex expect integer values for r, g and b, so you’ll need to do your own rounding if you have non-integer values.

    The following will do to the RGB to hex conversion and add any required 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

    Converting the other way:

    function hexToRgb(hex) { var result = /^#?([a-fd]{2})([a-fd]{2})([a-fd]{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";

    Finally, an alternative version of rgbToHex(), as discussed in @casablanca’s answer and suggested in the comments by @cwolves:

    function rgbToHex(r, g, b) { return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); } alert(rgbToHex(0, 51, 255)); // #0033ff

    Update 3 December 2012

    Here’s a version of hexToRgb() that also parses a shorthand hex triplet such as “#03F”:

    function hexToRgb(hex) { // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") var shorthandRegex = /^#?([a-fd])([a-fd])([a-fd])$/i; hex = hex.replace(shorthandRegex, function(m, r, g, b) { return r + r + g + g + b + b; }); var result = /^#?([a-fd]{2})([a-fd]{2})([a-fd]{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";

  2. An alternative version of 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 Here is another approach that seems to be even faster

    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 The new approach above after more testing is not faster :(. Though it is a fun alternate way.

  3. ECMAScript 6 version of Tim Down’s answer

    Converting RGB to 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'

    Converting hex to RGB

    Returns an array [r, g, b]. Works also with shorthand hex triplets such as "#03F".

    const hexToRgb = hex => hex.replace(/^#?([a-fd])([a-fd])([a-fd])$/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 to hex using padStart() method

    const rgbToHex = (r, g, b) => '#' + [r, g, b] .map(x => x.toString(16).padStart(2, '0')).join('') console.log(rgbToHex(0, 51, 255)); // '#0033ff'

    Note that this answer uses latest ECMAScript features, which are not supported in older browsers. If you want this code to work in all environments, you should use Babel to compile your code.

  4. Here’s my version:

    function rgbToHex(red, green, blue) { const rgb = (red << 16) | (green << 8) | (blue << 0); return '#' + (0x1000000 + rgb).toString(16).slice(1); } function hexToRgb(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; } 
  5. function hex2rgb(hex) { return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0]; } 
  6. I’m assuming you mean HTML-style hexadecimal notation, i.e. #rrggbb. Your code is almost correct, except you’ve got the order reversed. It should be:

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

    Also, using bit-shifts might make it a bit easier to read:

    var decColor = (red << 16) + (green << 8) + blue; 
  7. One-line functional HEX to RGBA

    Supports both short #fff and long #ffffff forms.
    Supports alpha channel (opacity).
    Does not care if hash specified or not, works in both cases.

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

    examples:

    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) 
  8. Try (bonus)

    let hex2rgb= c=> `rgb(${c.match(/ww/g).map(x=>+`0x${x}`)})` let rgb2hex=c=>'#'+c.match(/d+/g).map(x=>(+x).toString(16).padStart(2,0)).join`` 

  9. This code accept #fff and #ffffff variants and opacity.

    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(',')+')'; } 
  10. Bitwise solution normally is weird. But in this case I guess that is more elegant

    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 
  11. (2017) SIMPLE ES6 composable arrow functions

    I can’t resist sharing this for those who may be writing some modern functional/compositional js using ES6. Here are some slick one-liners I am using in a color module that does color interpolation for data visualization.

    Note that this does not handle the alpha channel at all.

    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, If you like this style/syntax, I wrote a full color module (modern-color) you can grab from npm. I made it so I could use prop getters for conversion and parse virtually anything (Color.parse(anything)). Worth a look if you deal with color a lot like I do.

  12. This could be used for getting colors from computed style propeties:

    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

  13. Hex to RGB

    const hex2rgb = (hex) => { const r = parseInt(hex.slice(1, 3), 16) const g = parseInt(hex.slice(3, 5), 16) const b = parseInt(hex.slice(5, 7), 16) // return {r, g, b} // return an object return [ r, g, b ] } console.log(hex2rgb("#0080C0"))

    RGB to Hex

    const rgb2hex = (r, g, b) => { var rgb = (r << 16) | (g << 8) | b // return '#' + rgb.toString(16) // #80c0 // return '#' + (0x1000000 + rgb).toString(16).slice(1) // #0080c0 // or use [padStart](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart) return '#' + rgb.toString(16).padStart(6, 0) } console.log(rgb2hex(0, 128, 192))

    Also if someone need online tool, I have built Hex to RGB and vice versa.

  14. May you be after something like this?

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

    displays #9687c8

  15. // Ignoring hsl notation, color values are commonly expressed as names, rgb, rgba or hex-

    // Hex can be 3 values or 6.

    // Rgb can be percentages as well as integer values.

    // Best to account for all of these formats, at least.

    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)); 
  16. @ Tim, to add to your answer (its a little awkward fitting this into a comment).

    As written, I found the rgbToHex function returns a string with elements after the point and it requires that the r, g, b values fall within the range 0-255.

    I’m sure this may seem obvious to most, but it took two hours for me to figure out and by then the original method had ballooned to 7 lines before I realised my problem was elsewhere. So in the interests of saving others time & hassle, here’s my slightly amended code that checks the pre-requisites and trims off the extraneous bits of the string.

    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); } 
  17. 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);
  18. 2021 version

    You can simply use rgb-hex & hex-rgb as it is battle-tested & has multiple options that are not available in other solutions.

    I was recently building a Color Picker & these 2 packages came in handy.

    Usage

    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} 
  19. 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(); }
  20. 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} 

    Use these Function to achive the result without any issue. 🙂

  21. Instead of copy’n’pasting snippets found here and there, I’d recommend to use a well tested and maintained library: Colors.js (available for node.js and browser). It’s just 7 KB (minified, gzipped even less).

  22. I came across this problem since I wanted to parse any color string value and be able to specify an opacity, so I wrote this function that uses the 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] }; }; }(); 

    Note about context.fillStyle:

    If parsing the value results in failure, then it must be ignored, and the attribute must retain its previous value.

    Here’s a Stack Snippet demo you can use to test inputs:

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

  23. A simple answer to convert RGB to hex. Here values of color channels are clamped between 0 and 255.

    function RGBToHex(r = 0, g = 0, b = 0) { // clamp and convert to hex let hr = Math.max(0, Math.min(255, Math.round(r))).toString(16); let hg = Math.max(0, Math.min(255, Math.round(g))).toString(16); let hb = Math.max(0, Math.min(255, Math.round(b))).toString(16); return "#" + (hr.length<2?"0":"") + hr + (hg.length<2?"0":"") + hg + (hb.length<2?"0":"") + hb; } 
  24. While this answer is unlikely to fit the question perfectly it may be very useful none the less.

    1. Create any random element

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

    1. Set any valid style to the color you want to convert

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

    1. Call the style property again

    > toRgb.style.color;

    < "rgb(133, 225, 133)" Your color has been converted to Rgb

    Works for: Hsl, Hex

    Does not work for: Named colors

  25. My version of hex2rbg:

    1. Accept short hex like #fff
    2. Algorithm compacity is o(n), should faster than using regex. e.g String.replace, String.split, String.match etc..
    3. Use constant space.
    4. Support rgb and rgba.

    you may need remove hex.trim() if you are using IE8.

    e.g.

    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()+')'; } } 
  26. This snippet converts hex to rgb and rgb to hex.

    View 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 } 
  27. 2022: If you often manipulate colors and doesn’t mind using a package,

    Use tinycolor2. It’s a fast library (Around 400kb) for color manipulation and conversion in JavaScript.

    It accepts various color string format. Like:

    tinycolor("#000"); // Hex3 tinycolor("#f0f0f6"); // Hex6 tinycolor("#f0f0f688"); // Hex8 tinycolor("f0f0f6"); // Hex withouth the number sign '#' tinycolor("rgb (255, 0, 0)"); // RGB tinycolor("rgba (255, 0, 0, .5)"); // RGBA tinycolor({ r: 255, g: 0, b: 0 }); // RGB object tinycolor("hsl(0, 100%, 50%)"); // HSL tinycolor("hsla(0, 100%, 50%, .5)"); // HSLA tinycolor("red"); // Named 

    RGB to HEX

    var color = tinycolor('rgb(0, 128, 192)'); color.toHexString(); //#0080C0 

    HEX to RGB

    var color = tinycolor('#0080C0'); color.toRgbString(); // rgb(0, 128, 192) 

    Visit documentation for more demo.

  28. Looks like you’re looking for something like this:

    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); } 
  29. I’m working with XAML data that has a hex format of #AARRGGBB (Alpha, Red, Green, Blue). Using the answers above, here’s my 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)"; } 

    http://jsfiddle.net/kvLyscs3/

  30. For convert directly from jQuery you can try:

     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')) 
  31. 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; 
  32. I found this and because I think it is pretty straight forward and has validation tests and supports alpha values (optional), this will fit the case.

    Just comment out the regex line if you know what you’re doing and it’s a tiny bit faster.

    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(",")+")"; } 
  33. My example =)

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

  34. 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(''); }
  35. A total different approach to convert hex color code to RGB without regex

    It handles both #FFF and #FFFFFF format on the base of length of string. It removes # from beginning of string and divides each character of string and converts it to base10 and add it to respective index on the base of it’s 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'));

  36. When you’re working in 3D environment (webGL, ThreeJS) you sometimes need to create 3 values for the different faces of meshes, the basic one (main color), a lighter one and a darker one :

    material.color.set( 0x660000, 0xff0000, 0xff6666 ); // red cube 

    We can create these 3 values from the main RBG color : 255,0,0

    function rgbToHex(rgb) { var hex = Number(rgb).toString(16); if (hex.length < 2) { hex = "0" + hex; } return hex; }; function convertToHex(r,g,b) { var fact = 100; // contrast  var code = '0x'; // main color var r_hexa = rgbToHex(r); var g_hexa = rgbToHex(g); var b_hexa = rgbToHex(b); // lighter var r_light = rgbToHex(Math.floor(r+((1-(r/255))*fact))); var g_light = rgbToHex(Math.floor(g+((1-(g/255))*fact))); var b_light = rgbToHex(Math.floor(b+((1-(b/255))*fact))); // darker var r_dark = rgbToHex(Math.floor(r-((r/255)*(fact*1.5)))); // increase contrast var g_dark = rgbToHex(Math.floor(g-((g/255)*(fact*1.5)))); var b_dark = rgbToHex(Math.floor(b-((b/255)*(fact*1.5)))); var hexa = code+r_hexa+g_hexa+b_hexa; var light = code+r_light+g_light+b_light; var dark = code+r_dark+g_dark+b_dark; console.log('HEXs -> '+dark+" + "+hexa+" + "+light) var colors = [dark, hexa, light]; return colors; } 

    In your ThreeJS code simply write:

    var material = new THREE.MeshLambertMaterial(); var c = convertToHex(255,0,0); // red cube needed material.color.set( Number(c[0]), Number(c[1]), Number(c[2]) ); 

    Results:

    // dark normal light convertToHex(255,255,255) HEXs -> 0x696969 + 0xffffff + 0xffffff convertToHex(255,0,0) HEXs -> 0x690000 + 0xff0000 + 0xff6464 convertToHex(255,127,0) HEXs -> 0x690000 + 0xff0000 + 0xff6464 convertToHex(100,100,100) HEXs -> 0x292929 + 0x646464 + 0xa0a0a0 convertToHex(10,10,10) HEXs -> 0x040404 + 0x0a0a0a + 0x6a6a6a 

    the new red cube :-)

  37. Immutable and human understandable version without any bitwise magic:

    1. Loop over array
    2. Normalize value if value < 0 or value > 255 using Math.min() and Math.max()
    3. Convert number to hex notation using String.toString()
    4. Append leading zero and trim value to two characters
    5. join mapped values to string
    function rgbToHex(r, g, b) { return [r, g, b] .map(color => { const normalizedColor = Math.max(0, Math.min(255, color)); const hexColor = normalizedColor.toString(16); return `0${hexColor}`.slice(-2); }) .join(""); } 

    Yes, it won’t be as performant as bitwise operators but way more readable and immutable so it will not modify any input

  38. HTML converer 🙂

    <!DOCTYPE html> <html> <body> <p id="res"></p> <script> function hexToRgb(hex) { var res = /^#?([a-fd]{2})([a-fd]{2})([a-fd]{2})$/i.exec(hex); return "(" + parseInt(res[1], 16) + "," + parseInt(res[2], 16) + "," + parseInt(res[3], 16) + ")"; }; document.getElementById("res").innerHTML = hexToRgb('#0080C0'); </script> </body> </html> 
  39. The top rated answer by Tim Down provides the best solution I can see for conversion to RGB. I like this solution for Hex conversion better though because it provides the most succinct bounds checking and zero padding for conversion to Hex.

    function RGBtoHex (red, green, blue) { red = Math.max(0, Math.min(~~red, 255)); green = Math.max(0, Math.min(~~green, 255)); blue = Math.max(0, Math.min(~~blue, 255)); return '#' + ('00000' + (red << 16 | green << 8 | blue).toString(16)).slice(-6); }; 

    The use of left shift ‘<<‘ and or ‘|’ operators make this a fun solution too.

  40. To convert from HEX to RGB where RGB are float values within the range of 0 and 1:

    #FFAA22 → {r: 0.5, g: 0, b:1}

    I adapted @Tim Down’s answer:

     function convertRange(value,oldMin,oldMax,newMin,newMax) { return (Math.round(((((value - oldMin) * (newMax - newMin)) / (oldMax - oldMin)) + newMin) * 10000)/10000) } function hexToRgbFloat(hex) { var result = /^#?([a-fd]{2})([a-fd]{2})([a-fd]{2})$/i.exec(hex); return result ? { r: convertRange(parseInt(result[1],16), 0, 255, 0, 1), g: convertRange(parseInt(result[2],16), 0, 255, 0, 1), b: convertRange(parseInt(result[3],16), 0, 255, 0, 1) } : null; } console.log(hexToRgbFloat("#FFAA22")) // {r: 1, g: 0.6667, b: 0.1333} 
  41. I realise there are lots of answers to this but if you’re like me and you know your HEX is always going to be 6 characters with or without the # prefix then this is probably the simplest method if you want to do some quick inline stuff. It does not care if it starts with or without a hash.

    var hex = "#ffffff"; var rgb = [ parseInt(hex.substr(-6,2),16), parseInt(hex.substr(-4,2),16), parseInt(hex.substr(-2),16) ]; 
  42. HEX to RGB (ES6) + tests [2022]

    convertHexToRgb.ts:

    /** * RGB color regexp */ export const RGB_REG_EXP = /rgb((d{1,3}), (d{1,3}), (d{1,3}))/; /** * HEX color regexp */ export const HEX_REG_EXP = /^#?(([da-f]){3}|([da-f]){6})$/i; /** * Converts HEX to RGB. * * Color must be only HEX string and must be: * - 7-characters starts with "#" symbol ('#ffffff') * - or 6-characters without "#" symbol ('ffffff') * - or 4-characters starts with "#" symbol ('#fff') * - or 3-characters without "#" symbol ('fff') * * @function { color: string => string } convertHexToRgb * @return { string } returns RGB color string or empty string */ export const convertHexToRgb = (color: string): string => { const errMessage = ` Something went wrong while working with colors... Make sure the colors provided to the "PieDonutChart" meet the following requirements: Color must be only HEX string and must be 7-characters starts with "#" symbol ('#ffffff') or 6-characters without "#" symbol ('ffffff') or 4-characters starts with "#" symbol ('#fff') or 3-characters without "#" symbol ('fff') - - - - - - - - - Error in: "convertHexToRgb" function Received value: ${color} `; if ( !color || typeof color !== 'string' || color.length < 3 || color.length > 7 ) { console.error(errMessage); return ''; } const replacer = (...args: string[]) => { const [ _, r, g, b, ] = args; return '' + r + r + g + g + b + b; }; const rgbHexArr = color ?.replace(HEX_REG_EXP, replacer) .match(/.{2}/g) ?.map(x => parseInt(x, 16)); /** * "HEX_REG_EXP.test" is here to create more strong tests */ if (rgbHexArr && Array.isArray(rgbHexArr) && HEX_REG_EXP.test(color)) { return `rgb(${rgbHexArr[0]}, ${rgbHexArr[1]}, ${rgbHexArr[2]})`; } console.error(errMessage); return ''; }; 

    I’m using Jest for tests

    color.spec.ts

    describe('function "convertHexToRgb"', () => { it('returns a valid RGB with the provided 3-digit HEX color: [color = 'fff']', () => { expect.assertions(2); const { consoleErrorMocked } = mockConsole(); const rgb = convertHexToRgb('fff'); expect(RGB_REG_EXP.test(rgb)).toBeTruthy(); expect(consoleErrorMocked).not.toHaveBeenCalled(); }); it('returns a valid RGB with the provided 3-digit HEX color with hash symbol: [color = '#fff']', () => { expect.assertions(2); const { consoleErrorMocked } = mockConsole(); const rgb = convertHexToRgb('#fff'); expect(RGB_REG_EXP.test(rgb)).toBeTruthy(); expect(consoleErrorMocked).not.toHaveBeenCalled(); }); it('returns a valid RGB with the provided 6-digit HEX color: [color = 'ffffff']', () => { expect.assertions(2); const { consoleErrorMocked } = mockConsole(); const rgb = convertHexToRgb('ffffff'); expect(RGB_REG_EXP.test(rgb)).toBeTruthy(); expect(consoleErrorMocked).not.toHaveBeenCalled(); }); it('returns a valid RGB with the provided 6-digit HEX color with the hash symbol: [color = '#ffffff']', () => { expect.assertions(2); const { consoleErrorMocked } = mockConsole(); const rgb = convertHexToRgb(TEST_COLOR); expect(RGB_REG_EXP.test(rgb)).toBeTruthy(); expect(consoleErrorMocked).not.toHaveBeenCalled(); }); it('returns an empty string when the provided value is not a string: [color = 1234]', () => { expect.assertions(2); const { consoleErrorMocked } = mockConsole(); // @ts-ignore const rgb = convertHexToRgb(1234); expect(rgb).toBe(''); expect(consoleErrorMocked).toHaveBeenCalledTimes(1); }); it('returns an empty string when the provided color is too short: [color = 'FF']', () => { expect.assertions(2); const { consoleErrorMocked } = mockConsole(); const rgb = convertHexToRgb('FF'); expect(rgb).toBe(''); expect(consoleErrorMocked).toHaveBeenCalledTimes(1); }); it('returns an empty string when the provided color is too long: [color = '#fffffff']', () => { expect.assertions(2); const { consoleErrorMocked } = mockConsole(); const rgb = convertHexToRgb('#fffffff'); expect(rgb).toBe(''); expect(consoleErrorMocked).toHaveBeenCalledTimes(1); }); it('returns an empty string when the provided value is looks like HEX color string but has invalid symbols: [color = '#fffffp']', () => { expect.assertions(2); const { consoleErrorMocked } = mockConsole(); const rgb = convertHexToRgb('#fffffp'); expect(rgb).toBe(''); expect(consoleErrorMocked).toHaveBeenCalledTimes(1); }); it('returns an empty string when the provided value is invalid: [color = '*']', () => { expect.assertions(2); const { consoleErrorMocked } = mockConsole(); const rgb = convertHexToRgb('*'); expect(rgb).toBe(''); expect(consoleErrorMocked).toHaveBeenCalledTimes(1); }); it('returns an empty string when the provided value is undefined: [color = undefined]', () => { expect.assertions(2); const { consoleErrorMocked } = mockConsole(); // @ts-ignore const rgb = convertHexToRgb(undefined); expect(rgb).toBe(''); expect(consoleErrorMocked).toHaveBeenCalledTimes(1); }); }); 

    tests result:

    function "convertHexToRgb" √ returns a valid RGB with the provided 3-digit HEX color: [color = 'fff'] √ returns a valid RGB with the provided 3-digit HEX color with hash symbol: [color = '#fff'] √ returns a valid RGB with the provided 6-digit HEX color: [color = 'ffffff'] √ returns a valid RGB with the provided 6-digit HEX color with the hash symbol: [color = '#ffffff'] √ returns an empty string when the provided value is not a string: [color = 1234] √ returns an empty string when the provided color is too short: [color = 'FF'] √ returns an empty string when the provided color is too long: [color = '#fffffff'] √ returns an empty string when the provided value is looks like HEX color string but has invalid symbols: [color = '#fffffp'] √ returns an empty string when the provided value is invalid: [color = '*'] √ returns an empty string when the provided value is undefined: [color = undefined] 

    And mockConsole:

    export const mockConsole = () => { const consoleError = jest.spyOn(console, 'error').mockImplementationOnce(() => undefined); return { consoleError }; }; 
  43. RGB to Hex

    Using padStart()

    You can use this oneliner using padStart():

    const rgb = (r, g, b) => { return `#${[r, g, b].map((x) => x.toString(16).padStart(2, "0")).join("")}`; }

    P.S. it isn’t supported on legacy browsers, check its compatibility here.

    Without padStart()

    If you don’t want to use padStart(), you can implement this function instead:

    const rgb = (r, g, b) => { return `#${[r, g, b] .map((n) => n.toString(16).length === 1 ? "0" + n.toString(16) : n.toString(16) ) .join("")}`; };

    Parameters validation

    If you’re not sure who is going to use your function, you have to use the parameters validations, that the values are valid (between 0 and 255), to do so, add these conditions before each return:

    if (r > 255) r = 255; else if (r < 0) r = 0; if (g > 255) g = 255; else if (g < 0) g = 0; if (b > 255) b = 255; else if (b < 0) b = 0;

    So the two above examples become:

    const rgb = (r, g, b) => { if (r > 255) r = 255; else if (r < 0) r = 0; if (g > 255) g = 255; else if (g < 0) g = 0; if (b > 255) b = 255; else if (b < 0) b = 0; return `#${[r, g, b].map((x) => x.toString(16).padStart(2, "0")).join("")}`; }; const rgb2 = (r, g, b) => { if (r > 255) r = 255; else if (r < 0) r = 0; if (g > 255) g = 255; else if (g < 0) g = 0; if (b > 255) b = 255; else if (b < 0) b = 0; return `#${[r, g, b] .map((n) => n.toString(16).length === 1 ? "0" + n.toString(16) : n.toString(16) ) .join("")}`; };


    Hex to RGB

    For this, we are going to use some RegEx:

    const hex = (h) => { return h .replace( /^#?([a-fd])([a-fd])([a-fd])$/i, (_, r, g, b) => "#" + r + r + g + g + b + b ) .substring(1) .match(/.{2}/g) .map((x) => parseInt(x, 16)); };

  44. 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) }"
  45. Using combining anonymous functions and Array.map for a cleaner; more streamlined look.

    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-fd]{2})([a-fd]{2})([a-fd]{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}

  46. I found this…
    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) : ''; } 
  47. 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}

Tasg: javascript, colors

Answer Link
jidam
  • Unable to run NoraUI mvn verify goal
  • Unable to run my app on emulator in VS Code
  • Unable to run multiple instances of libVLC(MobileVLCKit) in IOS via flutter framework
  • Unable to run make on griddb source on ubuntu 20.04 (building from source)
  • Unable to run latexindent macOS Monterey 12.0.1
  • Unable to run kotlinc-native command
  • Unable to run JUnit Test… Java.lang.ExceptionInInitializerError (Android Studio)
  • Unable to run java with -Xmx > 966m
  • Unable to run ionic cap run android from wsl2 inorder to start android emulator
  • Unable to run Intel HAXM installer: Cannot start process, the working directory does not exist
  • fs
  • Unable to run Google Analytics sample code
  • unable to run flutter run after upgarding to flutter 2.8.0 from 2.5.3
  • Unable to run Django with PostgreSQL in Docker
  • Unable to Run Container Using testcontainers
  • Unable to run ClojureScript Hello World program, Error building classpath. Error reading edn.
  • unable to run client command for apache karaf 4.3.3 through remote server
  • Unable to run c program 2nd time using eclipse
  • unable to run c++ in visual studio code on m1 chipset
  • Unable to run Android Instrumented Tests
  • Unable to run adb, check your Android SDK installation and ANDROID_SDK_ROOT environment variable: …AndroidSdkplatform-toolsadb.exe
  • Unable to run a singlespecific .spec.ts file through angular cli using ng test –include option
  • Unable to run a Mango query
  • Unable to return response back to view in laravel from package
  • Unable to return object reference in std::optional
  • Unable to return NULL in a function that expects an integer return type
  • Unable to return correct change in JavaScript Cash Register
  • Unable to retrieve version information from Elasticsearch nodes. Request timed out
  • Unable to retrieve values from Axios Response data
  • Unable to retrieve dotenv JWT secret Error: secretOrPrivateKey must have a value
  • Unable to resolve your shell environment
  • Unable to resolve token for FCM while implementing Push notification for Xamarin
  • Unable to resolve the request yii
  • Unable to resolve service for type Swashbuckle.AspNetCore.Swagger.ISwaggerProvider
  • Unable to resolve service for type Microsoft.EntityFrameworkCore.Diagnostics.IDiagnosticsLogger