🎨Formatadores

Conversor de Cores HEX / RGB / HSL

Converta cores entre os formatos CSS mais usados. Use o seletor visual ou digite os valores manualmente. Copie o resultado em um clique.

#4F46E5

rgb(79, 70, 229)

hsl(243, 75%, 59%)

HEX#4F46E5
RGBrgb(79, 70, 229)
HSLhsl(243, 75%, 59%)
CSS var--color: #4F46E5;

Guia rápido dos formatos de cor

HEX — Hexadecimal

O formato mais comum no desenvolvimento web. Cada par de dígitos representa um canal (vermelho, verde, azul) em base 16. Vai de #000000 (preto) a #FFFFFF (branco).

RGB — Red, Green, Blue

Cada canal de cor tem um valor de 0 a 255. rgb(0, 0, 0) é preto, rgb(255, 255, 255) é branco. É o modelo nativo de monitores e telas.

HSL — Hue, Saturation, Lightness

Mais intuitivo para designers: Hue é o ângulo no círculo cromático (0–360°), Saturation é a intensidade (0–100%) e Lightness é o brilho (0% = preto, 100% = branco, 50% = cor pura).

Qual usar?

  • Use HEX para valores fixos em design systems e Figma
  • Use RGB/RGBA para transparências e manipulação via JavaScript
  • Use HSL para criar paletas dinâmicas com CSS custom properties

Perguntas frequentes

HEX é a representação hexadecimal (ex: #4F46E5), usada em HTML/CSS. RGB (Red, Green, Blue) usa valores de 0 a 255 para cada canal. HSL (Hue, Saturation, Lightness) é mais intuitivo para ajustar tonalidades e brilho.

Tools relacionadas