Convert RGBA color to HTML color code

Question

I have a color picker in my application that users can use to pick colors of certain objects that the application outputs. The color picker is outputting the color chosen in RGBA format. However, I need the HTML color code. I need to be able to convert RGBA, without knowing the color ahead of time, to HTML and use it as a string later. How would I go about doing this?

HTML does not support semitransparent color values - unless the alpha is maxed out or you don't care about the alpha, you won't be able to obtain an HTML color code equivalent from an RGBA color. Were you referring to CSS color values instead, as shown by the tags and the answer you accepted? — BoltClock
– BoltClock, Commented Jul 15, 2012 at 18:10
@BoltClock The canvas context has a globalAlpha property which you can use for setting up the transparency of the canvas object. — Endre Simo
– Endre Simo, Commented Jul 15, 2012 at 18:41

14 revs, 2 users 96% · Accepted Answer · 2015-01-20 19:25:48Z

13

RGBA is natively supported by CSS3:

div {
   background: rgba(200, 54, 54, 0.5); 
}

Firefox, Safari, Chrome, IE9 and Opera browsers all support RGBA. Older IE's do not support it.

Fortunately, you can specify RGBA colours for browsers that support it and an alternative for browsers that do not. Check this link for a great howto.

These are the two options: - from the link -

1. FALLING BACK TO SOLID COLOUR: Allow the browser to fall back to using a solid colour when opacity isn’t available. The

h1 {
     color: rgb(127, 127, 127); 
     color: rgba(0, 0, 0, 0.5); //for modern browsers only
}

2. FALLING BACK TO A PNG: In cases where you’re using transparency on a background-color (although not on borders or text) it’s possible to fall back to using a PNG with alpha channel to get the same effect. This is less flexible than using CSS as you’ll need to create a new PNG for each level of transparency required, but it can be a useful solution.

h1 {
     background: transparent url(imageName.png);
     background: rgba(0, 0, 0, 0.5) none; //for modern browsers only
}

What I am trying to say is that you do not need the HTML color code, you just need to add the css property rgba - with javascript or jquery - after you pick up the color and I think you are done.

Hope it helps.

edited Jan 20, 2015 at 19:25

community wiki

14 revs, 2 users 96%
cacho

Sign up to request clarification or add additional context in comments.

4 Comments

Nathan Over a year ago

I would assume the answer to this would be yes, but rgba is supported for inline styles correct?

Cacho Santa Over a year ago

@Natha, you are right, the answer is yes. It is just a different way to specify a color. 1. a HEX value - like "#ff0000" 2. an RGBA value - like "rgb(255,0,0, 0.5)" 3. a color name - like "red"

BoltClock Over a year ago

Internet Explorer supports RGBA starting from version 9.

Marat Tanalin Over a year ago

There is no need for transparent or none component inside background property value since its overrided (if browser supports entire value) entirely anyway. It should be enough to write just background: url(imageName.png); background: rgba(0, 0, 0, 0.5);.

Peter O. · Accepted Answer · 2012-11-12 12:30:21Z

2

If you're looking for an actual conversion (which the text of your question literally asks for) from rgb(a) to hex in JavaScript:

red = green = blue = 255;
hex = '#' + 
    ("0" + (red).toString(16)).slice(-2) + 
    ("0" + (green).toString(16)).slice(-2) +
    ("0" + (blue).toString(16)).slice(-2);

There is of course no alpha equivalent, but you could set the opacity (and/or browser specific -opacity values for older browser support).

edited Nov 12, 2012 at 12:30

Peter O.

33.1k14 gold badges86 silver badges97 bronze badges

answered Jul 15, 2012 at 21:50

Bob Davies

2,2821 gold badge19 silver badges28 bronze badges

Collectives™ on Stack Overflow

Convert RGBA color to HTML color code

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related