Design de UI e produto
Monte cores primária, secundária e de superfície consistentes entre telas.
Grátis · sem cadastroHarmonias da teoria das coresCSS · Tailwind · JSONRoda no seu navegador
Por que gerar paletas aqui
Seis motores de harmonia
Complementar, análoga, triádica, tetrádica, monocromática e complementar dividida — baseadas na teoria clássica das cores.
Trave e refine
Trave as cores que gosta, regenere o restante e itere até o esquema ficar certo.
Exports prontos para dev
Copie variáveis CSS, tokens Tailwind, mapas SCSS ou JSON — cole direto no design system.
Checagens de contraste WCAG
Teste pares texto-sobre-fundo da paleta para UI legível e acessível.
Feedback instantâneo
Amostras, mockups de UI e códigos atualizam ao vivo. Sem upload, sem espera, sem conta.
Grátis e ilimitado
Paletas ilimitadas para projetos pessoais e comerciais. Sem marcas d'água.
Como criar uma paleta de cores
- 1
Escolha uma cor base
Use o seletor ou digite um código HEX. Ela ancora todos os cálculos de harmonia.
- 2
Escolha uma regra de harmonia
Alterne entre complementar, análoga, triádica e mais para explorar diferentes climas.
- 3
Trave, randomize, refine
Trave as que quer manter, regenere ou use Espaço para nova base e ajuste até caber na marca.
- 4
Exporte para sua stack
Copie HEX/RGB/HSL ou exporte CSS, Tailwind, SCSS ou JSON para designers e desenvolvedores.
De um código HEX à semente de um design system
Regras de harmonia, checagens de contraste e formatos de export que designers e desenvolvedores realmente usam em produção.
01
Por que harmonia de cores vence amostras aleatórias
Cores aleatórias raramente compartilham relação. Regras de harmonia posicionam matizes na roda de cores com intenção — opostas para energia, vizinhas para calma, igualmente espaçadas para leveza — para interfaces deliberadas em vez de barulhentas.
02
Complementar vs análoga na UI de produto
Pares complementares destacam CTAs sobre fundos. Conjuntos análogos combinam com dashboards e layouts de leitura longa onde a continuidade calma importa. Troque regras na mesma base para comparar climas na hora.
03
Caminhos de export para stacks modernas
Variáveis CSS alimentam qualquer framework. Mapas Tailwind entram nos arquivos de config. Mapas SCSS alimentam design systems Sass. JSON vai para ferramentas de design e documentação. Uma paleta, cada handoff.
04
Acessibilidade como recurso de primeira classe
Bonito não basta se o texto do corpo falha no AA. Checar o contraste com o seletor ainda aberto evita redesigns caros após a revisão de acessibilidade.
Quem usa um gerador de paleta de cores
De kits de marca à UI de produto — esquemas equilibrados começam com boa teoria das cores.
Identidade de marca
Explore sistemas complementares ou monocromáticos antes de fixar as guidelines.
Desenvolvimento frontend
Exporte variáveis CSS ou tokens Tailwind para a engenharia espelhar o arquivo de design.
Marketing e social
Gere paletas de campanha alinhadas à marca em anúncios, decks e landing pages.
Visualização de dados
Escolha conjuntos monocromáticos sequenciais ou triádicos categóricos para gráficos mais claros.
Aprender teoria das cores
Veja como as regras de harmonia transformam uma base em esquemas multi-amostra profissionais.
Dicas de paleta que realmente ajudam
Pequenos hábitos que separam “amostras bonitas” de design systems usáveis.
- 1
Comece pelas restrições da marca ou produto
Se já tem um HEX primário da marca, trave-o e gere em torno — não invente um quinto acento aleatório.
- 2
Confira o contraste cedo
Um par lindo que falha no WCAG AA quebra botões, corpo de texto e formulários. Teste texto em superfícies antes de publicar.
- 3
Prefira menos papéis, mais claros
Nomeie cores por papel (primary, accent, muted, danger), não só por matiz. Cinco amostras viram sistema quando os papéis são claros.
- 4
Exporte uma vez, reutilize em todo lugar
Coloque variáveis CSS ou tokens Tailwind em uma única fonte da verdade para marketing e produto não divergirem.
FAQ
Perguntas frequentes
O que é um gerador de paleta de cores?
É uma ferramenta que monta um conjunto de cores coordenadas a partir de uma cor inicial ou regra. Este gerador aplica harmonias da teoria das cores para que as amostras funcionem juntas em UI, branding e design systems.
Quais regras de harmonia são suportadas?
Complementar, análoga, triádica, tetrádica (retângulo), monocromática e complementar dividida — as seis regras mais usadas por designers para esquemas equilibrados.
Posso travar cores de que gosto?
Sim. Trave qualquer amostra e regenere as desbloqueadas ou randomize a base. As travadas ficam no lugar para você refinar sem perder o que já gosta.
Como exporto a paleta para código?
Use Exportar para copiar propriedades CSS customizadas, um mapa de cores Tailwind, mapa SCSS ou JSON. Você também pode clicar em cada amostra para copiar HEX, RGB ou HSL.
O que é contraste WCAG e por que verificar?
WCAG define o contraste mínimo entre texto e fundo para acessibilidade. O verificador embutido mede pares da sua paleta para o texto da UI permanecer legível.
É grátis para projetos comerciais?
Sim. Paletas ilimitadas, sem conta e sem marcas d'água. Cores geradas e código exportado são seus para uso em trabalho de cliente ou comercial.
Meus dados saem do navegador?
Não. Matemática de cores, checagens de contraste e exports para a área de transferência rodam no cliente. Nada é enviado a um servidor.
Quantas cores há em cada paleta?
Cada harmonia retorna cinco amostras coordenadas — o suficiente para primária, acentos e superfícies de apoio sem sobrecarregar o sistema.
Paletas profissionais a partir da teoria das cores
O Gerador de Paleta de Cores BosConvertPro transforma uma cor base em um esquema multi-amostra equilibrado com regras de harmonia comprovadas. Designers e desenvolvedores podem travar favoritas, validar contraste, pré-visualizar UI e exportar tokens prontos para produção — tudo no navegador, grátis, sem cadastro.
- Seis modos de harmonia da teoria das cores
- Travar cores enquanto regenera as outras
- Verificador de razão de contraste WCAG
- Exportação CSS, Tailwind, SCSS e JSON
- Formatos de cópia HEX, RGB, HSL
- Uso gratuito e ilimitado no navegador