Gerador de paletas de cores

Este gerador de paletas trabalha no modelo HSL: H (matiz) é um ângulo de 0 a 360° no círculo cromático, e S (saturação) e L (luminosidade) são porcentagens. Escolha uma cor-semente e a ferramenta gira pelo círculo seguindo as regras clássicas da teoria das cores para criar cinco cores de uma vez. Como muda apenas o matiz, ou apenas luminosidade e saturação, as cores têm uma relação matemática clara e combinam naturalmente, sem parecer aleatórias.

Cada modo tem sua função. Monocromático mantém um matiz e varia luminosidade e saturação: é a escolha mais segura para marcas e interfaces cheias de dados. Complementar pega a cor oposta a 180°, com o maior contraste para botões e destaques. Análogo usa vizinhas a ±15° e ±30°, suave e natural como muitas ilustrações e paisagens. Triádico divide o círculo em três (120° e 240°), rico em cor mas exige cuidado com as proporções. Aleatório sorteia dentro de faixas razoáveis quando você só quer inspiração.

Ao aplicar, experimente a regra 60-30-10: 60% de cor dominante em fundos e áreas grandes, 30% de cor secundária em seções e cards e 10% de destaque em botões e links. Paletas complementares e triádicas ficam carregadas se todas as cores forem usadas igualmente; escolha uma protagonista e dessature as demais. E não esqueça a legibilidade: o texto deve atingir pelo menos o contraste WCAG AA de 4,5:1, que você pode conferir no nosso analisador de contraste.

Clique em uma amostra para copiar o código HEX ou exporte a paleta inteira como variáveis CSS, variáveis SCSS, configuração do Tailwind ou JSON e cole direto no projeto. O gerador de gradiente CSS abaixo transforma a paleta em fundo degradê. Tudo é calculado no navegador.