Pular para o conteúdo
Toolars
Explorar
Reportar erro

Design · utilitário Local

Misturador de cores

Color Mixer

Misture duas cores em sRGB com alfa pré-multiplicado ou sobreponha uma à outra e exporte o resultado como HEX, RGBA e CSS.

Caminho da tarefa / da entrada ao resultado

Insira as duas cores

Roda localmente · Nada é enviado

Como Misturador de cores funciona, privacidade e ferramentas relacionadas

Caminho da tarefa / da entrada ao resultado

Como misturar duas cores

  1. 01

    Insira as duas cores

    Preencha Primeira cor e Segunda cor com valores hexadecimais — #RGB, #RGBA, #RRGGBB e #RRGGBBAA são todos aceitos, então entradas translúcidas não são problema. O espaço de trabalho abre com #6D5EF8 contra #22C55E.

  2. 02

    Cálculo

    Escolha o Método de cálculo: a mistura ponderada interpola canais sRGB codificados com alfa pré-multiplicado. A composição coloca a primeira cor sobre a segunda; a ordem importa e esse modo não mostra o controle de peso.

  3. 03

    Misture as cores

    Na mistura ponderada, ajuste o peso da segunda cor de 0% (só a primeira) a 100% (só a segunda) e pressione Misturar cores. Na composição, o mesmo botão sobrepõe as camadas. Alterar uma cor, o método ou o peso limpa o resultado anterior.

  4. 04

    Leia o painel de resultado

    HEX, RGBA, CSS e pré-visualização compartilham canais de 8 bits e alfa. A transparência é mostrada sobre a página; a saída mantém o alfa.

  5. 05

    Experimente a mescla de exemplo

    Pressione Carregar exemplo para misturar #F97316 com #7C3AED com um peso de 35% — um laranja quente derivando para violeta — para você ver o fluxo completo. Redefinir devolve o par padrão a 50%.

  6. 06

    Copie ou baixe o resultado

    Copie ou baixe toolars-color-mix.json com as duas cores de origem, o método, o espaço de cor sRGB, HEX, RGBA e uma declaração CSS. secondColorWeight é incluído apenas para mistura ponderada. Todas as formas de saída compartilham o mesmo resultado de 8 bits.

Fatos da ferramenta

Processamento
No seu navegador
A entrada sai deste dispositivo
Nunca
Retenção
Nada é armazenado
Preço
Grátis

Sua entrada fica no navegador.

Misturador de cores usa seu caminho de execução local verificado e não cria um histórico oculto de entradas ou saídas.

Execução local

Roda dentro da aba atual do navegador.

Sem processamento oculto

Os dados ativos da ferramenta nunca viram um registro de documento do Toolars.

Não precisa de conta

Use o fluxo principal sem criar um perfil. Os favoritos sincronizam com sua conta depois que você entra.

Redefinição imediata

Limpe a aba e os dados de trabalho ativos desaparecem.

O que Misturador de cores realmente faz

Para criar uma transição entre o roxo e o verde da marca, use a mistura ponderada e ajuste a porcentagem da segunda cor. Para testar uma camada translúcida sobre um fundo, use a composição com a camada primeiro e o fundo depois. Confira o alfa e a prévia sobre o fundo real antes de exportar JSON; os métodos respondem a perguntas diferentes.

Perguntas frequentes

Como o controle de peso funciona?
O controle aparece só na mistura ponderada. Com 0% vale a primeira cor; com 100%, a segunda. Entre esses extremos, os canais sRGB codificados são interpolados com alfa pré-multiplicado e arredondados para 8 bits. A composição ignora o peso e coloca a primeira cor sobre a segunda.
O misturador lida com transparência?
Sim. A mistura ponderada interpola com alfa pré-multiplicado; a composição coloca a primeira cor sobre a segunda. Compare alfa e ordem das camadas no fundo desejado.
Como os canais são arredondados?
HEX, RGBA, CSS e pré-visualização compartilham canais de 8 bits e alfa. A transparência é mostrada sobre a página; a saída mantém o alfa.
Por que o painel de resultado foi limpo?
Alterar qualquer cor, o método de cálculo ou o peso limpa o resultado anterior para não confundi-lo com a configuração atual. Pressione Misturar cores novamente.
O que exatamente a exportação contém?
Copie ou baixe toolars-color-mix.json com as duas cores de origem, o método, o espaço de cor sRGB, HEX, RGBA e uma declaração CSS. secondColorWeight é incluído apenas para mistura ponderada. Todas as formas de saída compartilham o mesmo resultado de 8 bits.
Os dados são enviados para algum lugar?
Não. A mescla é calculada inteiramente nesta aba do navegador, entradas e resultados nunca saem dela, e nenhuma conta é necessária.

Continue lendo

Continuar em Design

Tarefas relacionadas, não um beco sem saída.

Passe para outro espaço de trabalho focado sem voltar ao índice completo.

Gerador de animações de carregamento CSS

CSS Loader Generator

Desenhe um carregador de anel orbital ou três pontos com tamanho, traço, velocidade e cores ajustáveis e copie CSS com reduced-motion.

Criar

Gerador de caixas de seleção CSS

CSS Checkbox Generator

Estilize uma caixa de seleção própria com tamanho, borda e cores por estado e copie CSS que mantém um input real acessível por teclado.

Criar

Gerador de interruptores CSS

CSS Switch Generator

Crie um interruptor só de CSS com trilha, botão e cores dos dois estados, e copie o código com foco e reduced-motion tratados.

Criar

Gerador de clip-path CSS

CSS Clip Path Generator

Edite vértices arrastando, pelo teclado ou por coordenadas. Quatro formas iniciais e cópia local da declaração clip-path ou do CSS completo.

Criar