Convertir RGB a RGBA sobre blanco

Tengo un color hexadecimal, por ejemplo #F4F8FB(o rgb(244, 248, 251)) que quiero convertir en un color rgba tan transparente como sea posible (cuando se muestra en blanco). ¿Tener sentido? Estoy buscando un algoritmo, o al menos una idea de un algoritmo sobre cómo hacerlo.

Por ejemplo:

rgb( 128, 128, 255 ) --> rgba(   0,   0, 255,  .5 )
rgb( 152, 177, 202 ) --> rgba(  50, 100, 150,  .5 ) // can be better(lower alpha)

Ideas?

Solución para su información basada en la respuesta de Guffa:

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)' 
    }

Tome el componente de color más bajo y conviértalo a un valor alfa. Luego, escale los componentes de color restando el más bajo y dividiendo por el valor alfa.

Ejemplo:

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

Entonces, se rgb(152, 177, 202)muestra como rgba(0, 62, 123, .404).

Verifiqué en Photoshop que los colores realmente coinciden perfectamente.

Sean r, g y b los valores de entrada y r ', g', b 'y a' sean los valores de salida, todos escalados (por ahora, ya que hace que las matemáticas sean más bonitas) entre 1 y 0. Luego, por La fórmula para superponer colores:

r = a' * r' + 1 - a'
g = a' * g' + 1 - a'
b = a' * b' + 1 - a'

Los términos 1 - a 'representan la contribución de fondo, y los otros términos representan el primer plano. Haz algo de álgebra:

r = a' * (r' - 1) + 1
r - 1 = a' * (r' - 1)
(r - 1) / (r' - 1) = a'
(r' - 1) / (r - 1) = 1 / a'
r' - 1 = (r - 1) / a'
r' = (r - 1) / a' + 1

Intuitivamente, parece que el valor mínimo de color será el factor limitante en el problema, por lo que debe asociarlo a m:

m = min(r, g, b)

Establezca el valor de salida correspondiente, m ', en cero, ya que queremos maximizar la transparencia:

0 = (m - 1) / a' + 1
-1 = (m - 1) / a'
-a' = m - 1
a' = 1 - m

Entonces, en javascript (traduciendo de 1 a 255 en el camino):

function rgba(r, g, b) {
    var a = 1 - Math.min(r, Math.min(g, b)) / 255;
    return [255 + (r - 255) / a, 255 + (g - 255) / a, 255 + (b - 255) / a, a];
}

Tenga en cuenta que estoy asumiendo que a 'es opacidad aquí. Es trivial cambiarlo a transparencia: simplemente elimine el "1 -" de la fórmula para un '. Otra cosa a tener en cuenta es que esto no parece producir resultados exactos: dice que la opacidad fue de 0.498 para el ejemplo que proporcionó anteriormente (128, 128, 255). Sin embargo, esto está extremadamente cerca.

Me gustaría ver la conversión RGB <-> HSL. Es decir, luminosidad == cantidad de blanco == cantidad de transparencia.

Para su ejemplo rgb( 128, 128, 255 ), necesitamos cambiar 0primero los valores RGB a la cantidad máxima, es decir, a rgb( 0, 0, 128 )ese sería nuestro color con la menor cantidad de blanco posible. Y después de eso, usando la fórmula para la luminancia, calculamos la cantidad de blanco que necesitamos agregar a nuestro color oscuro para obtener el color original; ese sería nuestro alfa:

L = (MAX(R,G,B) + MIN(R,G,B))/2
L1 = (255 + 128) / 2 = 191.5
L2 = (128 + 0) /2 = 64
A = (191,5 - 64) / 255 = 0,5;

Espero que tenga sentido. :)

Para aquellos de ustedes que usan SASS / SCSS, he escrito una pequeña función SCSS para que puedan usar fácilmente el algoritmo descrito por @Guffa

@function transparentize-on-white($color)
{
    $red: red($color);
    $green: green($color);
    $blue: blue($color);
    $lowestColorComponent: min($red, $green, $blue);
    $alpha: (255 - $lowestColorComponent) / 255;

    @return rgba(
        ($red - $lowestColorComponent) / $alpha,
        ($green - $lowestColorComponent) / $alpha,
        ($blue - $lowestColorComponent) / $alpha,
        $alpha
    );
}

Solo estoy describiendo una idea para el algoritmo, no hay una solución completa:

Básicamente, usted tiene tres números x, y, zy que busca tres nuevos números x', y', z'y un multiplicador aen el rango [0,1] tal que:

x = a + (1 - a) x'
y = a + (1 - a) y'
z = a + (1 - a) z'

Esto se escribe en unidades donde los canales también toman valores en el rango [0,1]. En valores discretos de 8 bits, sería algo como esto:

x = 255 a + (1 - a) x'
y = 255 a + (1 - a) y'
z = 255 a + (1 - a) z'

Además, desea el mayor valor posible a. Puedes resolver:

a  = (x - x')/(255 - x')          x' = (x - 255 a)/(1 - a)

Etc. En valores reales esto tiene infinitas soluciones, simplemente conecte cualquier número real a, pero el problema es encontrar un número para el cual el error de discretización sea mínimo.

Esto debería hacerlo:

let x = min(r,g,b)
a = 1 - x/255                    # Correction 1
r,g,b = ( (r,g,b) - x ) / a      # Correction 2

La respuesta principal no me funcionó con componentes de bajo color. Por ejemplo, no calcula el alfa correcto si el color es # 80000. Técnicamente, debería convertirse en # ff0000 con alpha 0.5. Para resolver esto, debe usar la conversión RGB -> HSL -> RGBA. Este es un pseudocódigo para obtener los valores correctos:

//Convert RGB to HSL
hsl = new HSL(rgb)

//Use lightness as alpha
alpha = hsl.Lightness

//For #80000 lightness is 0.5, so we have to take this into account.
//Lightness more than 0.5 converts to alpha 1 and below is a linear ratio
if (alpha > 0.5)
{
    alpha = 1;
}
else
{
    alpha = alpha / 0.5;
    //We need to drop the lightness of the color to 0.5 to get the actual color
    //that needs to display. Alpha blending will take care of that.
    hsl.Lightness = 0.5;
}

newRgb = hsl.convertToRgb()

"newRgb" contendrá el valor del nuevo color ajustado y usará la variable "alfa" para controlar la transparencia.