Misturador Cor

Um mixer de cores mistura duas cores em uma nova e mostra o resultado em HEX, RGB e HSL. Você dá uma primeira cor e uma segunda cor em qualquer sintaxe comum (um código hexadecimal como #4466EE, um valor rgb () ou hsl (), ou um nome CSS como coral), escolha quanto da segunda cor se dobra, e ele calcula a cor misturada instantaneamente Ele também constrói um gradiente de etapas intermediárias entre as duas cores, para que você possa ver toda a transição em vez de um único ponto médio.

A tira gradiente funciona como um gráfico de misturador de cores Insira #FF0000 e #0000FF, defina as etapas de gradiente para 3 e pressione Cores de mistura: a tira mostra cinco amostras, #FF0000, #BF0040, #800080, #4000BF e #0000FF, e o resultado misto em uma proporção de 50% é #800080 Como um misturador de cores primário mistura luz, não tinta Vermelho e amarelo dão laranja #FF8000, mas azul e amarelo dão cinza #808080 em vez do verde que uma caixa de tinta daria Não há visualização de misturador de rodas de cores, apenas as duas cores que você insere e as etapas entre elas.

A mistura direta é uma média ponderada: em uma proporção de 50 por cento cada cor contribui igualmente, e a ferramenta interpola cada canal vermelho, verde e azul linearmente entre as duas entradas Deslize a proporção em direção a 0 e você mantém a primeira cor; deslize-a em direção a 100 e você pousa na segunda Esta é a mesma matemática que o CSS usa para um gradiente de duas paradas, e é por isso que o ponto médio de um gradiente vermelho para azul é o roxo que esta ferramenta relata.

Além de uma mistura simples, o misturador oferece seis modos de mistura separáveis definidos na especificação W3 C Compositing and Blending (multiplicar, tela, sobreposição, escurecer, clarear e diferença) mais uma média simples Estas são as mesmas operações que editores de imagem como Photoshop e GIMP aplicam entre camadas Multiply sempre escurece (vermelho vezes azul é preto), tela sempre clareia (vermelho sobre azul é magenta), e diferença dá-lhe a distância canal a canal entre duas cores A proporção então age como opacidade da camada, controlando o quão fortemente o resultado misturado é aplicado sobre a primeira cor.

Tudo é executado no lado do cliente no seu navegador As cores que você insere nunca saem da guia e, como a matemática das cores é aritmética simples, a ferramenta funciona offline depois que a página é carregada Os designers procuram um mixer para encontrar uma cor a meio caminho entre uma marca primária e uma neutra, para construir escalas de tonalidade e acento ou para visualizar como duas camadas se combinarão antes de se comprometer em um arquivo de design Os desenvolvedores a usam para gerar paradas de gradiente, calcular estados de hover e traduzir um resultado misto diretamente em um valor HEX ou HSL que podem colar em CSS.