Misturador de Cores
Misture duas cores e obtenha a mistura mais cada etapa entre elas em HEX, RGB e HSL. Escolha a mistura sRGB, Linear RGB ou OKLab perceptual, defina a opacidade por cor e copie o gradient CSS correspondente.
Entrada
Escolha uma cor, ou digite um valor HEX diretamente.
Quantas cores intermediárias gerar. As duas cores originais estão sempre incluídas.
sRGB corresponde à maioria dos misturadores; OKLab mantém o brilho uniforme e evita tons médios lamacentos.
Saída
As duas cores misturadas em partes iguais.
Your color palette will appear here.
Cada parada calculada é escrita, então uma rampa Linear RGB ou OKLab persiste em CSS simples.
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/color-mixer \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"startColor": "#2563eb",
"startOpacity": "100",
"endColor": "#f59e0b",
"endOpacity": "100",
"steps": "3",
"colorSpace": "srgb"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `color-mixer` tool (Color Mixer) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/color-mixer/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Misturador de Cores — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
O que esta ferramenta faz
O Misturador de Cores mistura duas cores e mostra tudo entre elas. Escolha uma cor inicial e uma cor final, escolha quantas etapas você quer, e você obtém a mistura 50/50, a rampa completa de cores intermediárias em HEX, RGB e HSL, e um gradient CSS pronto para colar com as mesmas paradas.
É o equivalente digital de misturar duas tintas — exceto que você pode ver cada nuance intermediária de uma vez, copiar qualquer uma delas com um clique e controlar exatamente como as duas cores são calculadas em média.
Como usar
- Defina a Cor Inicial e a Cor Final (use o seletor ou digite um valor HEX).
- Arraste Etapas Entre para quantas cores intermediárias você deseja. As duas cores originais estão sempre incluídas.
- Opcionalmente, reduza Opacidade Inicial ou Opacidade Final para misturar cores translúcidas.
- Copie a mistura 50/50, clique em qualquer amostra para copiar seu HEX ou pegue o gradient CSS.
Tudo é executado no seu navegador — sem upload, sem conta, sem limites.
Escolhendo um espaço de cor de mistura
Esta é a configuração que a maioria dos misturadores de cores não oferece, e muda muito o resultado.
- sRGB calcula a média dos números de canal brutos. É o que quase todo misturador faz, e corresponde ao que as pessoas esperam — mas misturar entre duas cores saturadas geralmente cai em um meio lamacentista e escuro.
- Linear RGB converte para fora da curva gama sRGB primeiro, mistura a luz real, depois converte de volta. É assim que a luz se combina fisicamente, então o meio permanece mais brilhante.
- OKLab mistura em um espaço perceptualmente uniforme. A luminosidade e o matiz se movem a uma taxa visual constante, então a rampa parece uniformemente espaçada para o olho — a melhor escolha para escalas de sistema de design e gradientes.
Azul para amarelo é o teste clássico: em sRGB o ponto médio se move para cinza, enquanto OKLab o mantém parecendo uma transição real.
Por que o gradient CSS lista cada parada?
Um navegador interpolando um gradient linear-gradient() de duas paradas o faz em sRGB. Se você misturou em Linear RGB ou OKLab, um gradient de duas paradas descartaria isso. Escrever cada parada calculada fixa a rampa que você realmente escolheu, e funciona em todos os navegadores.
O que significam os valores hex de 8 dígitos?
Quando uma cor misturada fica translúcida, a ferramenta muda para #rrggbbaa (e rgba() / hsla()), onde o último par é o canal alfa. Cores totalmente opacas permanecem na forma familiar de 6 dígitos. A opacidade sempre é misturada linearmente, independentemente do espaço de cor escolhido.
E se eu quiser tonalidades de uma cor em vez de uma mistura de duas?
Use o Gerador de Tons e Sombras de Cores, que mistura uma cor base única em direção ao branco e preto. Para um gradient multi-parada com ângulos e posições, tente o Gerador de Gradient CSS, e para extrair cores de uma imagem existente use o Extrator de Paleta de Cores.