Gere uma paleta de cores para UI
Círculo de harmonias, predefinições de atmosfera e de tema de UI, verificação de contraste WCAG — exporte para variáveis CSS, Tailwind, SCSS, tokens JSON ou Figma.
Como funciona o Gerador de paletas
Crie paletas de cores harmoniosas com base na teoria das cores. Círculo de harmonias, predefinições rápidas, verificação de contraste e exportação em qualquer formato.
Harmonias do círculo cromático
Escolha um matiz base e gere paletas complementares, análogas, triádicas, complementares divididas e tetrádicas com base nos princípios da teoria das cores.
Geração rápida
Tenha uma paleta pronta para produção com um clique. O gerador cria um conjunto equilibrado de cores primárias, secundárias, de destaque e neutras.
Verificação de contraste
A verificação de contraste WCAG integrada mostra quais combinações de cores atendem aos padrões de acessibilidade AA e AAA. Crie paletas bonitas e também acessíveis.
Exportar e salvar
Exporte paletas como variáveis CSS, config do Tailwind, SCSS ou JSON. Salve-as na sua biblioteca para usar depois ou compartilhe por URL.
Perguntas frequentes
Harmonias de cores são combinações baseadas na posição das cores no círculo cromático. Cores complementares ficam opostas umas às outras e criam alto contraste. Cores análogas ficam lado a lado e transmitem coesão. Cores triádicas ficam igualmente espaçadas e oferecem uma variedade equilibrada.
Uma paleta de design típica precisa de 5–8 cores: uma cor primária da marca, uma secundária, um destaque para CTAs, um conjunto de sucesso/erro/aviso e 2–3 cinzas neutros. O gerador ajuda a montar tudo isso a partir de um único matiz base.
O WCAG (Web Content Accessibility Guidelines, as diretrizes de acessibilidade para conteúdo web) define razões mínimas de contraste entre texto e fundo. O AA exige 4,5:1 para texto normal; o AAA exige 7:1. Atender a esses padrões garante que o seu conteúdo possa ser lido por pessoas com deficiência visual.
Sim. Digite qualquer valor HEX, RGB ou HSL como cor base e o gerador cria harmonias em torno dela. Isso é útil quando você já tem uma cor de marca e precisa expandi-la para uma paleta completa.