🎨

Conversor de Cores HEX RGB HSL

Converta HEX, RGB e HSL com prévia ao vivo e paleta de variações. Para devs e designers.

HEX

H°

Paleta de variações

BASE

#1200d6

#1f0aff

#4d3dff

#7c6fff

#aba3ff

#dad6ff

#ffffff

Conversor de Cores HEX, RGB e HSL — Para Designers e Devs

Converta cores entre HEX, RGB e HSL com prévia ao vivo e paleta de variações automática. Ferramenta gratuita e sem cadastro para designers e desenvolvedores web, com suporte a todos os formatos de cor aceitos pelo CSS.

Quando usar cada formato de cor

HEX — O mais popular no CSS/HTML. Compacto e amplamente suportado. Ex: #3B82F6
RGB — Útil quando você precisa de transparência com rgba(). Ex: rgb(59, 130, 246)
HSL — Ideal para criar variações programáticas. Basta alterar L (luminosidade) para clarear ou escurecer. Ex: hsl(217, 91%, 60%)

Como criar uma paleta de cores coesa

Escolha uma cor base e converta para HSL.
Mantenha o Matiz (H) fixo — ele define a "família" da cor.
Varie a Luminosidade (L) de 10% a 95% para criar tints (claros) e shades (escuros).
Ajuste a Saturação (S) para criar versões mais pastel ou mais vibrantes.

Perguntas frequentes

O que é HEX e como funciona?▼

HEX (hexadecimal) é um sistema de cores usado no CSS e HTML. Usa 6 dígitos hexadecimais (0–9 e A–F) em pares para representar vermelho, verde e azul. Ex: #FF5733 = vermelho (FF), verde (57), azul (33).

Qual a diferença entre RGB e HSL?▼

RGB define cores por intensidade de Vermelho, Verde e Azul (0–255 cada). HSL usa Matiz (Hue, 0–360°), Saturação (0–100%) e Luminosidade (0–100%), sendo mais intuitivo para ajustar tons e criar paletas.

Como usar o HSL para criar variações de cor?▼

Mantendo o Matiz (H) fixo e variando a Saturação e Luminosidade, você cria tons mais claros, escuros, pastel ou saturados da mesma cor. Isso é a base para criar paletas coesas em design.

Qual formato usar no CSS?▼

Todos os três são aceitos pelo CSS moderno. HEX é mais compacto e o mais usado. RGB é útil quando você precisa de transparência (use rgba). HSL é preferido quando se trabalha com variações programáticas de cor.

HEX com 3 dígitos é válido?▼

Sim. #RGB com 3 dígitos é um atalho onde cada dígito é duplicado. #F30 é equivalente a #FF3300. Nossa ferramenta aceita e expande automaticamente o formato curto.