Ferramenta prática de cores

Gerador de tons de cores

Gere uma escala de 50 a 950 a partir de uma cor base para superfícies, bordas, estados de interação e modo escuro.

Gerar tons Explorar todas as ferramentas

Formato de exportação

Continuar com esta cor

Paleta Contraste Exportar

O que você encontra nesta página

Gere tons mais claros e mais escuros a partir de um matiz.
Comece pela cor marcada como original e confira o par real de texto e fundo antes de definir cores de ações ou de texto.
Exporte a escala como variáveis CSS, Tailwind CSS v3/v4 ou JSON.

Indicado para

Escalas Tailwind
Tokens de design
Estados ao passar o cursor

Como usar

Gerador de paletasGere paletas, confira o contraste WCAG, extraia cores de imagens localmente e exporte CSS, Tailwind, SCSS, JSON, SVG e PNG.Verificador WCAGConfira o contraste entre texto e fundo segundo os níveis AA e AAA das WCAG. Gratuito, imediato e sem envio de arquivos.Extrator de cores de imagensExtraia uma paleta de cores dominantes de imagens PNG, JPG ou WebP. O processamento ocorre no navegador, sem envio da imagem.

Exemplo prático

Chromoforge · #111111 / #E24B4A

Teste o texto e o fundo reais em conjunto. O nome da cor ou o número do tom não garante a legibilidade.

:root {
  --brand: #E24B4A; /* original at 400, not necessarily 500 */
  --button-text: #111111;
}
.button { background: var(--brand); color: var(--button-text); }

Contraste: #111111 / #E24B4A

Posso usar esta página com o gerador principal?

Sim. Comece aqui, abra a ferramenta principal do Chromoforge com a mesma cor base e exporte a paleta.

Para que serve cada posição de uma escala de 50 a 950?

Os números identificam tons. Os mais claros podem servir para fundos e os mais escuros para texto, mas a função depende da cor de entrada e do contraste de cada par. Não suponha que 500 seja a cor original nem que qualquer 600 sirva para um botão.

É melhor gerar tons em HSL ou OKLCH?

OKLCH separa melhor a luminosidade percebida do croma. A ferramenta usa metas de luminosidade com croma variável, preserva a entrada na posição mais próxima e limita as cores à gama sRGB. Os intervalos visuais não são garantidos como iguais.

Ferramentas e guias relacionados

Gerador de cores TailwindGere uma escala de onze tons, de 50 a 950, na ferramenta principal e exporte uma configuração Tailwind v3.Gerador de paleta para modo escuroCrie paletas para modo escuro com texto legível, superfícies, bordas e cores de destaque que você pode verificar.Verificador de contraste WCAGConfira o contraste entre texto e fundo segundo os níveis AA e AAA das WCAG. Gratuito, imediato e sem envio de arquivos.

Todas as ferramentas