How to convert RGBA to Hex color code using javascript

Question

I tried to convert rgba to hex color code, but unable to covert opacity value remaining color I able to convert,

Below is my code

var colorcode = "rgba(0, 0, 0, 0.74)";

var finalCode = rgba2hex(colorcode)

function rgba2hex(orig) {
    var a, isPercent,
    rgb = orig.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i),
    alpha = (rgb && rgb[4] || "").trim(),
    hex = rgb ?
    (rgb[1] | 1 << 8).toString(16).slice(1) +
    (rgb[2] | 1 << 8).toString(16).slice(1) +
    (rgb[3] | 1 << 8).toString(16).slice(1) : orig;
  
    if (alpha !== "") { a = alpha; }
    else { a = 01; }
    hex = hex + a;
  
    return hex;
}

console.log(finalCode)

Here I need alpha value also convert to hex code.

Please suggest how to convert

Output

Expect:000000bd

The color2color library on github might be what you are looking for: github.com/metaloha/color2color — user2417483, Commented Apr 23, 2018 at 5:56
See stackoverflow.com/a/19366389/6782 which will give you an RGBA array that's trivially converted to hexadecimal if required. — Alnitak, Commented Apr 23, 2018 at 5:56

Kaiido · Accepted Answer · 2018-04-23 06:25:10Z

Since the alpha channel in your rgba() notation is expressed as a 0 ~ 1 value, you need to multiply it by 255 before trying to convert it to its HEX form:

var colorcode = "rgba(0, 0, 0, 0.74)";

var finalCode = rgba2hex(colorcode)

function rgba2hex(orig) {
  var a, isPercent,
    rgb = orig.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i),
    alpha = (rgb && rgb[4] || "").trim(),
    hex = rgb ?
    (rgb[1] | 1 << 8).toString(16).slice(1) +
    (rgb[2] | 1 << 8).toString(16).slice(1) +
    (rgb[3] | 1 << 8).toString(16).slice(1) : orig;

  if (alpha !== "") {
    a = alpha;
  } else {
    a = 01;
  }
  // multiply before convert to HEX
  a = ((a * 255) | 1 << 8).toString(16).slice(1)
  hex = hex + a;

  return hex;
}

function test(colorcode) {
  console.log(colorcode, rgba2hex(colorcode));
}

test("rgba(0, 0, 0, 0.74)");
test("rgba(0, 0, 0, 1)");
test("rgba(0, 0, 0, 0)");
test("rgba(0, 255, 0, 0.5)");

But note that this is just one of the rgba notation, and that it will e.g fail with percent based notation.
Note also that all browsers do not support RGBA HEX notation, so you might prefer an other method to convert your values depending on what you want to do with it.

Lars Flieger · Accepted Answer · 2023-07-19 06:42:42Z

Try this:

✓ Works with alpha rgba(255, 255, 255, 0) => #ffffff00
✓ Works with single digits rgba(0, 0, 0, 0) => #00000000
✓ Works with RGB as well rgb(124, 255, 3) => #7cff03
✓ You can slice alpha channel away rgba(255, 255, 255, 0) => #ffffff

function RGBAToHexA(rgba, forceRemoveAlpha = false) {
  return "#" + rgba.replace(/^rgba?\(|\s+|\)$/g, '') // Get's rgba / rgb string values
    .split(',') // splits them at ","
    .filter((string, index) => !forceRemoveAlpha || index !== 3)
    .map(string => parseFloat(string)) // Converts them to numbers
    .map((number, index) => index === 3 ? Math.round(number * 255) : number) // Converts alpha to 255 number
    .map(number => number.toString(16)) // Converts numbers to hex
    .map(string => string.length === 1 ? "0" + string : string) // Adds 0 when length of one number is 1
    .join("") // Puts the array to togehter to a string
}

//
// Only tests below! Click "Run code snippet" to see results
//

// RGBA with Alpha value
expect(RGBAToHexA("rgba(255, 255, 255, 0)"), "#ffffff00")
expect(RGBAToHexA("rgba(0, 0, 0, 0)"), "#00000000")
expect(RGBAToHexA("rgba(124, 255, 3, 0.5)"), "#7cff0380")
expect(RGBAToHexA("rgba(124, 255, 3, 1)"), "#7cff03ff")

