Convert opacity to hex in Javascript

Question

What would be the preferred way to convert opacity (0 - 1) to hex (00 - ff) in Javascript?

My thoughts are to use an if statement to check if opacity is between 1 and 0.95 then use ff. Work my way down to 0.

What exactly do you mean by "convert"? Are you talking about changing a colour value according to an overlay of a different colour and its opacity setting? — Pekka, May 20 '10 at 19:56
@Pekka Opacity doesn't really have anything to do with it; he wants to convert a float in the range 0-1 to the appropriate 1-byte hex value, so 1.0 goes to 0xFF — Michael Mrozek, May 20 '10 at 19:58

score 12 · Accepted Answer · edited May 23 '17 at 12:15

12

At the most basic level, you're just converting a decimal to hex: How to convert decimal to hex in JavaScript?:

yourNum = yourNum.toString(16);

The 0.0 - 1.0 range is just a percentage format of the 0-255 range. So multiply your value (e.g. 0.5 * 255) then convert to hex, you'll get the correct value.

edited May 23 '17 at 12:15

Community

1
1

answered May 20 '10 at 19:56

Rex M

142,167
33
283
313

1

The original version (pre-multiple ninja edits) was incorrect, just pointed to the SO post and had no mention of multiplying by 255 – Daniel DiPaolo May 20 '10 at 19:59
I have no Idea why you voted down, I saw some people are very strict to put answer then a reference not a reference only, but a vote down is very exaggerated specially you posted a good answer. – Kronass May 20 '10 at 20:02
[The number one reason to downvote an answer is that it is wrong](http://meta.stackexchange.com/questions/2451/why-do-you-cast-downvotes-on-answers), which it was. I've since removed the downvote as it has been corrected. – Daniel DiPaolo May 20 '10 at 20:08
Guess I would have found that question if I didn't have opacity stuck in my head. – John Hoover May 20 '10 at 20:10

score 7 · Answer 2 · answered May 20 '10 at 19:58

7

Based on the suggestions of the other answers:

Math.floor(0.0 * 255).toString(16);   // Returns '00'
Math.floor(0.5 * 255).toString(16);   // Returns '75'
Math.floor(1.0 * 255).toString(16);   // Returns 'FF'

answered May 20 '10 at 19:58

Daniel Vassallo

337,827
72
505
443

2

Why floor instead of round? – Dror Bar Oct 25 '20 at 10:04

score 3 · Answer 3 · answered Sep 10 '20 at 07:10

function applyOpacity(color, opacity) {
  if (typeof color !== 'string' || color.length !== 7) return color;

  if (opacity < 0) opacity = 0;
  else if (opacity > 100) opacity = 100;

  opacity = Math.round(opacity * 2.55);

  return color + opacity.toString(16).toUpperCase().padStart(2, '0');
}

score 2 · Answer 4 · edited May 23 '17 at 12:06

2

Multiply by 255 (this assumes your input range is from 0 to 1 only, and this scales it up to 0-255)
Math.floor()
Convert that decimal number to the hex equivalent

edited May 23 '17 at 12:06

Community

1
1

answered May 20 '10 at 19:56

Daniel DiPaolo

55,313
14
116
115

score 1 · Answer 5 · answered Jun 24 '20 at 17:37

1

This is the simple function to play hex colour code opacity.

const colour (colour, value) => {
  const opacity = Math.floor(0.1 * value * 255).toString(16);
  return colour + opacity;
};

colour (#172B4D, 5)

answered Jun 24 '20 at 17:37

U.A

2,991
3
24
36

score 1 · Answer 6 · answered Jan 24 '23 at 11:24

1

Create an util function like

const convertTotHex = (num) => {
    const hex = Math.round(((num/100)*255)).toString(16);
    return hex.length > 1 ? hex : 0+hex;
}

answered Jan 24 '23 at 11:24

Atiqul Alam

181
4

Convert opacity to hex in Javascript

6 Answers6