Como usar: Mixer de Cores
- Digite ou escolha a Cor A e a Cor B.
- Escolha quantos passos você quer (incluindo as duas extremidades).
- Escolha um espaço de interpolação — o OKLab oferece a mistura mais suave e uniforme.
- Clique em uma amostra para copiar uma cor, ou copie o conjunto completo como variáveis CSS,
color-mix()ou JSON.
Para que serve um misturador de cores?
Ele calcula cores igualmente espaçadas entre dois pontos extremos. Com 5 passos entre azul e âmbar, você obtém azul, três cores de transição e âmbar — útil para gradientes com várias paradas, escalas de visualização de dados, indicadores de progresso, bordas sutis entre duas cores de superfície e estados de hover com tema.
Por que o espaço de interpolação importa
| Espaço | Resultado | Ideal para |
|---|---|---|
| OKLab | Passos perceptualmente uniformes, sem um meio turvo | A maior parte do trabalho de UI, gradientes, escalas de gráficos |
| OKLCH | Percorre a roda de matiz, mantendo as cores vivas | Gradientes arco-íris e de marca |
| sRGB | O padrão clássico dos navegadores; os pontos médios podem ficar cinza ou escuros | Reproduzir designs legados |
| sRGB linear | Mistura de luz fisicamente correta, pontos médios mais claros | Simular a mistura de luz real |
| HSL | Baseado em matiz, com luminosidade percebida irregular | Variações rápidas de matiz |
Misturar cores complementares, como azul e amarelo, em sRGB produz um cinza opaco no meio; o OKLab mantém a transição limpa. Por isso o CSS moderno permite escolher o espaço explicitamente.
Misturando cores com CSS nativo
Todos os navegadores atuais suportam color-mix() e dicas de interpolação em gradientes, então muitas vezes você pode dispensar valores fixos:
.border { border-color: color-mix(in oklab, var(--surface), var(--text) 15%); }
.hero { background: linear-gradient(in oklch 90deg, #2563eb, #f59e0b); }Os passos gerados continuam úteis para ferramentas de design, templates de e-mail, gráficos desenhados em canvas/SVG e em qualquer lugar onde funções CSS não estão disponíveis. Para criar uma escala completa de claro a escuro a partir de uma cor, use o Gerador de Cores Tailwind; para código de gradiente com várias paradas, use o Gerador de Gradiente CSS.
Também pesquisado como: misturar cores, interpolação de cores, passos de cor, color-mix, gradiente de cores, misturar duas cores.
Ferramentas que combinam com: Mixer de Cores
- Conversor OKLCH — Explore o espaço de cor OKLCH, perceptualmente uniforme, com controles deslizantes em tempo real, veja se a cor cabe no sRGB e copie os fallbacks HEX, RGB e HSL correspondentes.
- Conversor de Cores — Cole qualquer cor CSS — HEX, rgb(), hsl(), hwb(), oklch() ou um nome como tomato — e veja todos os outros formatos na hora, além de uma paleta pronta de 50 a 950.
- Nome da Cor — Cole um código HEX para descobrir o nome mais próximo da cor e nomes de tokens limpos para o seu CSS, SCSS, JavaScript ou configuração do Tailwind.
- Conversor HEX para RGBA — Cole um código HEX, arraste o slider de opacidade e copie o CSS exato que você precisa: rgba() tradicional, rgb( / alpha) moderno ou HEX de 8 dígitos.
Perguntas frequentes
Qual interpolação devo usar?
As cores das extremidades entram na contagem de passos?
O que é color-mix() no CSS?
color-mix(in oklab, red, blue 30%) mistura duas cores no navegador. É suportado em todos os navegadores atuais e funciona com variáveis CSS, então as misturas são atualizadas automaticamente com o seu tema.