Como misturar cores: RGB, HSL e CMYK
Guia prático para misturar cores digitalmente em RGB, HSL e CMYK para design, ilustração e impressão.
Por que misturar cores digitalmente?
A mistura de cores é fundamental em design, ilustração, pintura, branding e trabalho de UI. Fazer isso em software é rápido, preciso e reversível — dá para testar centenas de variações em minutos e desfazer o que não funcionar. A mistura digital também permite exportar valores exatos em hex, RGB, HSL ou CMYK para outras ferramentas.
Os dois sistemas principais são o aditivo (RGB, usado em telas) e o subtrativo (CMYK, usado em impressão). Eles se comportam de forma diferente, então escolher o modelo certo conforme o meio é essencial.
Casos de uso comuns
- Design UI: criar paletas de marca e variantes de componentes
- Pintura digital: amostrar e ajustar tons de pele, céus e sombras
- Preparação de impressão: traduzir cores de tela para CMYK com precisão
- Identidade de marca: construir um sistema de cores consistente a partir de um tom base
- Design web: gerar estados hover, focus e disabled a partir de uma cor base
Método 1: Use o misturador de cores gratuito do UtilBoxx (Recomendado)
Nosso misturador de cores permite combinar duas ou mais cores em RGB, HSL ou CMYK, com pré-visualização ao vivo. Veja como usar:
- Vá para utilboxx.com/pt/tools/color/mixer
- Escolha duas ou mais cores de origem
- Selecione um modo de mistura (média, multiplicar, screen, aditivo, subtrativo)
- Ajuste o peso de cada cor com os controles deslizantes
- Copie o valor hex, RGB, HSL ou CMYK resultante
Por que este método funciona:
- Pré-visualização ao vivo ao ajustar as entradas
- Múltiplos modelos de mistura para tela e impressão
- Controles de peso para controle fino
- Cópia com um clique para sua ferramenta de design
- 100% no navegador, sem upload de imagens
Método 2: Misture em Figma, Photoshop ou Procreate
Ferramentas profissionais de design têm misturadores potentes integrados. No Figma, abra o seletor de cor e use os controles alfa para misturar com outra amostra. No Photoshop, use uma camada com modo de mesclagem para misturar cores pintadas. No Procreate, solte uma cor sobre outra na tela.
Essas ferramentas são essenciais para ilustração e branding complexo.
Método 3: Use mistura matemática de cores
Para casos simples, tire a média dos canais RGB:
``` mixed = (color1 + color2) / 2 ```
Para resultados mais precisos, misture em RGB linear ou use um modelo perceptual como OKLCH. Bibliotecas como Chroma.js e culori fazem isso em JavaScript:
```javascript import { mix } from "culori"; mix("#ff0000", "#0000ff", 0.5); // roxo intermediário ```
Perguntas frequentes
Qual a diferença entre misturar em RGB e CMYK?
RGB é aditivo — combina luz. Misturar vermelho e verde dá amarelo. CMYK é subtrativo — combina pigmentos. Misturar ciano e amarelo dá verde. Os mesmos valores numéricos ficam muito diferentes em cada sistema.
Por que minhas cores misturadas ficam turvas na tela?
Geralmente significa que você está misturando cores complementares ou muito distantes. Tente misturar tons mais próximos, ou use um espaço perceptual como OKLCH para transições mais limpas.
Como igualar uma cor de marca entre tela e impressão?
Converta sua cor de marca de sRGB para CMYK usando um perfil de cor. Note que algumas cores brilhantes de tela não têm equivalente na impressão e vão mudar. Peça uma prova à sua gráfica para maior precisão.
Posso salvar uma paleta personalizada?
Sim. Use o misturador de cores do UtilBoxx para gerar seus tons e depois cole em uma ferramenta de design system como Figma, Coolors ou seu código.
Conclusão
A mistura digital de cores traz velocidade, precisão e reprodutibilidade. Para uma forma rápida e visual de misturar cores e exportar valores, o misturador de cores do UtilBoxx é a ferramenta mais fácil de manter sempre à mão.