Fórmula para descobrir o resultado de uma cor após aplicar x% de opacidade a ela?

Eu tenho 2 cores

1. #a1a2a4
2. preto ( #000000)
3. branco ( #ffffff)

Agora eu preciso saber quanta opacidade (em porcentagem) devo aplicar à segunda cor (preto) contra um fundo da terceira cor (branco) para obter uma cor "mais próxima" (conforme determinado pelo olho) da primeira cor ( #a1a2a4).

Como faço para fazer isso?

Este caso é mais ou menos simples (você está lidando com preto e branco).

Depois de aplicar a cor (# a1a2a4), verifique os níveis de RGB:

Você pode ver que ele tem aproximadamente 162 (média) e, sabendo que pode ir de 0 a 255, basta descobrir o percentual:

162 * 100/255 = ~ 63,5%

Agora, como o RGB funciona de maneira oposta comparada ao CMYK (em termos de mistura de cores, ou seja, mistura de cores significa branco e com mistura de cores CMYK significa preto), a porcentagem real nesse caso é a diferença entre 100% e o valor que temos:

100 - 63,5 = 36,5%

Então, se você aplicar 36% de opacidade, ela terá essa cor, acabei de testar.

É claro que em casos com cores mais complexas, esse método não funciona e eu não sei como obter a porcentagem; eu faria o clássico de tentativa e erro.

A pergunta, se bem entendi, é "Como você calcularia isso programaticamente?" É simples de matemática converter a "cor" de destino em um valor alfa.

Branco == [1,1,1] ou #ffffff ou 255.255.255, dependendo da sua aplicação. Preto == [0,0,0], etc.

Portanto: normalize o valor alvo (neste caso, é 0,6314), subtraia de 1 e aplique à camada preta como um valor alfa. Você pode fazer esse canal de cada vez e calcular a média dos resultados, mas por que se preocupar, já que sua cor é indistinguível (para os olhos) de um cinza neutro # a1a1a1. (As coisas ficam mais complexas se houver uma tonalidade visível, pois os canais terão valores diferentes, mas o mesmo princípio se aplica.)

Uma variante um pouco mais rápida de tentativa e erro:

Crie sua cor hexadecimal no Photoshop em um documento CMYK e observe os valores CMYK. Recebo 39/32/31/1.

Crie duas camadas, a preta superior e a branca inferior.

Abra a janela Informações. Separadamente, puxe a janela Camadas.

Brinque com a opacidade da camada preta. Use o conta-gotas sobre sua cor e verifique na janela de informações para ver o quão perto você está chegando. Isso economiza o tempo de troca de opacidade - achatar - verificar cor - desfazer achatar.

Dadas as cores de primeiro e segundo plano (valores uniformes nos canais R, G e B), não é possível obter uma cor não uniforme #a1a2a4alterando a opacidade, pois a opacidade afeta todos os canais de uma só vez. No entanto, você pode obter uma cor "suficientemente próxima" #a1a1a1, definindo a opacidade do preto como 0.37. Aqui está a ferramenta que eu usei:

http://colorizer.org/

1. Clique em "Plano de fundo" e defina o valor hexadecimal como #fff
2. Clique em "Botão" e defina o valor hexadecimal como #000
3. Use um utilitário conta-gotas para encontrar a cor de destino no espectro "Alfa / Opacidade" e clique no espectro para obter o valor da opacidade.

Encontrar esta fórmula é um ótimo exercício de álgebra linear. Usando RGB e álgebra linear, criei esta matriz M. Se você deseja combinar RGBred = (237,32,36) e RGBblue = (60,84,165), onde a camada inferior é 100% opaca e a camada superior 50% a opacidade então multiplica Mv onde M é a matriz abaixo ev = (237,32,36,60,84,165). Temos Mv = (157.777,71.444.107.444).

O valor real é (159,71.103), então estamos bem próximos, mas há algum erro - provavelmente porque eu estava usando valores arredondados para calcular M e / ou porque talvez ele não use RGB, mas alguma outra escala para calcular a transparência achatamento. Provavelmente eu poderia obter uma matriz mais precisa usando uma abordagem do tipo mínimos quadrados, mas estava com preguiça.

A matriz MI obtida é

M=[-0.316438695251802233798084520470 -0.0205011495462359668020633451463 -0.627769626184202308338411657855 
    4.83088877248122926488562947487 -0.673109830626855247075257552051 0.137681159420289855072463768116]
[2.67597831835520455938498494132 0.215715090307662822540065922133 1.69848459052630338054958974280 -13.9750196437925615505500261925 
    3.20021608171817705605028810915 -0.370471014492753623188405797101]
[-6.62632375526968419148486246260 0.509833585674322977062528534400 -3.14436345482363613544439381045 35.0629474419416797625283743688
    -6.69242186135847738781211803779 1.41304347826086956521739130435]