2 CORES · 3 ESPAÇOS · 7 ETAPAS · LOCAL
Combine duas cores HEX com uma proporção exata de 0 a 100, compare três espaços de interpolação, inspecione os valores resultantes e copie uma declaração CSS color-mix() pronta para uso. Este misturador de cores faz todos os cálculos no navegador e mostra cada cor intermediária antes de você aplicá-la a uma paleta, interface, ilustração ou estudo cromático de personagem.
Atualizado em 11 de agosto de 2026
misturador de cores
Este misturador de cores calcula uma interpolação matemática entre duas cores sRGB opacas. Escolha quanto cada extremidade contribui e use sRGB para um comportamento web familiar, sRGB linear para mistura proporcional à intensidade da luz ou OKLCH para um caminho organizado pela percepção. O resultado muda porque os três espaços interpolam coordenadas diferentes.
Na proporção padrão 50/50, #FF5A5F e #2F80ED produzem #976DA6 em sRGB, #BE6FB8 em sRGB linear e #C060D6 em OKLCH. As três respostas são válidas em seus métodos. O misturador de cores também cria sete amostras igualmente posicionadas e converte o ponto selecionado para HEX, RGB e HSB.
misturador de cores
Uma única cor central pode esconder a decisão principal: o sistema de coordenadas usado no caminho entre as extremidades. Comparar os métodos ajuda a escolher uma mistura adequada ao trabalho visual, em vez de aceitar um padrão sem explicação.
misturador de cores
O misturador de cores mostra o espaço de interpolação ao lado de cada resultado. Você troca o método sem alterar as extremidades ou a proporção, então a diferença visual vem do cálculo. Esse teste controlado facilita justificar uma escolha na revisão de design e na passagem para desenvolvimento.
misturador de cores
Cada mistura aparece como HEX em maiúsculas, RGB moderno, HSB arredondado e expressão CSS color-mix(). O misturador de cores também oferece uma escala de sete etapas para estados, gráficos, transições de ilustração e exploração de paleta, sem exigir cálculos manuais das proporções intermediárias.
misturador de cores
As extremidades, a proporção, os resultados e os valores copiados permanecem na sessão atual do navegador. O misturador de cores não envia arquivos e não exige conta. Isso ajuda ao testar cores de marca ainda não publicadas, paletas de clientes ou direções iniciais para a arte de personagens.
misturador de cores
Defina duas extremidades HEX, ajuste a proporção e compare a mesma mistura em três espaços.
misturador de cores
CSS COLOR 5
color-mix(in srgb, #FF5A5F 50%, #2F80ED 50%)Use o HEX calculado como fallback quando sua política de navegadores exigir.
misturador de cores
Selecione uma amostra para copiar seu HEX.
#FF5A5F#DC6077#BA678E#976DA6#7473BE#527AD5#2F80EDPrivado por padrão: todas as cores são misturadas localmente neste navegador.
misturador de cores
Trate a saída como uma decisão reproduzível: fixe as extremidades, compare os espaços e valide o resultado no contexto final, em vez de escolher por uma amostra isolada.
misturador de cores
Cole um HEX de três ou seis dígitos para cada extremidade ou use os seletores nativos. Dê às cores funções semânticas como superfície e destaque, em vez de chamá-las apenas de esquerda e direita. Funções estáveis facilitam discutir e documentar futuras alterações da proporção.
misturador de cores
Comece em 50/50, alterne entre sRGB, sRGB linear e OKLCH e depois mova a proporção em incrementos de um ponto. Observe luminosidade, croma e matiz separadamente. O misturador de cores preserva as extremidades durante a comparação, mantendo o experimento controlado.
misturador de cores
Copie o valor para o componente, a ilustração ou o gráfico verdadeiro. Antes de publicar, verifique contraste, cores vizinhas, temas claro e escuro e navegadores compatíveis. Uma cor central bonita não se torna automaticamente uma cor de texto acessível nem um token seguro de produção.
misturador de cores
As mesmas extremidades e porcentagens podem retornar centros visivelmente diferentes. A tabela resume o que cada método interpola, onde ele ajuda e o que deve ser verificado antes do uso.
| Método | O que interpola | Útil para | Verifique antes |
|---|---|---|---|
| sRGB | Canais vermelho, verde e azul codificados por gama | Comportamento web legado e misturas rápidas familiares | O centro pode parecer escuro ou cinza demais |
| sRGB linear | Valores RGB lineares em relação à intensidade luminosa | Composição semelhante à luz e transições de energia | O resultado pode parecer mais claro que uma mistura comum de UI |
| OKLCH | Luminosidade perceptual, croma e caminho curto de matiz | Escalas uniformes e paletas que preservam croma | Cores muito saturadas podem ser cortadas na saída sRGB |
misturador de cores
Antes de transformar uma mistura gerada em valor de produção, confirme entradas, método, condições de saída e função semântica. Assim um experimento atraente não vira um token sem explicação.
misturador de cores
Este misturador de cores interpola coordenadas de tela. Pigmentos reais interagem por absorção, dispersão, opacidade, aglutinante, concentração e substrato; duas tintas podem produzir algo que nenhum centro RGB ou OKLCH prevê. Use amostras físicas ou dados do fabricante em decisões de materiais.
misturador de cores
Os métodos e termos desta página seguem o modelo publicado de interpolação da plataforma web. Os exemplos numéricos podem ser reproduzidos com as extremidades visíveis e tornam a escolha do método auditável.
CSS Color Module Level 4 explica:
Mixing or otherwise combining colors has different results depending on the interpolation color space used.
misturador de cores
misturador de cores
misturador de cores
Não existe um espaço universalmente melhor. Use sRGB para o comportamento web legado, sRGB linear quando a intensidade luminosa importar e OKLCH quando a uniformidade perceptual ou o croma forem prioridade. Compare os três com as mesmas extremidades antes de escolher.
misturador de cores
Cada modo calcula a média de coordenadas diferentes. Canais sRGB codificados, canais RGB de luz linear e luminosidade, croma e matiz OKLCH descrevem caminhos distintos; por isso pesos iguais podem produzir centros visivelmente diferentes.
misturador de cores
Sim. Insira valores HEX de três ou seis dígitos. Este misturador de cores calcula no navegador, não armazena a paleta em servidor e não exige upload de imagem nem conta.
misturador de cores
Ele informa a um navegador compatível o espaço de interpolação, as cores de origem e suas porcentagens. Use o valor em uma propriedade de cor CSS e forneça um fallback estático testado quando a política de suporte exigir.
misturador de cores
Use como ponto de partida. Dê uma função real a cada etapa mantida, verifique contraste e estados vizinhos e remova valores sem uso. Espaçamento uniforme em um modelo não cria automaticamente um sistema de tokens acessível ou sustentável.
misturador de cores
Não. Ele interpola coordenadas digitais e não modela química de pigmentos, refletância espectral, opacidade ou substrato. Misture e teste materiais reais quando a saída final for tinta, impressão, corante ou outra cor fabricada.