Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Convert RGB to RGBA over white

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)'      } 
like image 891
Nobody Avatar asked Jul 12 '11 23:07

Nobody


People also ask

What is the RGBA code for white?

To display white, set all color parameters to 255, like this: rgb(255, 255, 255).

How do I add opacity to RGBA?

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).


1 Answers

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.

like image 126
Guffa Avatar answered Oct 23 '22 11:10

Guffa