I have a hex color, e.g. #F4F8FB
(or rgb(244, 248, 251)
) that I want converted into an as-transparent-as-possible rgba color (when displayed over white). Make sense? I'm looking for an algorithm, or at least idea of an algorithm for how to do so.
For Example:
rgb( 128, 128, 255 ) --> rgba( 0, 0, 255, .5 ) rgb( 152, 177, 202 ) --> rgba( 50, 100, 150, .5 ) // can be better(lower alpha)
Ideas?
FYI solution based on Guffa's answer:
function RGBtoRGBA(r, g, b){ if((g == null) && (typeof r === 'string')){ var hex = r.replace(/^\s*#|\s*$/g, ''); if(hex.length === 3){ hex = hex.replace(/(.)/g, '$1$1'); } r = parseInt(hex.substr(0, 2), 16); g = parseInt(hex.substr(2, 2), 16); b = parseInt(hex.substr(4, 2), 16); } var min, a = (255 - (min = Math.min(r, g, b))) / 255; return { r : r = 0|(r - min) / a, g : g = 0|(g - min) / a, b : b = 0|(b - min) / a, a : a = (0|1000*a)/1000, rgba : 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')' }; } RGBtoRGBA(204, 153, 102) == RGBtoRGBA('#CC9966') == RGBtoRGBA('C96') == { r : 170, g : 85 , b : 0 , a : 0.6, rgba : 'rgba(170, 85, 0, 0.6)' }
To display white, set all color parameters to 255, like this: rgb(255, 255, 255).
RGBA is a color format, basically containing values for red, green, blue respectively and 'A' in RGBA stands for Alpha. To set the opacity of color we mainly change the value of alpha. The value of alpha varies from 0.0 (fully transparent) to 1.0 (fully opaque).
Take the lowest color component, and convert that to an alpha value. Then scale the color components by subtracting the lowest, and dividing by the alpha value.
Example:
152 converts to an alpha value of (255 - 152) / 255 ~ 0.404 152 scales using (152 - 152) / 0.404 = 0 177 scales using (177 - 152) / 0.404 ~ 62 202 scales using (202 - 152) / 0.404 ~ 123
So, rgb(152, 177, 202)
displays as rgba(0, 62, 123, .404)
.
I have verified in Photoshop that the colors actually match perfectly.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With