Misturador de cores — Misture duas cores

Misture duas cores de ecrã

Misturar cores é útil quando precisa de um estado hover entre dois tokens, do ponto médio de um gradiente, de uma cor de transição para um gráfico ou de uma exploração rápida da relação entre duas cores de marca. Este misturador de cores combina duas cores selecionadas interpolando os seus canais vermelho, verde e azul. Mova o controlo de proporção em direção à Cor B para aumentar a sua contribuição e copie o resultado como HEX, RGB ou HSL para CSS, documentação ou design tokens.

A mistura RGB descreve como os ecrãs combinam a luz. Isso torna-a perfeita para o trabalho web, mas não é o mesmo que misturar tintas: o ponto médio entre azul e amarelo num ecrã não se comporta como a mesma mistura em pigmento físico. No design de interfaces, contudo, a mistura RGB é prática porque o navegador apresenta as cores como valores de ecrã. A pré-visualização atualiza-se instantaneamente para que possa avaliar o resultado antes de o copiar.

Usar proporções no design de interfaces

A proporção controla o equilíbrio entre as duas cores de entrada. Com 0 por cento, o resultado é a Cor A. Com 100 por cento, é a Cor B. Valores entre 10 e 25 por cento são frequentemente úteis para estados hover subtis ou superfícies tingidas, porque a cor original continua dominante. Valores perto de 50 por cento são melhores para paletas de transição, pontos médios de gradientes e escalas de cor em gráficos. Se o resultado parecer baço, aumente depois a saturação em HSL ou escolha cores de origem mais afastadas.

Copiar tokens de cor fiáveis

Quando encontrar uma mistura útil, copie o formato que melhor se adapta ao seu fluxo de trabalho. O HEX é compacto para entregar designs, o RGB é útil quando precisa de valores de canal ou sobreposições com alfa, e o HSL é mais fácil de ajustar em tom, saturação ou luminosidade depois de misturar. Como a ferramenta funciona localmente, pode experimentar com segurança paletas de marca por publicar ou cores de clientes. Teste sempre a cor final em contexto, sobretudo se for usada atrás de texto ou junto a cores de estado importantes.