WerklyTools
Esc
↑↓ navegar↵ abrir
PT
Pague-me um café

Gerador de paletas de cores

Parta da cor da sua marca e obtenha uma escala completa de 50 a 950, perceptualmente uniforme e pronta para o seu design system, junto com combinações harmônicas. A cor original é mantida exata no passo correspondente.

Processado 100% no seu navegador

Como posso verificar?

Seus arquivos nunca são enviados: são processados no seu dispositivo. Verifique você mesmo: carregue a página, desligue o Wi-Fi e a ferramenta continua funcionando. Ou abra as ferramentas de desenvolvedor do navegador (F12), aba «Rede»: nenhum arquivo sai do seu dispositivo.

Escala 50–950
Harmonias
Exportar
Ctrl + Enter executarCtrl + C copiar resultado
Como usar
  1. 1Digite a cor base em qualquer formato ou clique em «Aleatória» para se inspirar.
  2. 2Dê um nome à paleta (por exemplo «brand» ou «primary»).
  3. 3Escolha uma harmonia para ver cores que combinam com a base.
  4. 4Exporte a escala como variáveis CSS, Tailwind, SCSS ou JSON, ou clique em um tom para copiá-lo.
Casos de uso
  •  Criar a escala de cores de um design system ou de um tema do Tailwind CSS.
  •  Gerar estados de hover, fundos suaves e bordas a partir de uma única cor da marca.
  •  Encontrar cores secundárias e de destaque que combinem.
  •  Compartilhar uma paleta com a equipe por meio de um link.
Perguntas frequentes
Por que a escala é calculada em OKLCH e não em HSL?
No HSL, um amarelo e um azul com a mesma «luminosidade» parecem muito diferentes. O OKLCH é perceptual: cada passo tem a mesma claridade aparente, seja qual for o matiz, como nas paletas do Tailwind CSS v4.
O que significam os números de 50 a 950?
É a convenção dos design systems modernos: 50 é o tom mais claro (fundos), 500–600 costumam ser os principais (botões) e 900–950 os mais escuros (texto).
Minha cor original aparece na paleta?
Sim. Ela é colocada exatamente no passo de luminosidade mais parecida, marcado com um ponto, e os demais tons são gerados ao redor com o mesmo matiz.
Como uso a paleta no Tailwind CSS?
No Tailwind v4, cole o bloco @theme no seu CSS; no Tailwind v3, adicione o objeto em theme.extend.colors no tailwind.config.js. Depois use classes como bg-brand-500 ou text-brand-900.
Ferramentas relacionadas
Gerador de border-radius CSSAjuste o arredondamento de cada canto com controles deslizantes e veja o resultado ao vivo. Use um único raio, um por canto ou raios elípticos para formas orgânicas, em px, % ou rem. Copie o CSS quando gostar.
Gerador de box-shadow CSSDesenhe sombras realistas empilhando várias camadas, como fazem os melhores design systems. Ajuste deslocamento, desfoque, expansão, cor e opacidade de cada camada e copie o resultado em CSS ou como classe Tailwind.
Verificador de contraste de cores WCAGEscolha a cor do texto e a do fundo e veja na hora a taxa de contraste e se ela cumpre os níveis AA e AAA das diretrizes de acessibilidade WCAG. Se não cumprir, a ferramenta sugere uma cor parecida que passa. Tudo acontece no seu navegador.
Conversor de cores (HEX, RGB, HSL, CMYK, OKLCH)Digite uma cor em qualquer formato — #hex, rgb(), hsl(), hwb(), oklch() ou um nome como «tomato» — e obtenha na hora todas as equivalências, o contraste WCAG sobre branco e preto e uma escala de tons e sombras.
Gerador de gradientes CSSDesenhe fundos com gradiente arrastando paradas de cor sobre uma barra, escolha o tipo (linear, radial ou cônico) e copie um CSS pronto para produção, com cor de fallback e versão moderna em OKLCH sem zonas acinzentadas.
Gerador de CSS GridConfigure colunas, linhas e espaços com controles deslizantes e veja o resultado ao vivo. Copie o CSS e o HTML prontos para colar no seu projeto.