Passo uma quantidade surpreendente do meu dia em algum lugar entre um arquivo de design e uma folha de estilo, empurrando uma cor em direção a outra até que um estado de pairar, uma borda ou uma parada de gradiente pareça certo Durante anos EU fiz a aritmética na minha cabeça ou a olhei em um selecionador, o que é bom até que você precise da cor exata a meio caminho entre um azul de marca e um neutro quente e você precisa dele como um código hexadecimal que você pode colar Então EU construí um misturador cores em Toolz.dev que combina duas cores com uma proporção que você controla, oferece os mesmos modos de mistura que um editor de imagens usa e fornece o resultado em HEX, RGB e HSL. Este é o guia para isso e para o que & quot; misturando cores e quot; significa em uma tela.
tl;dr: Um misturador de cores mistura duas cores em uma. O Toolz misturador cores interpola duas cores com uma relação ajustável, suporta os modos de mistura separável W3 C (multiplicar, tela, sobreposição, escurecer, clarear, diferença, média), constrói um gradiente de etapas intermediárias entre as cores e gera todos os resultados como HEX, RGB e HSL. Ele aceita nomes de cores hexadecimais, rgb (), hsl () e CSS e é executado inteiramente no lado do cliente.
Como você mistura duas cores em uma tela?
A resposta simples é uma média ponderada das duas cores & #39; canais vermelhos, verdes e azuis. Para misturar vermelho (255, 0, 0) e azul (0, 0, 255) em partes iguais, você calcula a média de cada canal: o vermelho se torna (255+0)/2 = 128, verde fica 0, o azul se torna (0+255)/2 = 128, dando (128, 0, 128), que é o hex #800080, um roxo sólido Deslocar o peso para um lado e você desliza ao longo da linha entre as duas cores Isso é exatamente o que o controle deslizante de proporção faz: em 0 por cento você mantém a primeira cor, em 100 por cento você pousa no segundo, e 50 por cento é a divisão par.
Esta é a mesma interpolação que um gradiente CSS de duas paradas usa, e é por isso que o ponto médio de linear-gradient(red, blue) é aquele roxo O misturador torna a relação explícita desenhando também o gradiente entre as suas duas cores como uma tira de amostras, cada uma das quais poderá copiar como paragem intermédia Se alguma vez quiseram & quot; três cores uniformemente espaçadas entre estas duas, & quot; a tira gradiente é a forma mais rápida de as obter.
Uma ressalva honesta, porque surpreende as pessoas: a média dos canais RGB não é como os pigmentos se misturam Em uma tela, as cores são claras e combinam aditivamente; em um conjunto de tintas, elas são pigmentadas e combinam subtrativamente Misturar tendências de luz vermelha e verde em direção a uma azeitona opaca em vez do amarelo vívido que você obteria da tinta, porque você está calculando a média dos valores de luz, não misturando pigmento Isso não é um bug na ferramenta, é a natureza do sRGB, e a correção quando você quer um resultado mais animado é misturar tons que ficam mais próximos na roda conversor cor é útil ao lado do mixer quando você deseja ver a mesma cor expressa entre os formatos enquanto raciocina sobre a tonalidade.
Qual é a diferença entre os modos Mix e blend?
Mix é a média ponderada descrita acima: sempre cai em algum lugar na linha reta entre as duas cores Os modos de mistura são algo totalmente diferente. São as operações de mistura de camadas dos editores de imagens, padronizadas para a web no Composição e Mistura W3C Nível 1 especificação, e cada um combina os canais com uma fórmula diferente em vez de uma média simples.
| modo | Fórmula por canal (valores 0 a 1) | Efeito |
|---|---|---|
| Misturar | b (ponderado pela razão) |
Média ponderada, pousa entre as duas cores |
| Multiplicar | a x b |
Sempre mais escuro; branco deixa uma cor inalterada, preto força preto |
| Tela | a + b - a x b |
Sempre mais leve; o inverso de multiplicar |
| Sobreposição | multiplique ou crie por base | Aumenta o contraste |
| Escurecer | min(a, b) |
Mantém o canal mais escuro |
| Iluminar | max(a, b) |
Mantém o canal mais leve |
| Diferença | abs(a - b) |
Distância do canal; cores idênticas dão preto |
| Média | (a + b) / 2 |
A média não ponderada de ambos |
A intuição que vale a pena carregar: multiplicar sempre escurece porque multiplicar duas frações dá uma fração menor, então vermelho vezes azul é preto (cada cor está faltando o canal que a outra tem).A tela sempre clareia porque é multiplicada aplicada aos valores invertidos A diferença dá a distância canal a canal, e é por isso que misturar uma cor consigo mesmo sob a diferença produz preto puro No misturador, o controle deslizante de proporção então se comporta como opacidade da camada: ele desvanece o resultado misturado em sobre a primeira cor, para que você possa discar o efeito de sutil para completo.
O que o controle deslizante de proporção controla?
A proporção define quão fortemente a segunda cor, ou o resultado misturado do modo escolhido, é aplicado sobre a primeira cor Pense nisso como opacidade na camada superior Em 0 por cento, a camada superior é invisível e você vê a primeira cor intocada Em 100 por cento, a camada superior é totalmente opaca e você obtém a mistura completa para esse modo Em 50 por cento, você obtém uma divisão uniforme Para o Mix simples, isso se reduz à média ponderada familiar; para um modo como Multiply, ele permite aplicar um escurecimento suave em vez do efeito total.
Esse modelo unificado é deliberado, porque significa que um controle deslizante faz o mesmo trabalho conceitual em todos os modos Na prática EU uso proporções baixas para empurrar uma cor ligeiramente para outra (um estado de hover que é o & quot; o botão, mas 15 por cento para o black") e proporções altas quando EU quero a mistura completa gerador gradiente continua de onde o mixer termina quando você deseja transformar um par de cores mistas em um gradiente CSS completo e multi-parada.
Como obtenho a cor exata a meio caminho entre duas cores?
Defina o modo como Mix e a proporção como 50, e o resultado é o ponto médio exato Você também pode lê-lo diretamente da faixa gradiente: a faixa central é a cor intermediária Quando você precisar de várias cores uniformemente espaçadas entre dois pontos finais, aumente a contagem de passos do gradiente e copie as amostras nas posições desejadas. Esta é a tarefa diária para a qual o mixer foi construído, seja gerar tons para uma paleta, espaçar cores de visualização de dados ou encontrar o neutro que fica entre duas cores da marca.
Para construir famílias inteiras de uma única cor em vez de misturar duas, o gerador de tons de cores é o melhor ajuste, uma vez que mistura uma cor em direção a branco, preto e cinza para produzir tons, tonalidades e tons E quando você estiver escolhendo cores para texto ou UI, execute o resultado através do selecionador cores e uma verificação de contraste, porque uma cor que se mistura lindamente ainda pode falhar em um limite de legibilidade O fluxo de trabalho mais amplo, da escolha à verificação e ao envio, é estabelecido no Kit de ferramentas para desenvolvedores web guia.
Por que minhas cores misturadas às vezes parecem lamacentas ou escuras?
Duas coisas causam isso, e ambas são sobre o espaço de cores em vez da ferramenta A primeira é a incompatibilidade aditivo-versus-subtrativo já mencionada: média de matizes distantes em RGB deriva em direção ao cinza, então cores opostas na mistura de rodas para algo maçante A segunda é que os valores sRGB são codificados por gama, não luz linear Uma verdadeira média física da luz primeiro se converteria em espaço linear, média, depois converteria de volta, o que mantém os pontos médios mais brilhantes A maioria das ferramentas, gradientes CSS e editores de imagem interpolam diretamente em sRGB codificado por gama porque é rápido, previsível e corresponde ao que os designers esperam de um gradiente, então esse mixer faz o mesmo Se você quiser uma mistura mais brilhante, misture matizes mais próximas, incline-se no modo Tela ou alcance um espaço perceptualmente uniforme como OKLCH em seu CSS final. O ferramentas online de privacidade de dados guide explica por que, pontos médios enlameados ou não, fazer essas contas em seu navegador em vez de em um servidor é o padrão certo para o trabalho de design que você prefere manter local.
Perguntas frequentes
Como mistura duas cores?
Para misturar duas cores você calcula a média dos canais vermelho, verde e azul, ponderados por quanto de cada cor você deseja. Uma mistura 50/50 de vermelho (255, 0, 0) e azul (0, 0, 255) tem médias de (128, 0, 128), que é roxo. Esta ferramenta faz essa interpolação para você e permite deslocar o peso com o controle deslizante de proporção, para que você possa pousar em qualquer lugar entre as duas cores, em vez de apenas o ponto médio exato.
Qual é a diferença entre Mix e Multiply?
Mix é uma média ponderada que fica entre as duas cores, então misturar vermelho e azul dá roxo Multiply combina-os da maneira que a tinta sobreposta ou filtros de luz fazem, multiplicando os valores do canal, por isso sempre produz uma cor tão escura quanto ou mais escura do que ambas as entradas Multiplicar vermelho e azul dá preto, porque cada cor está faltando o canal que a outra tem Multiply é um modo de mistura da edição de imagens, não uma média simples.
Por que misturar duas cores brilhantes às vezes dá um resultado lamacento?
Porque a média dos canais RGB move o resultado para o cinza sempre que as duas cores ficam distantes na roda de cores Vermelho e verde medem para um marrom-oliva opaco em vez de um amarelo vívido, já que as cores da tela se misturam como claras, enquanto o amarelo vívido que você pode esperar vem da mistura de pigmentos Para uma mistura mais viva, misture cores que estão mais próximas na tonalidade ou experimente o modo Tela, que mantém os resultados mais brilhantes.
Posso misturar cores em HSL em vez de RGB?
Este mixer interpola em RGB, que é o que gradientes CSS e editores de imagem fazem por padrão, e ele relata o resultado em HSL também A mistura em RGB é previsível e corresponde a como um gradiente CSS de duas paradas renderiza A matiz interpoladora em HSL pode percorrer o longo caminho ao redor da roda de cores e produzir matizes inesperados entre elas, e é por isso que a interpolação RGB é o padrão mais seguro para uma mistura de uso geral.
O que o controle deslizante de proporção muda?
A proporção define quão fortemente a segunda cor, ou o resultado misturado, é aplicado sobre o primeiro Em 0 por cento você obtém a primeira cor inalterada, em 100 por cento você obtém a segunda cor completa ou mistura completa para o modo escolhido, e em 50 por cento você obtém uma divisão par Para os modos de mistura ele se comporta como opacidade de camada em um editor de imagens, desbotando a cor misturada sobre a base.
Como obtenho a cor a meio caminho entre duas cores?
Defina o modo para Mix e a proporção para 50 por cento, e o resultado é o ponto médio exato Você também pode lê-lo fora da faixa de gradiente, onde a faixa do meio é a cor do meio Para um controle mais fino, adicione mais etapas ao gradiente e copie qualquer faixa intermediária que corresponda à posição que você precisa entre as duas cores.
Para que são utilizados modos de mistura como Screen e Overlay?
São os modos de mistura de camadas dos editores de imagens, definidos para a web na especificação W3 C Compositing and Blending A tela ilumina e é usada para brilhos e realces, Multiply escurece e é usada para sombras e tonalidades, e Overlay aumenta o contraste combinando os dois A visualização deles em um mixer permite prever como duas camadas coloridas se combinarão antes de aplicá-lo em CSS ou em uma ferramenta de design.
Quais formatos de cores o mixer aceita?
O mixer aceita códigos hexadecimais (três, seis ou oito dígitos), valores rgb () e rgba (), valores hsl () e hsla () e nomes de cores CSS comuns, como coral ou rebeccapurple Cada entrada tem uma amostra de cores nativa que você pode clicar para escolher visualmente, e cada resultado é mostrado em HEX, RGB e HSL para que você possa copiar qualquer formato que sua folha de estilo precisar.
O misturador de cores é gratuito e privado?
Sim. O mixer de cores é totalmente gratuito, sem inscrição, sem marcas d'água e sem limites de uso, e todo cálculo acontece no seu navegador. As cores inseridas nunca são carregadas, então nada que você misture sai do seu dispositivo e, como a matemática é executada localmente, a ferramenta continua funcionando se você perder sua conexão após o carregamento da página.
