Color Palette Generator
Como usar
- 1
Selecionar harmonia
Escolha uma regra de harmonia de cores como Análogos ou Complementares para definir a relação entre as cores.
- 2
Escolher humor
Defina a atmosfera com o seletor de humor. Escolha entre Pastel, Vibrante ou Modo Escuro para sua marca.
- 3
Gerar
Clique em Gerar para criar paletas únicas. Bloqueie as cores que gostar e regenere o restante.
- 4
Exportar
Copie códigos Hex individuais ou clique em Exportar para obter a configuração completa do Tailwind CSS.
Guia de Teoria das Cores
Entendendo a Harmonia
- Análogos
Cores adjacentes no círculo cromático. Cria designs serenos e confortáveis, ideais para temas naturais.
- Complementares
Cores opostas no círculo cromático. Gera alto contraste e impacto visual.
- Triádico
Três cores equidistantes no círculo cromático. Oferece alto contraste mantendo harmonia.
- Complemento Dividido
Variação do esquema complementar. Usa uma cor base e as duas adjacentes ao seu complemento.
- Monocromático
Variações de luminosidade e saturação de uma única cor. Limpo, elegante e tranquilizador.
- Caos Aleatório
Cores completamente aleatórias sem regras. Ótimo para inspiração inesperada.
Explorando os Humores
- Padrão
Saturação e brilho equilibrados. Adequado para web design geral e componentes de UI.
- Sonhos Pastel
Alto brilho e baixa saturação. Suave e tranquilizador. Perfeito para lifestyle ou temas de primavera.
- Neon Vibrante
Alta saturação e brilho médio. Energético e chamativo. Ideal para tech ou esportes.
- Modo Escuro
Baixo brilho e tons dessaturados. Profundo e moderno. Reduz a fadiga visual.
- Retro Vintage
Tons dessaturados e ligeiramente quentes. Nostálgico e atemporal.
Ferramentas recomendadas
Utilitários selecionados que você pode achar úteis
Escolhendo Cores Que Combinam
Visão Geral
A teoria das cores tem séculos de acumulação, mas designers web precisam de paletas funcionais em minutos. Baseado em regras estabelecidas (complementar, análoga, tríade, tétrade), esta ferramenta gera matematicamente paletas harmônicas a partir de uma cor base. Suporta acessibilidade WCAG, variantes claro/escuro e exportação (CSS variables, Tailwind, Figma).
Como Funciona
Escolha cor base (HEX, RGB, HSL) e selecione o esquema. A ferramenta calcula em espaço HSL. Cada cor mostra contraste WCAG indicando adequação para texto, títulos e acentos.
Quando usar
Design de nova marca/logo. Seleção de tema de site. Composição cromática de apresentações/cartazes/gráficos sociais. Início de design system. Marketers buscando cores combinando com marca.
Perguntas Frequentes
3-5 é o padrão prático. Primária, secundária, acento, fundo, frente. Mais que isso é difícil gerenciar.