// RGB value 
expect(RGBAToHexA("rgba(255, 255, 255)"), "#ffffff")
expect(RGBAToHexA("rgba(0, 0, 0)"), "#000000")
expect(RGBAToHexA("rgba(124, 255, 3)"), "#7cff03")

// RGBA without Alpha value
expect(RGBAToHexA("rgba(255, 255, 255, 0)", true), "#ffffff")
expect(RGBAToHexA("rgba(0, 0, 0, 0)", true), "#000000")
expect(RGBAToHexA("rgba(124, 255, 3, 0.5)", true), "#7cff03")
expect(RGBAToHexA("rgba(124, 255, 3, 1)", true), "#7cff03")

function expect(result, expectation) {
  console.log(result === expectation ? "✓" : "X", result, expectation)
}

Code is built based on:

https://css-tricks.com/converting-color-spaces-in-javascript/

Евгений Заикин · Accepted Answer · 2021-07-01 09:02:20Z

5

My solution. Hope be useful.

const rgbaToHex = (color: string): string => {
  if (/^rgb/.test(color)) {
    const rgba = color.replace(/^rgba?\(|\s+|\)$/g, '').split(',');

    // rgb to hex
    // eslint-disable-next-line no-bitwise
    let hex = `#${((1 << 24) + (parseInt(rgba[0], 10) << 16) + (parseInt(rgba[1], 10) << 8) + parseInt(rgba[2], 10))
      .toString(16)
      .slice(1)}`;

    // added alpha param if exists
    if (rgba[4]) {
      const alpha = Math.round(0o1 * 255);
      const hexAlpha = (alpha + 0x10000).toString(16).substr(-2).toUpperCase();
      hex += hexAlpha;
    }

    return hex;
  }
  return color;
};

answered Jul 1, 2021 at 9:02

Евгений Заикин

511 silver badge2 bronze badges

1

Welcome to Stack Overflow. Code without any explanation are rarely helpful. Stack Overflow is about learning, not providing snippets to blindly copy and paste. Please edit your question and explain how it answers the specific question being asked. See How to Answer.
– law_81
Commented Jul 1, 2021 at 14:01

Add a comment |

dhana · Accepted Answer · 2018-04-23 06:56:56Z

Great @kaiido, i tried this way

function rgba2hex(orig) {
      var a, isPercent,
        rgb = orig.replace(/\s/g, '').match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i),
        alpha = (rgb && rgb[4] || "").trim(),
        hex = rgb ? 
        (rgb[1] | 1 << 8).toString(16).slice(1) +
        (rgb[2] | 1 << 8).toString(16).slice(1) +
        (rgb[3] | 1 << 8).toString(16).slice(1) : orig;
          if (alpha !== "") {
            a = alpha;
          } else {
            a = 01;
          }

          a = Math.round(a * 100) / 100;
            var alpha = Math.round(a * 255);
            var hexAlpha = (alpha + 0x10000).toString(16).substr(-2).toUpperCase();
            hex = hex + hexAlpha;

      return hex;
}

Harry12345 · Accepted Answer · 2020-09-15 13:24:32Z

2

If you have the rgba color as a string, you can do something like this.

const color = 'rgba(249,6,6,1,0)';
const rgba = color.replace(/^rgba?\(|\s+|\)$/g, '').split(',');

const hex = `#${((1 << 24) + (parseInt(rgba[0]) << 16) + (parseInt(rgba[1]) << 8) + parseInt(rgba[2])).toString(16).slice(1)}`;
console.log(hex); // #f90606

answered Sep 15, 2020 at 13:24

Harry12345

1,1506 gold badges20 silver badges48 bronze badges

3

this doesn't cater the alpha channel
– Jay-R Joseph Gabunada
Commented Jun 18, 2021 at 21:58

Add a comment |

Nicholas · Accepted Answer · 2021-03-13 12:44:45Z

2

Just create a function to be more effective! Code is same as above.

    var color;

    function HexCode(color){
        const rgba = color.replace(/^rgba?\(|\s+|\)$/g, '').split(',');
        const hex = `#${((1 << 24) + (parseInt(rgba[0]) << 16) + (parseInt(rgba[1]) << 8) + parseInt(rgba[2])).toString(16).slice(1)}`;
        
        return hex;
    }

    console.log(HexCode('rgba(0,255,255,0.1)'))

