PortuguêsPT

Gerador de escala de cores para Tailwind CSS (50–950)

Escolha uma cor base e um nome para ter todos os tons de 50 a 950 com a configuração pronta para colar.

Seus textos e arquivos não saem do navegador: nada é enviado para nenhum servidor.

Clique em uma amostra para copiar o HEX. O número é o contraste da cor de texto, branca ou preta, que fica mais legível sobre ela.

Tailwind v4 (@theme)
Tailwind v3 (tailwind.config.js)
Prévia
Salvo. Suas alterações já estão no ar.
ComeçarSaiba maisNovo

Como usar

  1. Escolha uma cor base ou digite um código HEX e defina o nome que vai usar nas classes, como brand.
  2. Os tons de 50 (o mais claro) a 950 (o mais escuro) são distribuídos pela luminosidade OKLCH. Com “Manter minha cor no tom mais próximo” ativado, a sua cor aparece na paleta do jeito que é.
  3. Na v4, cole o bloco @theme no seu CSS. Na v3, cole a seção colors no tailwind.config.js. Depois use classes como bg-brand-500.
  4. Veja a prévia para conferir a paleta em um botão, um selo e uma caixa de alerta.

Perguntas frequentes

Por que calcular a paleta em OKLCH?

O OKLCH se baseia na luminosidade percebida, então os tons parecem igualmente espaçados e cores como amarelo e azul não dão saltos de brilho. As cores padrão do Tailwind v4 também são escritas em oklch().

O resultado bate com as cores que vêm no Tailwind?

Não. A ferramenta usa curvas próprias de luminosidade e croma, então os valores são diferentes da paleta oficial. A ideia é montar rápido uma escala parecida a partir da cor da sua marca.

O que acontece com cores que a tela não consegue mostrar?

A luminosidade e o matiz são mantidos, e só o croma é reduzido até a cor caber no sRGB. Cores muito saturadas podem ficar um pouco mais suaves em alguns tons.

Tailwind CSS é marca da Tailwind Labs Inc. Esta ferramenta não tem vínculo com a Tailwind Labs nem é endossada por ela.

Ferramentas relacionadas

Seletor de coresHEX, RGB, HSL e CMYK em um só lugarContraste de coresTaxa de contraste com resultados AA e AAADegradê CSSDegradês lineares, radiais e cônicosArte ASCIITexto e fotos feitos com caracteres

Todas as ferramentas