Design

Conversor de cores

Converta entre HEX, RGB e HSL instantaneamente. Use o seletor de cores visual ou digite um valor diretamente.

Escolha uma cor
Clique na amostra de cor para abrir o seletor. Os três formatos (HEX, RGB, HSL) são atualizados automaticamente.
Prévia
#3B82F6
Você também pode digitar diretamente em qualquer campo e os outros serão atualizados automaticamente.
#
color: #3b82f6;
color: rgb(59, 130, 246);
color: hsl(217, 91%, 60%);

Conceitos-chave

O formato hexadecimal representa uma cor como seis dígitos em base 16 (0–9, A–F), agrupados em três pares: vermelho, verde e azul. Por exemplo, #FF0000 é vermelho puro. É o formato mais comum em HTML e CSS.

RGB (Red, Green, Blue) descreve uma cor usando três valores numéricos entre 0 e 255, um por canal. rgb(255, 0, 0) é vermelho puro. O CSS também suporta rgba(), que adiciona um canal de opacidade (alfa).

HSL representa a cor em termos de Hue (matiz, 0–360°), Saturation (saturação, 0–100%) e Lightness (luminosidade, 0–100%). É o formato mais intuitivo para ajustar cores manualmente, pois suas dimensões correspondem à forma como percebemos as cores.

Use HEX para cores fixas de marca (variáveis CSS ou design tokens). Use RGB/RGBA quando precisar de opacidade dinâmica. Use HSL ao criar paletas ou variar matiz/saturação/luminosidade programaticamente — por exemplo, em temas ou geração de variantes de cor.