Calculando el valor de opacidad matemáticamente

Question

¿Cómo se calcula la opacidad matemáticamente?

Hay un valor de opacidad en Photoshop, CSS, etc. En realidad, esta opacidad es el comportamiento transparente de una capa. Eso todos lo sabemos Pero, ¿cómo se calcula matemáticamente? ¿Hay alguna ecuación para calcular la opacidad?

Al establecer el valor de opacidad, ¿qué está pasando allí?

Tomemos el caso de capas de color de fricción: Capa 1 (capa de primer plano) y la capa 2 (capa de fondo)

Capa 1 es de color rojo (decir valor de color A) y la capa 2 es de color blanco (decir valor de color B) .

Cuando establecemos la opacidad (digamos p) en la capa 1, podemos poner 0.5 o 50% y obtener un color rojo blanquecino (digamos el valor de color X). Para obtener este valor X ¿Qué debo hacer matemáticamente?

es decir.

X = (things which will be a relation containing p, A and B) 

Quiero saber la ecuación matemática exacta para encontrar X.

Además, si tengo la ecuación, y los valores de color son de naturaleza hexadecimal, ¿con una calculadora hexadecimal puedo obtener un resultado correcto?

Answer 1

La fórmula para combinar C1 = (R1,G1,B1) y C2 = (R2,G2,B2) en un nuevo color C3, en donde C2 se superpone en la parte superior de C1 con la opacidad p es generalmente ((1-p)R1 + p*R2, (1-p)*G1 + p*G2, (1-p)*B1 + p*B2).

Consulte Wikipedia article on transparency para obtener más información.

Answer 2

La siguiente javascript da un método que se puede utilizar para calcular el valor de color opacidad manualmente:

// caculateTransparentColor(foreground, background, opacity) 
var theColor = caculateTransparentColor('#ff0000', '#00ff00', 0.5) 
console.log(theColor); 
Returns: #808000 

Código:

var COLOR_REGEX = /^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/; 
function colorHexToRGB(htmlColor) { 

    arrRGB = htmlColor.match(COLOR_REGEX); 
    if (arrRGB == null) { 
     alert("Invalid color passed, the color should be in the html format. Example: #ff0033"); 
    } 
    var red = parseInt(arrRGB[1], 16); 
    var green = parseInt(arrRGB[2], 16); 
    var blue = parseInt(arrRGB[3], 16); 
    return {"r":red, "g":green, "b":blue}; 
} 

function caculateTransparentColor(foregroundColor, backgroundColor, opacity) { 
    if (opacity < 0.0 || opacity > 1.0) { 
     alert("assertion, opacity should be between 0 and 1"); 
    } 
    opacity = opacity * 1.0; // to make it float 
    var foregroundRGB = colorHexToRGB(foregroundColor); 
    var backgroundRGB = colorHexToRGB(backgroundColor); 
    var finalRed = Math.round(backgroundRGB.r * (1-opacity) + foregroundRGB.r * opacity); 
    var finalGreen = Math.round(backgroundRGB.g * (1-opacity) + foregroundRGB.g * opacity); 
    var finalBlue = Math.round(backgroundRGB.b * (1-opacity) + foregroundRGB.b * opacity); 
    return colorRGBToHex(finalRed, finalGreen, finalBlue); 
} 

function colorRGBToHex(red, green, blue) { 
    if (red < 0 || red > 255 || green < 0 || green > 255 || blue < 0 || blue > 255) { 
     alert("Invalid color value passed. Should be between 0 and 255."); 
    } 
    var formatHex = function(value) { 
     value = value + ""; 
     if (value.length == 1) { 
      return "0" + value; 
     } 
     return value; 
    } 
    hexRed = formatHex(red.toString(16)); 
    hexGreen = formatHex(green.toString(16)); 
    hexBlue = formatHex(blue.toString(16)); 

    return "#" + hexRed + hexGreen + hexBlue; 
} 

Answer 3

Fórmula para Resultado de la mezcla de dos píxeles transparentes:

C1 = [R1, G1, B1] es el color de píxel de primer plano.

C2 = [R2, G2, B2] es el color de fondo del píxel.

p1 es el porcentaje de opacidad del píxel de primer plano.

p2 es el porcentaje de opacidad del píxel de fondo.

New_Pixel_Color = (p1 * c1 + p2 * c2-P1 * P2 C2 *)/(P1 + P2-P1 * P2)

New_Pixel_opacity = P1 + P2-P1 * P2

Puede prueba y disfrútalo!