Color
Mixer
Misture duas cores e obtenha o resultado instantaneamente — com valores HEX, RGB e HSL.
① Escolha a Cor A e a Cor B ② Arraste o controle para definir a proporção ③ Copie o resultado misturado
Cor A
Cor B
Predefinições de par de cores:
RGB Blending
Linear channel interpolation
Ratio
0% = Color A · 100% = Color B
Output
HEX, RGB and HSL formats
Como funciona a mistura de cores?
Mistura de cores digital com interpolação RGB linear: resultado = cor1 + (cor2 − cor1) × proporção, aplicada a cada canal R, G, B. A 50% obtém a média aritmética; a 25% o resultado inclina-se 75% para a Cor A. É o mesmo algoritmo da função CSS
color-mix() e mix-blend-mode, e reflete o motor de blending do Figma. Copie o resultado como HEX, RGB ou HSL diretamente no código. Para tokens de design e paletas de marca, encadeie resultados.Perguntas frequentes
O misturador usa interpolação linear no espaço RGB. Cada canal (R, G, B) é misturado com a fórmula: resultado = cor1 + (cor2 - cor1) × proporção. A 0% obtém a Cor A, a 100% a Cor B, a 50% a média aritmética de ambas.
A mistura RGB é aditiva e trabalha com luz. Misturar luz vermelha e verde dá amarelo, enquanto misturar tintas vermelhas e verdes dá um castanho baço. O misturador digital usa mistura RGB (aditiva).
Na mistura no espaço RGB, o ponto médio de duas cores saturadas complementares atravessa frequentemente uma área de baixa saturação (cinzenta), uma vez que a interpolação linear RGB não preserva o percurso do matiz.
A ferramenta fornece três formatos. Use o código HEX diretamente em CSS. Use RGB com notação rgb(). Em CSS moderno pode usar color-mix(): color-mix(in srgb, #cor1 50%, #cor2).
Esta ferramenta mistura exatamente duas cores. Para misturar múltiplas cores, encadeie os resultados: misture primeiro a Cor A e B, depois o resultado com a Cor C.
O controlo vai de 0% (100% Cor A) a 100% (100% Cor B). A 50% ambas as cores contribuem igualmente. A 25% o resultado inclina-se 75% para a Cor A.
Casos de uso comuns: gerar cores de transição entre cores de marca, criar estados intermédios para elementos interativos, construir rampas de cores para visualizações de dados.