hexadecimal - rgb to hex javascript

Convertir RGB a RGBA sobre blanco (7)

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 la idea de un algoritmo para saber 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?

FYI solución basada en la respuesta de Guffa:

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 superior no funcionó para mí con componentes de color bajo. Por ejemplo, no calcula el alfa correcto si el color es # 80000. Técnicamente debería hacerlo en # ff0000 con alfa 0.5. Para resolver esto, necesita utilizar RGB -> HSL -> conversión RGBA. Este es un pseudo có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.

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

Para su ejemplo rgb( 128, 128, 255 ) , necesitamos cambiar los valores RGB a 0 primero por 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, escribí una pequeña función SCSS para que pueda 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 ); }

Sean r, g y b los valores de entrada y r '', g'', b ''y a'' sean los valores de salida, todos a escala (por ahora, ya que hace que la matemática sea más bonita) entre 1 y 0. Entonces, 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. Hacer algebra

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 de color mínimo será el factor limitante en el problema, por lo tanto, enlaza esto con 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 supongo que a ''es opacidad aquí. Es trivial cambiarlo a transparencia: simplemente elimine el "1 -" de la fórmula para un ''. Algo que hay que tener en cuenta es que esto no parece producir resultados exactos: dijo que la opacidad fue de 0.498 para el ejemplo que dio anteriormente (128, 128, 255). Sin embargo, esto es extremadamente cerca.

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

Básicamente, tienes tres números x , y , z y estás buscando tres nuevos números x'' , y'' , z'' y un multiplicador a en el rango [0,1] de manera 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, solo tiene que insertar cualquier número real a , pero el problema es encontrar un número para el cual el error de discretización sea mínimo.

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, rgb(152, 177, 202) muestra como rgba(0, 62, 123, .404) .

He comprobado en Photoshop que los colores coinciden perfectamente.