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 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 os modos de mistura separáveis definidos na especificação W3 C Compositing and Blending: multiplicar, tela, sobreposição, escurecer, clarear, diferença e média Estas são as mesmas operações que editores de imagem como Photoshop e GIMP aplicam entre camadas Multiplicar 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.