Design

Conversor de cores

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

Hoje qualquer IA pode converter uma cor entre HEX, RGB e HSL em segundos. Mas nem todos têm um plano pago, tokens disponíveis o tempo todo, ou sabem como pedir isso corretamente. Este conversor existe para isso: resultado imediato, sem fricção — e logo abaixo explicamos como a conversão é feita manualmente.
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%);

Como uma cor é convertida entre formatos

HEX → RGB cada par hexadecimal (00–FF) é interpretado em base 16 e convertido em um valor decimal (0–255) — Exemplo: #3B82F6 → 3B=59, 82=130, F6=246 → rgb(59, 130, 246).
RGB → HEX cada valor decimal (0–255) é convertido em um par hexadecimal (00–FF) — Exemplo: rgb(59, 130, 246) → 59=3B, 130=82, 246=F6 → #3B82F6.
RGB → HSL a luminosidade é a média entre o canal máximo e o mínimo; a saturação depende da diferença entre eles; o matiz depende de qual canal (R, G ou B) é o máximo — Exemplo: rgb(59, 130, 246) → hsl(217°, 91%, 60%).
Por que não existe uma conversão RGB → CMYK universal RGB é aditivo (telas, luz) com um espectro muito amplo; CMYK é subtrativo (tinta sobre papel) com um espectro mais estreito — o resultado depende do perfil de cor (ICC) de cada papel, tinta e impressora — Diferente de HEX↔RGB↔HSL (conversões matemáticas exatas, sem perda), passar de RGB para CMYK não tem uma fórmula fixa: o mesmo vermelho rgb(230, 30, 30) pode ser impresso com tonalidades diferentes dependendo do perfil ICC usado. Na prática, a maioria das empresas não gerencia seu próprio perfil ICC: simplesmente envia o arquivo de design e é a gráfica quem aplica seu próprio perfil calibrado na hora de imprimir. O Canva, por exemplo, trabalha nativamente em RGB — nem mesmo com o Canva Pro você consegue pré-visualizar ou ajustar o CMYK exato; ao exportar como «PDF para impressão» a conversão acontece automaticamente, e cores muito saturadas costumam ficar mais apagadas quando impressas. Os fluxos de trabalho profissionais pedem o perfil ICC específico da gráfica e o incorporam no arquivo final (formato PDF/X), mas é um passo que a maioria pula.
Nem toda impressão usa CMYK gigantografias e serigrafia em tecido não seguem necessariamente o mesmo fluxo RGB → CMYK da impressão offset/digital em papel — Na serigrafia (camisetas, tecido), o padrão para logos e designs simples é usar cores diretas Pantone (tinta pré-misturada), não CMYK — cada cor é uma tela/passada separada, e cores muito saturadas (laranjas, vermelhos vivos, azuis elétricos) simplesmente não são alcançadas misturando CMYK; para designs fotográficos, usa-se CMYK ou «processo simulado». O Pantone também não é 100% equivalente ao RGB: os valores HEX/RGB que a Pantone publica para cada cor são apenas uma aproximação para pré-visualização em tela, e a mesma cor tem valores diferentes dependendo do suporte (papel couchê, papel não couchê, tecido), porque a tinta física parece diferente dependendo de onde é aplicada — para produção real, o certo é especificar à gráfica o código Pantone exato, não o HEX/RGB aproximado. Em gigantografias, a prática varia conforme o fornecedor: alguns pedem CMYK já convertido, outros preferem RGB porque seu próprio RIP tem um perfil calibrado para aquele material — o certo é sempre perguntar ao fornecedor específico.

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.

OKLCH é um espaço de cor perceptualmente uniforme introduzido no CSS Color Level 4. Ao contrário do HSL, cores com o mesmo valor L (luminosidade) parecem igualmente brilhantes para o olho humano, tornando a criação de paletas acessíveis e harmoniosas muito mais previsível. Seus três valores são: L (luminosidade, 0–1), C (croma, aprox. 0–0,4) e H (matiz, 0–360°). Chrome, Firefox e Safari já o suportam com a função oklch().

O canal alfa define a opacidade de uma cor, de 0 (totalmente transparente) a 1 (totalmente opaco). Em CSS usa-se rgba(255, 0, 0, 0.5) ou a notação hexadecimal de 8 dígitos #FF000080. Também é possível separar a opacidade da cor com a propriedade opacity. A diferença principal: rgba() torna apenas aquela cor transparente, sem afetar os elementos filhos; opacity aplica a transparência a todo o elemento e seu conteúdo.

O contraste de cor é a diferença de luminância relativa entre duas cores — geralmente texto e fundo. A WCAG 2.1 exige uma relação mínima de 4,5:1 para texto normal (nível AA) e 3:1 para texto grande (18pt ou 14pt negrito). Um contraste insuficiente torna a leitura difícil para pessoas com baixa visão ou daltonismo. O ratio pode ser medido diretamente no painel de acessibilidade do Chrome ou com o verificador de contraste da WebAIM.

Designers web e UI/UX o usam diariamente para converter cores entre HEX, RGB, HSL e HSB ao trabalhar com CSS, Figma, Sketch ou Adobe XD — cada ferramenta tem seu formato preferido. Desenvolvedores front-end precisam dele para aplicar cores com precisão em CSS e Tailwind, e para entender quais valores numéricos correspondem a uma cor visual. Designers gráficos e de branding o consultam para transferir paletas de marca entre softwares (Illustrator, Canva, Photoshop) e garantir que a cor seja idêntica em todos os formatos. Designers de impressão o usam para converter entre RGB (tela) e os valores equivalentes mais próximos antes de exportar para CMYK. Especialistas em acessibilidade o empregam para obter valores precisos de luminosidade e verificar a proporção de contraste de acordo com as diretrizes WCAG 2.1.

No computador, pressione Ctrl + D (Windows/Linux) ou Cmd + D (Mac) no Chrome, Firefox ou Edge para adicionar esta página aos favoritos instantaneamente. No Safari para Mac, use Cmd + D ou acesse Favoritos → Adicionar favorito. No celular com Chrome (Android), toque no menu de três pontos (⋮) e escolha «Adicionar à tela inicial» ou «Adicionar aos favoritos». No celular com Safari (iPhone/iPad), toque no botão de compartilhar (□↑) e depois em «Adicionar à tela inicial». Com ela nos favoritos, da próxima vez que encontrar um valor HEX em um design e precisar do RGB para o CSS, já estará a um clique.

Se, além de cores, você também precisa converter unidades de tamanho (px para rem ou em) para layouts responsivos, pode ser útil o conversor de px para rem e em, pensado para o mesmo tipo de fluxo de trabalho em CSS: você define um tamanho base e obtém as equivalências instantaneamente.