Getting the color code with alpha level

[Velhari]

Hi all,

if i am having the input as rgb color code and alpha level. Now i want to calculate the rgb color code with applying the alpha level into the rgb color code. Is there any idea folks.

for example,
if supplied color code is #ec933a with alpha level is 60(approx)
we will have to get the output like this #fbebd9.

This is just for example i said.

[acoder]

If you alert the element's style.color property you should get the rgb values.

However, alpha values are not part of rgb. Use the opacity property to control the alpha level. I assume you're trying to create an approximation effect of some sort.

[Velhari]

If you alert the element's style.color property you should get the rgb values.

However, alpha values are not part of rgb. Use the opacity property to control the alpha level. I assume you're trying to create an approximation effect of some sort.

Hi,

Thanks for Reply. I am working to getting the color from the user, using that colorcode i will have to calculate the colorcode(with alpha level) which applied after some alpha level on user input. These things i plan to do through Javascript calculation.
Is it possible? and how to do this.
For example,
In google calendar before creating the event in calendar, we had to choose the color of the calendar. Then, the event created and displayed in the calendar based on the color(of calendar) chosen earlier.
Here I notice that, In that event display, they have applied the color (we chosen for the calendar) for the borders and not for background of event. I think that they performed some calculation for to display the background color with some alpha level applied to the color we chose earlier.

[hsriat]

For example,
In google calendar before creating the event in calendar, we had to choose the color of the calendar. Then, the event created and displayed in the calendar based on the color(of calendar) chosen earlier.
Here I notice that, In that event display, they have applied the color (we chosen for the calendar) for the borders and not for background of event. I think that they performed some calculation for to display the background color with some alpha level applied to the color we chose earlier.

They don't apply any alpha to the color to provide background. They just increase its brightness.

There's a difference between alpha and brightness. Alpha is transparency of the element.

So just forget about alpha and calculate the relative brighter version of the color selected by your user. Programmatacally (I'm not sure if this word exists), its not a single line code to calculate the relative brighter version.
You need to convert HEX color code to RGB, then RGB to HSL (or HSB). In the HSL format, increment the L (luminosity) value, and convert the new HSL value to HEX, again through the same cycle. This calculated HEX code is what you require.

However, I case you are giving few color options to the user, instead of writing the code, just calculate the relatively brighter versions of your color with a photo editor (GIMP or PHOTOSHOP) for once and save them corresponding to each color in an array in your code. And use the corresponding color when required.

[Velhari]

So just forget about alpha and calculate the relative brighter version of the color selected by your user.
You need to convert HEX color code to RGB, then RGB to HSL (or HSB). In the HSL format, increment the L (luminosity) value, and convert the new HSL value to HEX, again through the same cycle. This calculated HEX code is what you require.

Hi,

I follow the steps as said by you. Its really working too great. Thanks for your Idea.

[hsriat]

Hi,

I follow the steps as said by you. Its really working too great. Thanks for your Idea.

You are welcome :)