Tons de Cor: Códigos Hex, RGB e HSL

O que há nestas páginas

Cada página de família lista seus tons nomeados do mais claro ao mais escuro, com uma amostra real, o nome da cor e três códigos prontos para copiar: hex para CSS e ferramentas de design, RGB para o que pede valores por canal, e HSL para quando você precisa ajustar luminosidade ou saturação na mão. Clicar num código copia; clicar na amostra copia o hex.

Os tons marcados com CSS são cores nomeadas oficiais: o nome funciona direto numa folha de estilo e todo navegador o resolve exatamente para o hex exibido. Os demais são nomes convencionais cujos valores seguem a convenção mais citada.

Como escolher um tom que funciona

Cores da mesma família raramente brigam, então o jeito mais rápido de montar uma paleta é pegar um valor claro, um médio e um escuro de uma página e usar uma segunda família só para acentos. Se a cor vai ficar atrás de texto, escolha na parte alta da lista e confira o contraste; se ela precisa sustentar um título ou um botão, pegue do meio, não dos extremos.

Fique de olho no deslize de matiz nas pontas de cada família. Os vermelhos mais escuros já foram para o marrom, os amarelos mais escuros para o oliva e os rosas mais claros para o branco: dois tons de pontas opostas da mesma página podem parecer de paletas diferentes.

Por que é grátis?

O FreeToGenerate.com mantém todas as ferramentas realmente gratuitas. Estas páginas são listas estáticas de valores de cor exibidas no seu navegador: nada para instalar, sem conta e sem versão premium escondendo metade da paleta. Copie quantos códigos precisar, quantas vezes quiser.