Pular para o conteúdo
Toolars
Explorar
Reportar erro

Design · utilitário Local

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.

Caminho da tarefa / da entrada ao resultado

Defina a cor semente

Roda localmente · Nada é enviado

Como Gerador de harmonias de cores funciona, privacidade e ferramentas relacionadas

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

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