Color Tools

Misturador de cores

Crie novos tons com facilidade usando este misturador de cores online. Combine dois ou mais códigos de cores HEX ou RGB, ajuste as proporções da mistura e veja as cores resultantes em tempo real.

sRGB Blended Result

#000000

RGB: 0, 0, 0 | HSL: 0°, 0%, 0%

Space Algorithm
WCAG Contrast Compliance
White Text21.00:1 ✓ Pass
Black Text1.00:1 ✕ Low

Source Colors & Weight Ratios

3 Active Slots
Ratio Weight1x
Ratio Weight1x
Ratio Weight1x

Por que usar esta ferramenta?

Por que usar esta ferramenta?

Cada página explica o que a ferramenta faz, como usá-la e responde às dúvidas mais comuns.

Como usar

Como usar

  1. Etapa 1

    Defina as cores de base

    Insira duas ou mais cores usando códigos HEX (#HEX) ou clique no seletor de cores interativo.
  2. Etapa 2

    Ajuste as proporções da mistura

    Ajuste os controles de proporção para definir o peso relativo ou a porcentagem de cada cor na mistura final.
  3. Etapa 3

    Selecione o algoritmo de espaço de cor

    Escolha sRGB, RGB linear, OKLAB ou HSL para alterar como a interpolação dos canais é calculada.
  4. Etapa 4

    Copie trechos de código ou exporte arquivos

    Copie o código HEX, RGB ou CSS color-mix() da mistura ou exporte amostras nos formatos PNG, SVG ou JSON.

Como funciona o misturador de cores online

Esta ferramenta calcula as cores resultantes interpolando matematicamente os canais de cor com diferentes algoritmos de espaço de cor, incluindo sRGB, RGB linear, OKLAB e HSL. Ao ajustar os controles de proporção, designers e desenvolvedores podem calcular códigos HEX intermediários com precisão e gerar strings W3C CSS color-mix() válidas para folhas de estilo de front-end.

Extração de cores de fotos e gráficos vetoriais

Com o recurso de extração de cores de imagens, você pode enviar qualquer arquivo gráfico ou foto. O seletor integrado extrai as amostras de cores predominantes diretamente para a área de mistura, permitindo combinar cores de marca, tons de fotografias ou paletas de ilustrações.

Recursos explicados

Integração com CSS moderno

Gere a sintaxe padrão da função W3C CSS color-mix() e propriedades personalizadas de CSS, além de valores HEX, RGB e HSL.

Extração de cores de imagens e SVG

Extraia as cores predominantes de arquivos PNG, JPG ou SVG enviados para usá-las como base da mistura.

Mistura em espaços de cor perceptuais

Alterne entre os algoritmos sRGB digital padrão, RGB linear fotométrico e OKLAB perceptual para misturar cores.

Exportação em vários formatos

Baixe as amostras calculadas como cartões de imagem PNG em alta resolução, gráficos vetoriais SVG escaláveis ou arquivos de dados JSON estruturados.

Para que você pode usar esta ferramenta?

Design para web e interfaces

Calcule cores intermediárias para estados de foco, tons de botões desativados e temas de interface acessíveis usando proporções personalizadas.

Ilustração digital e identidade visual

Simule digitalmente proporções de mistura de tintas para visualizar extensões da paleta de uma marca e tons para arte digital.

Informações da ferramenta

Tipo de ferramentaMisturador interativo de cores para web
Formatos de entrada compatíveisHEX, RGB, HSL, PNG, JPG, SVG
Espaços de cor compatíveissRGB, RGB linear, OKLAB, HSL
Opções de exportaçãoAmostra PNG, vetor SVG, dados JSON, código CSS
Modelo de processamento100% no navegador (client-side)

Benefícios

  • Gere misturas de cores matematicamente precisas na hora, sem instalar programas gráficos.
  • Copie a sintaxe padrão CSS color-mix() diretamente para folhas de estilo de aplicações web modernas.
  • Confira em tempo real as proporções de contraste de texto da WCAG para texto branco e preto sobreposto.
  • Extraia amostras de cores de marca diretamente de imagens enviadas ou arquivos vetoriais SVG.

Limitações

  • Espaços perceptuais complexos, como OKLAB, são aproximados digitalmente para a exibição no navegador.
  • Arquivos de imagem grandes enviados para extração de cores podem levar alguns segundos, dependendo do hardware do navegador.

Privacidade com processamento no dispositivo

Todos os cálculos dos canais de cor, a amostragem de imagens e a geração de arquivos acontecem localmente na memória do navegador. Suas fotos e seus gráficos enviados não são transmitidos a servidores remotos.

Sem armazenamento no servidor

Este misturador de cores online funciona inteiramente offline depois que a página é carregada. Dados do usuário, preferências de paleta e imagens enviadas não são registrados nem rastreados.

Dicas

  • Bloqueie suas cores favoritas com o ícone de cadeado antes de clicar em Randomize para encontrar novas cores que combinem.
  • Use o modo RGB linear ao misturar cores para iluminação realista, renderização 3D ou pintura em tela digital.

Perguntas frequentes

Como o misturador de cores online calcula as cores resultantes?

Ele interpola os canais vermelho, verde e azul de acordo com a proporção selecionada e o algoritmo de espaço de cor (como sRGB, RGB linear ou OKLAB) para calcular o código HEX intermediário.

Posso copiar o código CSS color-mix() diretamente para usar no desenvolvimento web?

Sim. A ferramenta gera a sintaxe padrão color-mix(in srgb, color1 ratio%, color2), pronta para uso em folhas de estilo CSS modernas.

Posso misturar cores extraídas de uma foto enviada?

Sim. Envie uma imagem ou um arquivo SVG na aba Image Extractor para selecionar amostras de cores e misturá-las na hora.

Em quais formatos posso exportar as cores misturadas?

Você pode exportar as paletas calculadas como cartões de imagem PNG, arquivos vetoriais SVG, estruturas de dados JSON ou trechos de código CSS.

Este misturador de cores é gratuito e não exige uma conta?

Sim. A ferramenta é totalmente gratuita, não exige cadastro e funciona inteiramente no navegador.