Guia da ferramenta de cores
Gerador de esquema de cores para sites
Crie um esquema com cores principais, neutras e de destaque para seções, botões, cartões e formulários.
Este guia explica o processo. Use a ferramenta indicada abaixo para gerar cores e exportar arquivos.
O que você encontra nesta página
- Transforme uma cor de marca ou de inspiração em uma paleta para o site.
- Equilibre os destaques das ações com superfícies discretas e texto legível.
- Use a escala de tons como referência para fundos, bordas, cartões e estados de interação.
Indicado para
- Páginas de apresentação
- Sites de divulgação
- Páginas iniciais de SaaS
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.
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.
Quantas cores um esquema para site precisa ter?
Comece com uma cor principal, uma de destaque, uma escala neutra para superfícies e texto, além das cores semânticas necessárias para sucesso, aviso, erro e informação. Ajuste a quantidade às funções reais da interface.
O que é a regra 60-30-10?
É uma referência de proporção: cerca de 60% para uma cor dominante, 30% para apoio e 10% para destaque. Não é uma regra de acessibilidade; cada combinação de texto e fundo ainda precisa ser verificada.
Ferramentas e guias relacionados
Gerador de paleta de cores para marcasCrie uma paleta a partir de um logotipo ou de uma cor principal e exporte variáveis CSS e tokens de design para a interface.Gerador de gradientes CSSCrie gradientes CSS lineares, radiais e cônicos com as cores geradas. Visualize ao vivo e copie o CSS.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.