Como determinar a cor RGB opaca equivalente para uma determinada cor RGB parcialmente transparente contra um fundo branco

Descobri que reduzir a opacidade contra um fundo branco é uma boa maneira de encontrar tons de cores base mais leves e menos saturados.

Como exemplo, tire esta foto de cor laranja:

A linha inferior mostra as variantes. As porcentagens são as opacidades.

Ter um fundo branco e reduzir a opacidade é bom quando procuro boas tonalidades, mas eu gosto de usar cores RGB 100% opacas equivalentes no produto final.

Como faço para calcular ou encontrar os números RGB equivalentes, quando os números RGB da cor base e da opacidade já estão selecionados?

Eu tentei o seletor de cores, mas no Illustrator ele fornece apenas a cor base.

Use a fórmula Y = 255 - P * (255-X) em que X é um número RGB, P = opacidade (0 ... 1), Y = novo número RGB que deve ter a mesma aparência com 100% de opacidade que X fornece com Opacidade 100p% contra o fundo branco.

A fórmula é a fórmula geral de opacidade, simplificada apenas para este caso especial - a camada superior parcialmente transparente é contra o branco puro.

Nota: o fundo branco deve ser um objeto branco, não a prancheta branca. O objeto de plano de fundo branco é gerenciado por cores.

Se você estiver no Illustrator e quiser copiar a cor com o seletor de cores, faça uma cópia do objeto parcialmente transparente e rasterize-o. Selecione fundo branco na caixa de diálogo de rasterização. Agora, o seletor de cores fornece a cor, sem necessidade de cálculos.

Eu escrevi uma ferramenta para isso: https://github.com/igrmk/blec . Para o seu caso específico, você pode usá-lo desta maneira

blec white deadbeef

Última efé a representação hexadecimal de um canal alfa. Ou você pode usá-lo assim

blec white deadbe:0.75

Especificando a opacidade como uma fração decimal.

Observe que a fórmula sugerida Y = 255 - P * (255 - X)não é muito precisa devido a uma correção de gama. Mais preciso seria Y = (255^G * (1 - P) + X^G * P) ^ (1 / G)onde Y- o valor resultante do componente RGB, X- sobreponha o valor do componente RGB, P- sua opacidade, G- um valor de uma gama. O valor mais comum de uma gama é 2.2. O motivo para incluir uma correção gama na fórmula é mover componentes para o espaço linear no cálculo. Quase todo espaço RGB usado hoje interpreta os componentes de cores de maneira não linear, a fim de colocar mais informações sobre cores em 8 bits. Historicamente, foi introduzido para compensar uma não linearidade dos monitores CRT.

Aqui está um exemplo do porquê uma correção gama é importante para a mistura. Vamos tirar essa imagem vermelha

e essa imagem azul

Vamos pegar a primeira totalmente opaca e definir uma opacidade da segunda imagem igual ao eixo x como esta

Agora vamos misturá-los sem uma correção gama (gama = 1)

Vamos ativar uma correção gama e fazer o mesmo (gama = 2.2)

Como você pode ver, há muito mais transição localizada se não usarmos uma correção gama. Existem cores claramente mais escuras no centro. Se usarmos uma correção gama, a transição e a luminosidade se tornarão muito mais suaves.

O último gradiente é construído usando um pontilhamento.

A imagem contém pixels de apenas duas cores, mas a probabilidade de azul aumenta linearmente de 0 à esquerda para 1 à direita. O resultado parece muito mais próximo da imagem com gama = 2,2 em termos de luminosidade e cores de transição. Tente olhar de longe. E é isso que você provavelmente espera da mistura de duas cores. Nós literalmente os misturamos misturando como aquarelle neste exemplo. Portanto, a gama é uma coisa muito importante para a mistura, especialmente quando a opacidade é próxima de 0,5.

Finalmente, vamos comparar a mistura de vermelho e azul opaco com alfa de 0,5, onde o efeito de uma correção gama é máximo.

A primeira imagem não usa uma correção de gama, a segunda usa uma gama de 2,2 e a terceira usa um pontilhamento. Como você pode ver, o primeiro é muito diferente dos outros dois. Portanto, aconselho sempre usar uma correção gama. Se você usa um editor de imagens decente, provavelmente está seguro e uma correção de gama está ativada por padrão.

Observe que, para comparar um pontilhamento a uma mesclagem, é necessário observar as imagens em uma escala de 100%, para que cada pixel da imagem ocupe exatamente um pixel da tela. Isso quase nunca acontece se você usa um telefone celular. Se você observar imagens em escala diferente, provavelmente verá uma imagem sem relevo. O antialiasing pode levar a resultados muito imprecisos porque não usa uma correção gama no momento. Posso confirmar o Chrome 83 no Android 10 e o Safari mais recente no iOS 13. Acho que ele precisa de muitos recursos para fazer o caminho certo. Portanto, reduz efetivamente a gama de uma tela para cerca de 1,8 quando você vê imagens com muito ruído e contraste.

Observe também que nem todas as telas são bem calibradas. Se você se sente como uma imagem com gama 2.2 e uma imagem com pontilhado produz cores diferentes, tenho uma má notícia para você. Você pode verificar uma gama de monitores aqui http://web.mit.edu/jmorzins/www/gamma/adilger/gamma.html . No entanto, se você usar um dispositivo móvel, é melhor usar um aplicativo, pois um antialiasing pode levar a resultados muito imprecisos.

Aqui está um código para obter essas fotos https://pastebin.com/fHYtWrMb .

Não há necessidade de ir para todos esses cálculos técnicos. Você pode usar o painel de amostras. Salve sua cor original como uma amostra com a opção Global marcada.

Você pode usar o painel de cores e selecionar a porcentagem necessária. Isso não usa transparência, é opaco.

Quando você precisar ver o código RGB ou Hex para sua tonalidade final, poderá pressionar o ícone rgb no painel de cores e poderá ver os valores RGB e Hex.