Pular para o conteúdo
Toolars
Explorar

Gerador de harmonias de cores

Color Harmony Builder

Monte paletas de cinco cores a partir de uma semente com regras fixas — análogas, complementares, tríades — e selos de contraste em cada amostra.

Processamento local

Detalhes do processamento

Os dados da ferramenta são processados no seu dispositivo.

Esta ferramenta pode baixar recursos. Os serviços de conta são separados.

Informações de privacidade
Reportar erro

Caminho da tarefa / da entrada ao resultado

Como montar uma harmonia de cinco cores

  1. 01

    Defina a cor semente

    Digite um valor hexadecimal de seis dígitos em HEX semente — o prefixo # é opcional — ou escolha a cor visualmente com o Seletor da semente. Os dois campos ficam sincronizados, e o espaço de trabalho abre com a semente #5D4DF1.

  2. 02

    Escolha a regra de harmonia

    Escolha Análoga, Complementar, Complementar dividida, Triádica, Tetrádica ou Monocromática. O mecanismo aplica deslocamentos fixos de matiz e depois fixa a amostra central na cor semente exata; as outras nem sempre caem nos ângulos teóricos. Monocromática mantém o matiz e varia saturação e luminosidade.

  3. 03

    Defina a meta de contraste

    Escolha uma Meta de contraste do texto: 3:1 para texto grande, 4,5:1 para texto corrido AA ou 7:1 para texto corrido AAA — o padrão é 4,5:1. Cada amostra é medida contra preto ou branco, o que for mais legível sobre ela.

  4. 04

    Gere a paleta

    Pressione Gerar paleta. Cinco amostras aparecem, e a do meio é sempre exatamente a sua cor semente — as outras quatro deslocam matiz, saturação e luminosidade ao redor dela dentro de intervalos limitados, então a rampa continua utilizável em vez de derivar para neon ou lama.

  5. 05

    Leia os selos de contraste

    Cada amostra mostra seu valor hexadecimal, sua razão de contraste e um selo Aprovado ou Abaixo da meta, com o texto da amostra renderizado em preto ou branco — a cor que venceu a comparação de contraste. Um selo Abaixo da meta significa escolher um vizinho mais escuro ou mais claro para texto, não que a cor está quebrada.

  6. 06

    Copie o CSS ou baixe o JSON

    Copiar CSS copia um bloco :root comentado com as custom properties --palette-1 a --palette-5. Baixar JSON salva toolars-palette.json, que registra a semente, a harmonia, a meta de contraste e os dados de contraste de cada cor, junto com os campos aiModel e api explicitamente definidos como null.

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.

Gerador de harmonias 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 Gerador de harmonias de cores realmente faz

Um projeto paralelo precisa de uma paleta que pareça deliberada, não aleatória: uma cor primária, seus tons de apoio e a prova de que o texto continua legível sobre cada uma. Escolher harmonias no olho deriva a cada revisão, então o Gerador de harmonias de cores aplica uma regra fixa à sua semente e mostra a matemática de contraste ao lado de cada amostra. O motor é determinístico — a mesma semente e regra sempre retornam as mesmas cinco cores — então um colega de equipe pode reproduzir a paleta exatamente. Toda a execução funciona sem rede, e as exportações entram direto em uma folha de estilos ou em um arquivo de tokens de design.

Perguntas frequentes

A paleta é gerada por IA?
Não, e o espaço de trabalho deixa isso claro acima dos controles: é um motor de harmonia local e determinístico, sem modelo de IA ou API. A mesma semente e regra sempre produzem as mesmas cinco cores, então o resultado é reproduzível em uma revisão de design.
Que valores de semente são aceitos?
Uma cor hexadecimal de seis dígitos como #5D4DF1, com ou sem o # inicial. Formas abreviadas de três dígitos e outras notações são rejeitadas com uma mensagem que indica o formato esperado, e o seletor de cores sempre produz uma semente válida.
Por que a amostra do meio corresponde exatamente à minha semente?
Por decisão de design: a terceira posição na rampa é fixada no valor da semente para que a paleta continue ancorada na cor que você escolheu. As duas amostras de cada lado são derivadas ao redor dela — a regra de harmonia move o matiz, enquanto a luminosidade avança para fora e a saturação diminui em direção às bordas.
Como o selo de contraste é calculado?
A razão de contraste de cada amostra é calculada a partir da luminância relativa contra o preto e contra o branco, e a melhor das duas é mostrada ao lado do valor hexadecimal. A amostra passa quando essa razão atinge sua meta escolhida de 3:1, 4,5:1 ou 7:1.
O que exatamente as duas exportações contêm?
Copiar CSS gera um bloco :root com --palette-1 a --palette-5 sob um comentário que nomeia a harmonia e a semente. O download JSON registra o nome do motor, os campos aiModel e api definidos como null, sua semente, harmonia e meta de contraste, e cada cor com seu hexadecimal, cor de texto vencedora, razão de contraste e sinalizador de aprovação. O CSS também exporta --palette-N-text para cada amostra; o JSON mantém a razão de contraste não arredondada.
Algo sai do meu navegador?
Não. O painel está explicitamente marcado como Sem rede: a semente, as cores geradas e as exportações ficam nesta aba, e nenhuma conta é necessária.

Continue lendo

Guias

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

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

Gerador de caixas de seleção CSS

CSS Checkbox Generator

24 modelos de caixa: oito marcas × três transições; teste a prévia nativa com clique ou Espaço.

Criar

Gerador de interruptores CSS

CSS Switch Generator

18 modelos de interruptor: seis formas × três transições; teste com clique ou teclado.

Criar

Gerador de clip-path CSS

CSS Clip Path Generator

24 formas de recorte, parâmetros e pontos de polígono editáveis; exporte CSS ou uma declaração.

Criar