Dev Utilities 4.91 · 967 avaliações

Conversor de Cores — HEX, RGB e HSL com preview

Converta cores entre HEX, RGB e HSL em tempo real, com preview visual e color picker. Edite qualquer formato e os outros se atualizam automaticamente.

HEX

RGB

HSL

HEX: #f97316
RGB: rgb(249, 115, 22)
HSL: hsl(25, 95%, 53%)

HEX, RGB e HSL — quando usar cada formato

HEX (#RRGGBB)

Notação hexadecimal compacta — o formato mais comum em CSS, design tools e arquivos de design. Cada par representa um canal: vermelho, verde, azul (0 a 255 em decimal, 00 a FF em hex). Suporta também forma curta (#RGB → #RRGGBB) quando os pares são iguais.

RGB (Red, Green, Blue)

Mesma informação que HEX, mas em decimal — cada canal de 0 a 255. Útil quando você precisa fazer cálculos sobre canais individuais (manipulação programática) ou quando trabalha com APIs que esperam esse formato (Canvas, WebGL, etc).

HSL (Hue, Saturation, Lightness)

O formato mais intuitivo para criar variações de uma cor. Hue (0-360) é o tom no círculo cromático; Saturation (0-100%) é a vivacidade; Lightness (0-100%) é o brilho. Diminuir Lightness escurece, diminuir Saturation aproxima do cinza. Ideal para gerar paletas, dark/light variants e gradientes harmônicos.

Workflow recomendado em design

Escolha a cor base em HSL — facilita pensar em "tom" em vez de números aleatórios.
Documente em HEX — mais legível em design system e código.
Manipule programaticamente em RGB — quando precisa fazer interpolação, alpha blending ou cálculos.

Sobre wide-gamut e display P3

Os três formatos (HEX, RGB, HSL) tradicionais assumem o color space sRGB — adequado pra web e maioria dos monitores. Telas modernas (iPhone, Mac, alguns Android) suportam display P3 com cores mais vivas. CSS moderno permite especificar via color(display-p3 r g b), mas isso está fora do escopo desta ferramenta básica.

Privacidade

Toda conversão e renderização do preview acontece no seu navegador. Nada é enviado para servidores.

Perguntas frequentes

Quais formatos são suportados?

Três formatos principais: HEX (#RRGGBB ou #RGB), RGB (0-255 por canal) e HSL (Hue 0-360, Saturation 0-100%, Lightness 0-100%). Editar qualquer um atualiza os outros automaticamente.

Quando usar HSL em vez de RGB ou HEX?

HSL é mais intuitivo para criar variações de uma mesma cor. Para deixar uma cor mais escura, basta diminuir Lightness. Para variações pastel, aumente Lightness e diminua Saturation. RGB e HEX são ótimos para precisão exata, mas péssimos para 'sentir' a cor.

O que é HEX shorthand (#F00)?

É a forma compacta quando cada par de hex repete: #FF0000 vira #F00, #11AABB vira #1AB. Aceitamos os dois formatos no input — tanto faz qual você usa.

A cor é renderizada igual em todos os monitores?

Para a maioria dos monitores LCD/OLED modernos com calibração padrão (sRGB), sim. Diferenças surgem em telas wide-gamut (DCI-P3, Adobe RGB) sem profile correto, ou em projetores antigos. Para garantia absoluta de cor, use ferramentas com gestão de cor profissional.