HEX, RGB e HSL
HEX é o formato mais comum em CSS e design — usa 6 dígitos hexadecimais para representar as intensidades de vermelho, verde e azul.
RGB define a cor pelos canais Red, Green e Blue com valores de 0 a 255. É o formato nativo dos monitores e o mais intuitivo para manipulação programática.
HSL (Hue, Saturation, Lightness) é o mais fácil para humanos: você ajusta o matiz (0–360°), a saturação (0–100%) e o brilho (0–100%) de forma independente, ideal para gerar paletas coerentes.
Como usar
- Clique na prévia da cor ou use o seletor nativo do browser para escolher qualquer cor visualmente.
- Alterne entre os modos HEX, RGB e HSL para editar no formato preferido.
- Use as cores rápidas como ponto de partida.
- Copie qualquer formato na seção Formatos com um clique — inclusive o formato CSS moderno
rgb(R G B). - Explore os tons gerados automaticamente e clique em qualquer um para selecioná-lo como cor base.
Paleta de tons
A paleta de tons é gerada mantendo o matiz (H) e a saturação (S) originais e variando apenas o brilho (L) de 10% a 90%. Isso produz uma escala coerente — do mais escuro ao mais claro — perfeita para sistemas de design, variantes de botão, estados hover e hierarquia visual.
Formatos CSS disponíveis
A ferramenta exporta quatro formatos prontos para usar no CSS: #RRGGBB (HEX clássico), rgb(R, G, B) (RGB legado), hsl(H, S%, L%) (HSL clássico) e rgb(R G B) (sintaxe CSS moderna, sem vírgulas). Basta clicar em "Copiar" para já ter o valor pronto para colar no seu código.