edited Mar 13, 2021 at 12:44

Nicholas

2,8381 gold badge15 silver badges21 bronze badges

answered Mar 4, 2021 at 13:40

Sanmeet Singh

212 bronze badges

4

Just tested your function, it doesn't cater for the alpha channel.
– Martins
Commented Mar 11, 2021 at 5:18

Add a comment |

H K · Accepted Answer · 2021-07-01 16:04:53Z

2

Here is a simplified option.

function rgbToHex(rgb) {
  return '#' + rgb.match(/[0-9|.]+/g).map((x,i) => i === 3 ? parseInt(255 * parseFloat(x)).toString(16) : parseInt(x).toString(16)).join('')
}

Works for rgb and rgba.

answered Jul 1, 2021 at 16:04

H K

1,2028 silver badges11 bronze badges

2

This is almost there, but it doesn't pad single digits with 0 Its a simple matter of check string length is one and prepending with 0 in that case.
– Pure Function
Commented Dec 1, 2021 at 1:51

Add a comment |

Kamil Kiełczewski · Accepted Answer · 2024-03-08 17:13:30Z

Try

let hex2rgba= c=> `rgb${c.length>7?'a':''}(${c.match(/\w\w/g).map((x,i)=> (+`0x${x}`)/(i<3?1:255))})`;
let rgba2hex= c=> '#'+c.match(/[\d\.]+/g).map((x,i)=> Math.round((+x)*(i<3?1:255)).toString(16).padStart(2,0)).join``;

it supports rgb and rgba format (rgb only here)

let hex2rgba= c=> `rgb${c.length>7?'a':''}(${c.match(/\w\w/g).map((x,i)=> (+`0x${x}`)/(i<3?1:255))})`;
let rgba2hex= c=> '#'+c.match(/[\d\.]+/g).map((x,i)=> Math.round((+x)*(i<3?1:255)).toString(16).padStart(2,0)).join``;

console.log('TEST rgba');
console.log('#d5efabcc             -->', hex2rgba('#d5efabcc'));
console.log('rgba(213,239,171,0.8) -->', rgba2hex('rgba(213,239,171,0.8)'));

console.log('\nTEST rgb');
console.log('#d5efab          -->', hex2rgba('#d5efab'));
console.log('rgb(213,239,171) -->', rgba2hex('rgb(213,239,171)'));

Sotos · Accepted Answer · 2023-04-06 14:04:16Z

0

  function rgbaToHex(r, g, b, a) {
  const red = r.toString(16).padStart(2, '0');
  const green = g.toString(16).padStart(2, '0');
  const blue = b.toString(16).padStart(2, '0');
  const alpha = Math.round(a * 255).toString(16).padStart(2, '0');
  return `#${red}${green}${blue}${alpha}`;
}

console.log(rgbaToHex(2,2,2,0.6));
console.log(rgbaToHex(2,2,2,0.50));

answered Apr 6, 2023 at 14:04

Sotos

4264 silver badges4 bronze badges

Add a comment |

NOVEL · Accepted Answer · 2024-04-12 17:11:49Z

Hope This Helps :>)

function rgbaToHex(rgba = '') {
  // Parse Values from rgba string
  const rgbaArr = rgba.match(/(\d+(\.\d+)?)/g);

  if (rgbaArr.length === 4) {
    const r = parseInt(rgbaArr[0]).toString(16);
    const g = parseInt(rgbaArr[1]).toString(16);
    const b = parseInt(rgbaArr[2]).toString(16);
    let a = Math.round(+rgbaArr[3] * 255).toString(16);
    
    // Add Padding when hex length of alpha is 1
    if (a.length === 1) {
      a = `0${a}`;
    }

    return `#${r}${g}${b}${a}`;
  }

  // Fallback when rgba string is invalid
  return '#000000';
}

console.log(rgbaToHex('rgba(42, 89, 24, 0.4)')) // => #2a591866

Collectives™ on Stack Overflow

How to convert RGBA to Hex color code using javascript

10 Answers 10

Not the answer you're looking for? Browse other questions tagged
javascript
css
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

Not the answer you're looking for? Browse other questions tagged javascriptcss or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
javascript
css
or ask your own question.