Seletor de Cores e Gerador de Paletas

Toda cor na tela pode ser descrita de três maneiras, e esta ferramenta mantém todas sincronizadas: HEX é a notação curta usada em CSS e em ferramentas de design; RGB descreve quanto de luz vermelha, verde e azul se combina para formar a cor; e HSL — matiz, saturação, luminosidade — descreve a cor do jeito que as pessoas realmente pensam nela: qual é o tom, quão vivo e quão claro ou escuro. Arraste a amostra de cor nativa, digite um código HEX ou ajuste diretamente qualquer campo R/G/B ou H/S/L, e todos os outros campos se atualizam na hora, para que você circule entre as formas de pensar em cor sem fazer conta.

O círculo cromático é a base de seis regras clássicas de harmonia, todas geradas automaticamente a partir da cor base escolhida. A complementar combina uma cor com a oposta, para o máximo contraste; a análoga escolhe vizinhas no círculo, para um visual calmo e coeso; a tríade e a tétrade distribuem três ou quatro cores de forma uniforme pelo círculo, para uma paleta animada, mas ainda equilibrada; a complementar dividida suaviza o par complementar usando as duas cores ao lado da oposta em vez da própria oposta; e a monocromática fica em um único matiz, variando apenas a luminosidade — muitas vezes a escolha mais segura para uma interface que precisa de uma cor de marca em vários tons.

Nem toda boa paleta nasce da teoria das cores — às vezes você só quer ver o que aparece. O gerador de paleta aleatória (pressione a barra de espaço ou clique em Gerar) cria cinco cores de uma vez, com matizes e luminosidade ajustados para evitar resultados turvos ou pastéis demais. Clique no cadeado de qualquer amostra que queira manter e gere de novo: só as cores destravadas mudam, e assim você monta uma paleta aos poucos, como em ferramentas do tipo Coolors. Clique em uma amostra para copiar seu código HEX, ou use os botões abaixo da paleta para copiar o conjunto todo como propriedades personalizadas CSS, variáveis SCSS, um trecho de config do Tailwind ou um array JSON, ou exporte um arquivo de amostras .ase da Adobe para Illustrator e Photoshop. Você também pode extrair uma paleta de qualquer imagem (processada localmente, nunca enviada) e salvar no navegador as paletas de que gostar.

Escolher uma cor bonita não é o mesmo que escolher uma cor utilizável — um texto numa cor muito próxima do fundo em luminosidade pode ficar ilegível, e as Diretrizes de Acessibilidade para Conteúdo Web (WCAG) definem limites específicos: uma taxa de contraste de pelo menos 4,5:1 para texto normal passar no nível AA e 7:1 para passar no nível AAA, mais rigoroso. O verificador de contraste calcula a taxa exata entre a cor escolhida e o texto branco e preto, com a mesma fórmula de luminância relativa definida na especificação WCAG, e indica se cada combinação é aprovada, para você pegar um botão ou título de baixo contraste antes de publicar, e não depois.