HedgieTools

Gerador de paletas

Parta da sua cor principal e obtenha uma paleta de interface completa: secundária, terciária, sucesso, aviso, perigo e neutras, com seus tons e verificações de contraste.

Sua cor principal

Digite um valor ou escolha uma cor: o restante da paleta é montado a partir dela.

Secundária e terciária
Formato do valor

Digite um valor HEX, como #2563EB, ou clique no quadrado para escolher a cor.

Sua paleta

Clique em um valor ou em um tom (50 a 950) para copiá-lo. O lápis troca uma cor sugerida por outra de sua escolha, que permanece fixa quando você muda a cor principal.

  • —

    Primária

    sua cor
  • —

    Secundária

    complementar
  • —

    Terciária

    quase complementar
  • —

    Info

    azul
  • —

    Sucesso

    verde
  • —

    Atenção

    laranja
  • —

    Perigo

    vermelho
  • —

    Neutro

    cinza tingido

Tokens dos temas claro e escuro

As cores funcionais da sua interface, prontas para o tema claro e o escuro. Cada uma aponta para um tom da paleta. Clique para copiar.

  • --backgroundFundo da página
  • --surfaceCartões e painéis
  • --surface-mutedÁreas secundárias
  • --borderBordas e divisores
  • --textTexto principal
  • --text-mutedTexto secundário
  • --primaryBotões e links
  • --primary-hoverEstado ao passar o cursor
  • --on-primaryTexto sobre a cor primária
  • --focus-ringContorno de foco
  • --secondaryDestaque secundário
  • --tertiaryDestaque terciário
  • --infoInformações
  • --info-softFundo de informação
  • --successSucesso
  • --success-softFundo de sucesso
  • --warningAtenção
  • --warning-softFundo de aviso
  • --dangerPerigo, erro
  • --danger-softFundo de erro

Cores que combinam

As harmonias clássicas em torno da sua cor principal, para ilustrações, gráficos ou destaques.

  • Complementar

    a cor oposta

  • Complementar dividida

    mais suave que a oposta

  • Análoga

    as cores vizinhas

  • Tríade

    três cores equilibradas

  • Tétrade

    quatro cores em quadrado

  • Monocromática

    um matiz, várias intensidades

Pré-visualização e contraste

A paleta aplicada a alguns elementos de interface e a legibilidade de cada combinação segundo as regras WCAG.

Tema da pré-visualização
Título da páginaTexto secundário, menos importante, abaixo do título.
Um cartão com um link e botões.
PrimáriaSecundáriaTerciária
Info · Há uma atualização disponível.
Sucesso · Suas alterações foram salvas.
Atenção · Sua assinatura expira em breve.
Erro · O pagamento falhou.
  • Texto sobre o fundo
    Relação—Texto normal—Texto grande—AAA—
  • Texto secundário sobre o fundo
    Relação—Texto normal—Texto grande—AAA—
  • Link sobre o fundo
    Relação—Texto normal—Texto grande—AAA—
  • Botão primário
    Relação—Texto normal—Texto grande—AAA—
  • Botão secundário
    Relação—Texto normal—Texto grande—AAA—
  • Texto terciário sobre o fundo
    Relação—Texto normal—Texto grande—AAA—
  • Alerta de informação
    Relação—Texto normal—Texto grande—AAA—
  • Alerta de sucesso
    Relação—Texto normal—Texto grande—AAA—
  • Alerta de aviso
    Relação—Texto normal—Texto grande—AAA—
  • Alerta de perigo
    Relação—Texto normal—Texto grande—AAA—

Exportar

Obtenha a paleta no formato escolhido acima (HEX).

Informe uma cor principal para gerar o código.

Variáveis CSS da paleta (--color-primary-500…). Os tokens apontam para essas variáveis; ative o tema escuro com data-theme="dark" no elemento html.

Sobre o gerador de paletas

Escolha a cor principal da sua marca e receba tudo o que uma interface precisa em torno dela: cores de apoio, cores de estado, neutros, tons, tokens para os temas claro e escuro, verificação de contraste e código para colar, tudo sem sair do seu navegador.

Uma paleta completa a partir de uma cor

A ferramenta deriva da sua cor principal uma cor secundária e uma terciária, as cores de estado (informação, sucesso, aviso, perigo) adaptadas ao estilo dela e cinzas levemente tingidos para fundos e textos.

Tons prontos para usar

Cada cor vem em onze tons, do mais claro (50) ao mais escuro (950), para fundos, bordas, estados ao passar o cursor e textos. Se uma cor sugerida não servir, troque pela sua: os tons dela acompanham.

Tokens dos temas claro e escuro

Fundo, superfície, borda, texto, passagem do cursor, foco e fundos de alerta: cada cor funcional aponta para um tom da paleta, com um valor para o tema claro e outro para o tema escuro.

Contraste verificado

Cada combinação de texto e fundo é avaliada segundo as regras WCAG: 4,5:1 para texto normal, 3:1 para texto grande e 7:1 para o nível AAA.

Exportar para CSS, Tailwind, JSON

Copie cada valor em HEX, RGB, HSL ou OKLCH, ou baixe um arquivo de variáveis CSS, um tema Tailwind v4, uma configuração Tailwind v3, JSON ou uma lista simples. Tudo acontece no seu navegador: nada é enviado nem salvo.

Ferramentas relacionadas