Conversor Online Grátis de Cores — HEX, RGB, HSL, CMYK

Converta cores instantaneamente entre os formatos HEX, RGB, HSL e CMYK. Este conversor gratuito fornece preview em tempo real e conversão bidirecional para fluxos de trabalho de design web, impressão e design gráfico.

O Que É um Conversor de Cores?

Um conversor de cores traduz valores de cor entre diferentes formatos usados no design digital e impresso. Desenvolvedores web usam HEX e RGB, designers frequentemente trabalham com HSL para ajustes intuitivos de cor, e a produção de impressão depende de CMYK.

Em vez de calcular conversões manualmente ou abrir uma ferramenta de design, este conversor oferece todos os formatos de uma só vez — com um preview em tempo real para que você veja exatamente a cor com a qual está trabalhando.

Como Usar Este Conversor de Cores

1. Digite uma cor — Insira um valor HEX ou números RGB, HSL ou CMYK.
2. Veja todos os formatos — Todos os outros formatos são atualizados instantaneamente.
3. Copie o que precisar — Clique no botão de cópia ao lado de qualquer formato.
4. Use o preview — O swatch de cor mostra a cor exata com um rótulo de contraste.

Recursos Principais

Recurso	Benefício
Suporte a 4 formatos	HEX, RGB, HSL, CMYK — todos de uma só vez
Conversão bidirecional	Edite qualquer formato e o restante é atualizado
Preview em tempo real	Veja a cor exata com seu rótulo HEX
Botões de cópia por formato	Cópia de um clique para cada formato
CMYK pronto para impressão	Obtenha valores CMYK precisos para produção de impressão

Entendendo os Formatos de Cor

HEX

A notação hexadecimal usa seis caracteres (0-9, A-F) para representar valores de vermelho, verde e azul:

• #FF0000 = vermelho em intensidade total
• #3B82F6 = azul-500 do Tailwind CSS

Comum em CSS, HTML e ferramentas de design. Sempre começa com #.

RGB (Red, Green, Blue)

Modelo de cor aditivo onde cada canal varia de 0 a 255:

• rgb(255, 0, 0) = vermelho puro
• rgb(59, 130, 246) = azul-500 do Tailwind

Usado em CSS (rgb() função) e na maioria dos contextos de programação.

HSL (Hue, Saturation, Lightness)

Um modelo mais intuitivo para ajustar cores:

• Hue (0-360): Posição na roda de cores (0=vermelho, 120=verde, 240=azul)
• Saturation (0-100%): Intensidade da cor (0%=cinza, 100%=cor completa)
• Lightness (0-100%): Brilho (0%=preto, 50%=normal, 100%=branco)

Usado em CSS (hsl() função) e preferido por designers para criar paletas de cores.

CMYK (Cyan, Magenta, Yellow, Key/Black)

Modelo de cor subtrativo usado na produção de impressão:

• Cada valor varia de 0% a 100%
• Representa a cobertura de tinta no papel
• Não é diretamente utilizável em CSS (navegadores usam RGB internamente)

Essencial para preparar designs para impressão profissional.

Comparação de Formatos de Cor

Formato	Caso de Uso	Exemplo	Intervalo
HEX	CSS web, HTML	#3B82F6	00-FF por canal
RGB	CSS web, programação	rgb(59, 130, 246)	0-255 por canal
HSL	Design, CSS	hsl(217, 91%, 60%)	H: 0-360, S/L: 0-100%
CMYK	Produção de impressão	cmyk(76%, 47%, 0%, 4%)	0-100% por canal

Casos de Uso no Mundo Real

Desenvolvimento Web

Copie valores HEX ou rgb() diretamente para seu CSS. HSL é ótimo para gerar escalas de cor (ex: variar a luminosidade para estados de hover).

Sistemas de Design

Converta cores de marca entre formatos. Um designer lhe dá HSL do Figma — você precisa de HEX para CSS. Feito em um clique.

Produção de Impressão

Converta cores de tela para CMYK antes de enviar para a impressora. Note que algumas cores vibrantes de RGB não podem ser reproduzidas perfeitamente em CMYK (o "gama" é menor).

Acessibilidade

Use o valor de luminosidade HSL para verificar se uma cor atende aos requisitos de contraste da WCAG. Cores com luminosidade próxima de 50% tendem a ter o maior contraste percebido.

Dicas para Trabalhar com Cores

Dica	Explicação
Use HSL para paletas	Fixe a tonalidade, varie a saturação e a luminosidade para criar escalas de cor harmônicas.
HEX curto funciona	#3BF é abreviação de #33BBFF. Este conversor aceita ambos.
Observe o gama CMYK	Azuis e verdes brilhantes frequentemente mudam ao serem convertidos para CMYK. Sempre faça uma prova de impressão.
CSS suporta todos os formatos	CSS moderno aceita HEX, rgb(), hsl() e até hwb(). Use o que for mais legível.
Transparência alfa	Para transparência, use rgba() ou HEX de 8 dígitos (#3B82F680).

Perguntas Frequentes

Por que minha cor CMYK parece diferente na tela?

Telas exibem cores em RGB (aditivo), enquanto a impressão usa CMYK (subtrativo). Algumas cores RGB — especialmente azuis, verdes e laranjas brilhantes — estão fora do gama CMYK e aparecerão mais opacas em impressão.

Posso usar isso para propriedades CSS personalizadas?

Sim. Copie o valor HEX, rgb() ou hsl() e use-o em suas variáveis CSS: --primary: #3b82f6;.

Qual é a diferença entre RGB e HSL?

RGB representa a cor como quantidades de luz vermelha, verde e azul. HSL representa a cor como tonalidade (posição na roda de cores), saturação (intensidade) e luminosidade (brilho). HSL é mais intuitivo para ajustar cores — para tornar uma cor mais clara, basta aumentar o valor L.

Este conversor suporta transparência/alfa?

Este conversor lida com cores totalmente opacas. Para transparência, use rgba() no CSS ou o formato HEX de 8 dígitos (#3B82F680).