css - online - javascript color picker

Encontrar el color "equivalente" con opacidad

Question

Supongamos que tengo un color de fondo con una "cinta" sobre otro color sólido. Ahora, quiero que la cinta sea parcialmente transparente para permitir que algunos detalles se mezclen, pero aún así mantenga la cinta del "mismo color" sobre el fondo.

¿Hay alguna manera de (fácilmente) determinar, para una opacidad / alfa <100% del color de la cinta, qué valores RGB debería tener que ser idénticos a su color con 100% de opacidad sobre el fondo?

Aquí hay una foto. El fondo es rgb(72, 28, 97) , rgb(45, 34, 70) cinta rgb(45, 34, 70) . Quiero un rgba(r, g, b, a) para la cinta para que parezca idéntico a este color sólido.

Answer 1

De @Phrogz ''respuesta:

r3 = r2 + (r1-r2)*a1
g3 = g2 + (g1-g2)*a1
b3 = b2 + (b1-b2)*a1

Asi que:

r3 - r2 = (r1-r2)*a1
g3 - g2 = (g1-g2)*a1
b3 - b2 = (b1-b2)*a1

Asi que:

r1 = (r3 - r2) / a1 + r2
g1 = (g3 - g2) / a1 + g2
b1 = (b3 - b2) / a1 + b2

Tenga en cuenta que puede elegir cualquier valor de a1 , y esto encontrará los valores correspondientes de r1 , g1 y b1 necesarios. Por ejemplo, elegir un alfa de 1 le dice que necesita RGB1 = RGB3, pero elegir un alfa de 0 no da ninguna solución (obviamente).

Answer 2

Gracias a las excelentes respuestas de Phrogz y Ephémor , aquí hay una función SASS que computa automágicamente el mejor color RGBA equivalente.

Usted lo llama con el color deseado y el fondo existente, y calculará el mejor (equivalente al más transparente) color RGBA equivalente que arroje el resultado deseado dentro de ± 1/256 de cada componente RGB (debido a errores de redondeo):

@function alphaize($desired-color, $background-color) {

    $r1: red($background-color);
    $g1: green($background-color);
    $b1: blue($background-color);

    $r2: red($desired-color);
    $g2: green($desired-color);
    $b2: blue($desired-color);

    $alpha: 0;
    $r: -1;
    $g: -1;
    $b: -1;

    @while $alpha < 1 and ($r < 0 or $g < 0 or $b < 0
                           or $r > 255 or $g > 255 or $b > 255) {
        $alpha: $alpha + 1/256;
        $inv: 1 / $alpha;
        $r: $r2 * $inv + $r1 * (1 - $inv);
        $g: $g2 * $inv + $g1 * (1 - $inv);
        $b: $b2 * $inv + $b1 * (1 - $inv);
    }

    @return rgba($r, $g, $b, $alpha);
}

Acabo de probarlo con varias combinaciones (todos los temas de Bootswatch) y funciona de maravilla, tanto para resultados oscuros sobre claros como sobre oscuros.

PD: si necesita una precisión mejor que ± 1/256 en el color resultante, necesitará saber qué tipo de navegadores de algoritmos de redondeo se aplican al mezclar colores rgba (no sé si esto está estandarizado o no) y agregar un adecuado condición al @while existente, de modo que siga aumentando $alpha hasta que logre la precisión deseada.

Answer 3

Hice una mezcla MENOS utilizando la respuesta de Phrogz. usted ingresa:

1. cómo debería verse el color
2. con un cierto alfa
3. en un fondo dado (el valor predeterminado es blanco)

Aquí está el código:

.bg_alpha_calc (@desired_colour, @desired_alpha, @background_colour: white) {
    @r3: red(@desired_colour);
    @g3: green(@desired_colour);
    @b3: blue(@desired_colour);

    @r2: red(@background_colour);
    @g2: green(@background_colour);
    @b2: blue(@background_colour);

    // r1 = (r3 - r2 + r2 * a1) / a1
    @r1: ( @r3 - @r2 + (@r2 * @desired_alpha) ) / @desired_alpha;
    @g1: ( @g3 - @g2 + (@g2 * @desired_alpha) ) / @desired_alpha;
    @b1: ( @b3 - @b2 + (@b2 * @desired_alpha) ) / @desired_alpha;

    background-color: @desired_colour;
    background-color: rgba(@r1, @g1, @b1, @desired_alpha);

}

Uso como tal:

@mycolour: #abc;
@another_colour: blue;
.box_overlay {
  // example:
  .bg_alpha_calc (@mycolour, 0.97, @another_colour);
  // or (for white bg) just:
  .bg_alpha_calc (@mycolour, 0.97);
}

Obviamente, no funciona para combinaciones imposibles (como lo menciona Phrogz), eso significa que solo se admiten niveles leves de transparencia. Mira cómo te va con eso.

Answer 4

La mezcla de colores es solo una interpolación lineal por canal, ¿verdad? Entonces la matemática es bastante simple. Si tiene RGBA1 sobre RGB2, el resultado visual efectivo RGB3 será:

r3 = r2 + (r1-r2)*a1
g3 = g2 + (g1-g2)*a1
b3 = b2 + (b1-b2)*a1

... donde el canal alfa es de 0.0 a 1.0.

Control de cordura: si el alfa es 0, ¿RGB3 es lo mismo que RGB2? Sí. Si el alfa es 1, ¿RGB3 es lo mismo que RGB1? Sí.

Si bloqueó solo el color de fondo y el color final, hay una gran cantidad de colores RGBA (infinitos, en el espacio de coma flotante) que podrían satisfacer los requisitos. Por lo tanto, debe elegir el color de la barra o el nivel de opacidad que desee y averiguar el valor de la otra.

Escogiendo el color basado en alfa

Si conoce RGB3 (el color final deseado), RGB2 (el color de fondo) y A1 (la cantidad de opacidad que desea), y solo busca RGB1, entonces podemos reorganizar las ecuaciones de la siguiente manera:

r1 = (r3 - r2 + r2*a1)/a1
g1 = (g3 - g2 + g2*a1)/a1
b1 = (b3 - b2 + b2*a1)/a1

Hay algunas combinaciones de colores que son teóricamente posibles, pero imposibles dado el rango RGBA estándar. Por ejemplo, si el fondo es negro puro, el color percibido deseado es blanco puro, y el alfa deseado es 1%, entonces necesitaría:

r1 = g1 = b1 = 255/0.01 = 25500

... un blanco súper brillante 100 veces más brillante que cualquier otro disponible.

Escogiendo Alpha basado en colores

Si conoce RGB3 (el color final deseado), RGB2 (el color de fondo) y RGB1 (el color que tiene que desea variar la opacidad de), y solo está buscando A1, entonces podemos reorganizar el ecuaciones por lo tanto:

a1 = (r3-r2) / (r1-r2)
a1 = (g3-g2) / (g1-g2)
a1 = (b3-b2) / (b1-b2)

Si estos dan valores diferentes, entonces no puede hacer que coincida exactamente, pero puede promediar los alfas para acercarse lo más posible. Por ejemplo, no hay opacidad en el mundo que le permita poner el verde sobre el rojo para ponerse azul.