Pular para o conteúdo
ToolMug

Use ↑ ↓ para navegar, Enter para abrir, Esc para fechar.

Gerador de paleta de cores

Clique em Gerar (ou aperte a barra de espaço) para uma paleta nova. Trave as cores que quiser manter, escolha uma harmonia como análogas ou complementares e veja de relance quais cores são legíveis como texto sobre cada fundo. Copie o resultado como variáveis CSS, cores de tema do Tailwind ou códigos HEX.

Roda no seu navegador — nada do que você digita é enviado

  • 🎨

    #22333B

    Texto Branco 13,1:1 AAA

  • 🎨

    #3D6B72

    Texto Branco 5,9:1 AA

  • 🎨

    #7FB3A8

    Texto Preto 8,9:1 AAA

  • 🎨

    #E6D3A3

    Texto Preto 14,2:1 AAA

  • 🎨

    #F4EFE6

    Texto Preto 18,3:1 AAA

Exportar

:root {
  --color-1: #22333b;
  --color-2: #3d6b72;
  --color-3: #7fb3a8;
  --color-4: #e6d3a3;
  --color-5: #f4efe6;
}

Prévia

Um título na sua paleta

O texto de corpo usa a cor mais escura sobre a mais clara, para você avaliar se uma página feita com esta paleta é fácil de ler.

BotãoUm link

Texto sobre o fundo 11,4:1 · link sobre o fundo 5,2:1

Quais cores funcionam juntas como texto e fundo

Cada célula mostra texto na cor da linha sobre a cor da coluna. AA (4,5:1) é o mínimo do WCAG para texto de corpo, AAA é 7:1 e «AA grande» (3:1) só basta para títulos grandes ou em negrito.

Texto ↓ / fundo →#22333b#3d6b72#7fb3a8#e6d3a3#f4efe6
#22333b2,2✗5,6AA8,9AAA11,4AAA
#3d6b722,2✗2,5✗4AA grande5,2AA
#7fb3a85,6AA2,5✗1,6✗2,1✗
#e6d3a38,9AAA4AA grande1,6✗1,3✗
#f4efe611,4AAA5,2AA2,1✗1,3✗
Esta ferramenta está funcionando bem para você?

Como usar

  1. Clique em Gerar ou aperte a barra de espaço até ver cores de que goste.
  2. Clique em 🔒 em uma cor para mantê-la, ou digite um código HEX ou use 🎨 para definir a sua; a próxima paleta é montada em torno das cores travadas.
  3. Confira a tabela de contraste, copie a paleta no formato de que precisa ou baixe como PNG.

Opções explicadas

Harmonia de cores
Análogas usa tons vizinhos, monocromática um único tom com luminosidades diferentes, complementares tons opostos, tríade três tons igualmente espaçados e complementares divididas um tom mais os dois ao lado do seu oposto. “Qualquer” escolhe uma ao acaso a cada vez.
Cores travadas
Ficam exatamente como estão. A primeira cor travada que não for cinza também define o tom base das outras.
Tabela de contraste
Cada célula é texto de uma cor da paleta sobre outra. AA (4,5:1) é o mínimo do WCAG 2 para texto de corpo, AAA é 7:1, e 3:1 só basta para texto grande ou em negrito.
Link para compartilhar
As cores ficam salvas no endereço da página (#22333b-3d6b72-…), então você pode guardar a paleta nos favoritos ou enviá-la a alguém.

Escolhendo uma harmonia

Harmonia Aparência Boa para
Monocromática Um tom do escuro ao claro Interfaces calmas, tons de marca, gráficos com uma única série
Análogas Tons vizinhos, por exemplo, de verde-azulado a azul Paletas naturais e suaves para fotos e ilustrações
Complementares Dois tons opostos Uma cor de destaque que se sobressai das demais
Tríade Três tons separados por 120° Designs alegres e coloridos
Complementares divididas Um tom e os dois ao lado do seu oposto Contraste com menos choque que as complementares

Como montar uma paleta que funcione em um site

  1. Use a cor mais clara como fundo da página e a mais escura para o texto — a prévia mostra exatamente essa combinação.
  2. Escolha a cor mais forte para botões e links. Confira o contraste dela com o fundo; links precisam de 4,5:1 para passar no AA.
  3. Deixe as cores intermediárias para bordas, painéis, etiquetas e ilustrações, onde o contraste importa menos.

Perguntas frequentes

Como as cores são escolhidas?

No espaço de cor OKLCH, que se aproxima de como o olho vê o brilho das cores. Os tons seguem a harmonia escolhida, a luminosidade vai do escuro ao claro ao longo da paleta e a saturação fica dentro do que uma tela sRGB comum consegue mostrar.

Como faço uma paleta a partir da cor da minha marca?

Digite sua cor em qualquer campo, trave-a, escolha Monocromática ou Análogas e clique em Gerar. As outras cores são montadas em torno do tom dela.

Que cor devo usar para o texto?

Cada amostra mostra se texto preto ou branco fica mais legível sobre ela e a taxa de contraste. Para texto em cores da paleta, use a tabela: só os pares marcados com AA ou AAA são seguros para texto de corpo.

Como uso a exportação para Tailwind?

É um bloco @theme do Tailwind CSS v4. Cole no seu arquivo CSS principal e você ganha classes como bg-palette-1 e text-palette-3.

Privacidade

Esta ferramenta funciona inteiramente no seu navegador. Seus arquivos e textos são processados no seu dispositivo e nunca são enviados aos nossos servidores.

Ferramentas relacionadas