HEX vs RGB vs HSL vs CMYK: qual formato de cor usar e quando

A mesma cor, quatro idiomas diferentes

Escolha qualquer cor — digamos, um coral quente. Agora descreva-a de quatro maneiras:

• HEX: #E8635A
• RGB: rgb(232, 99, 90)
• HSL: hsl(4, 75%, 63%)
• CMYK: 0, 57, 61, 9

Todas as quatro descrevem exatamente a mesma cor. Não são padrões concorrentes: são representações diferentes da cor, otimizadas para contextos diferentes. A confusão vem de não saber qual contexto pede qual formato.

Este guia detalha cada formato em linguagem simples: o que é, como funciona, quando usar e quando é a escolha errada. Se você trabalha com cor de alguma forma — design, desenvolvimento, impressão, marketing —, isto vai evitar que escolha o formato errado para o seu projeto.

HEX: o padrão da web

O que é

HEX (hexadecimal) é um código de seis caracteres precedido por uma cerquilha: #E8635A. Cada par de caracteres representa os canais Vermelho, Verde e Azul em notação base 16 (de 00 a FF).

É funcionalmente idêntico ao RGB, apenas escrito de outra forma. #E8635A é o mesmo que rgb(232, 99, 90). O HEX é simplesmente um jeito mais compacto de escrever valores RGB.

Quando usar HEX

• CSS e desenvolvimento web: o HEX é a notação de cor padrão no CSS. Todos os navegadores entendem. color: #E8635A; é a forma mais comum de definir cor na web.
• Ferramentas de design: Figma, Sketch, Adobe XD e Canva usam HEX como entrada principal. Quando um designer diz «o azul é #3B82F6», todo mundo entende.
• Manuais de marca: os guias de marca digitais quase sempre incluem valores HEX porque são curtos, inequívocos e fáceis de copiar e colar.
• Comunicação rápida: «use #333» é mais rápido do que «use rgb(51, 51, 51)» numa mensagem de Slack.

Quando NÃO usar HEX

• Quando você precisa de transparência: o HEX padrão de 6 dígitos não suporta canal alfa/opacidade. É preciso HEX de 8 dígitos (#E8635A80), que é menos legível, ou mudar para RGBA.
• Quando você precisa ajustar cores por código: «deixe isto 20% mais claro» é quase impossível de calcular mentalmente em HEX. O HSL é muito melhor para isso.
• Produção gráfica: gráficas não usam HEX. Nunca.

Exemplo real

Você está escrevendo o CSS de uma landing page. O designer entrega um guia de estilo com as cores da marca. Você escreve:

:root { --primary: #E8635A; --secondary: #2D3748; --accent: #F6AD55; }

O HEX é perfeito aqui: compacto, legível e universalmente suportado.

RGB: o modelo de cor das telas

O que é

RGB significa Red, Green, Blue (vermelho, verde, azul): as três cores de luz que as telas misturam para produzir todas as cores que você vê. Cada canal vai de 0 a 255. rgb(232, 99, 90) significa 232 unidades de vermelho, 99 de verde e 90 de azul.

O RGB é a base de toda a cor digital. O HEX é apenas RGB em outra notação. O HSL é uma transformação do RGB voltada para humanos. Tudo na sua tela acaba virando valores RGB enviados aos pixels.

Quando usar RGB

• Quando você precisa de transparência: o RGBA acrescenta um canal alfa: rgba(232, 99, 90, 0.5) para 50% de opacidade. É mais limpo do que o HEX de 8 dígitos e amplamente suportado em CSS, ferramentas de design e programação.
• Programação e desenvolvimento de apps: Swift, Kotlin, Flutter, React Native; os frameworks de apps normalmente trabalham internamente com valores RGB/RGBA.
• LED e iluminação: lâmpadas inteligentes (Philips Hue, fitas de LED) usam valores RGB. Se você projeta instalações de luz física, o RGB é o formato nativo.
• Matemática de cor: misturar cores, interpolar gradientes ou gerar cor por código é direto em RGB.

Quando NÃO usar RGB

• Impressão: telas emitem luz (mistura aditiva); o papel a reflete (mistura subtrativa). O RGB não consegue representar com precisão o que sairá de uma impressora.
• Ajustar luminosidade ou saturação: «deixe esta cor 30% menos saturada» não é intuitivo em RGB. Você precisaria converter para HSL antes.

Exemplo real

Você está criando um app em React Native e precisa de uma sobreposição semitransparente:

backgroundColor: 'rgba(0, 0, 0, 0.6)'

RGB com alfa é a escolha natural: direta, legível e nativa do motor de renderização.

HSL: o formato do designer

O que é

HSL significa Hue, Saturation, Lightness (matiz, saturação, luminosidade):

• Matiz (0°–360°): a cor em si, como posição no círculo cromático. 0° é vermelho, 120° é verde, 240° é azul.
• Saturação (0%–100%): o quanto a cor é vívida. 0% é cinza, 100% é a forma mais pura do matiz.
• Luminosidade (0%–100%): o quanto é clara ou escura. 0% é preto, 100% é branco e 50% é a cor «verdadeira».

hsl(4, 75%, 63%) significa: um matiz avermelhado (4°), muito vívido (75% de saturação) e ligeiramente claro (63%).

Quando usar HSL

• Design systems e temas: o HSL é o melhor formato para criar escalas de cor consistentes. Quer 10 tons da sua cor principal? Mantenha o matiz e varie a luminosidade de 10% a 95%. Quer uma versão suavizada? Reduza a saturação. Isso é quase impossível de fazer intuitivamente em HEX ou RGB.
• Modo escuro / modo claro: trocar de tema significa ajustar luminosidade e saturação, o que corresponde diretamente aos parâmetros do HSL. Tailwind CSS, Radix Colors e muitos design systems modernos são construídos sobre HSL.
• Geração de cor por código: criar estados de hover, estados desabilitados, fundos e bordas a partir de uma única cor base é trivial em HSL: hsl(4, 75%, 73%) para uma variante mais clara, hsl(4, 75%, 43%) para uma mais escura.
• Acessibilidade: verificar taxas de contraste fica mais intuitivo quando você consegue ver e ajustar a luminosidade diretamente.

Quando NÃO usar HSL

• Comunicação entre equipes: a maioria das pessoas não pensa em graus e porcentagens. Dizer «o botão é hsl(4, 75%, 63%)» é menos claro do que «o botão é #E8635A» numa entrega de design.
• Impressão: assim como o RGB, o HSL é um modelo de cor de tela.

Exemplo real

Você está construindo um design system em Tailwind CSS e precisa de uma escala de cor consistente:

--brand-50: hsl(4, 75%, 95%);
--brand-100: hsl(4, 75%, 90%);
--brand-200: hsl(4, 75%, 80%);
--brand-500: hsl(4, 75%, 63%);
--brand-700: hsl(4, 75%, 43%);
--brand-900: hsl(4, 75%, 25%);

Mesmo matiz, mesma saturação, luminosidade diferente. Uma escala perfeita em 30 segundos. Tente isso em HEX.

CMYK: o formato da impressão

O que é

CMYK significa Cyan, Magenta, Yellow, Key (ciano, magenta, amarelo e preto). Descreve a cor como uma mistura de tinta aplicada sobre papel branco. Cada valor vai de 0% a 100%: 0, 57, 61, 9 significa 0% de ciano, 57% de magenta, 61% de amarelo e 9% de preto.

Diferente do RGB (que soma luz para criar cores), o CMYK subtrai luz do papel branco. Mais tinta = cor mais escura. É por isso que se chama modelo de cor subtrativo.

Quando usar CMYK

• Design para impressão: cartões de visita, folhetos, embalagens, cartazes, revistas. Qualquer arquivo enviado a uma gráfica comercial deve estar em modo de cor CMYK.
• Preparar arquivos para impressão no InDesign ou Illustrator: essas ferramentas permitem trabalhar em modo CMYK para visualizar como as cores ficarão no papel (sempre menos vibrantes do que na tela).
• Prova de cor: verificar se as cores do seu design são reproduzíveis em CMYK. Algumas cores RGB muito vívidas (especialmente verdes neon e azuis elétricos) são fisicamente impossíveis de imprimir em CMYK: ficam «fora do gamut».

Quando NÃO usar CMYK

• Qualquer coisa numa tela: sites, apps, redes sociais, apresentações, e-mails. Telas usam RGB. Especificar CMYK para um site é como dar instruções de direção em milhas náuticas: tecnicamente é uma distância, mas inútil para o trajeto.
• Edição de fotos: edite em RGB e converta para CMYK apenas na exportação final para impressão.

Exemplo real

Você projetou um cartaz no Illustrator. Antes de enviar à gráfica, converte o documento para o modo de cor CMYK (File → Document Color Mode → CMYK Color), verifica os avisos de fora do gamut e corrige os azuis elétricos que viraram um verde-azulado sujo. O PDF final é salvo em CMYK com o perfil ICC da gráfica.

Tabela de referência rápida

A cola: qual formato para cada trabalho

É possível converter entre eles?

Sim, com ressalvas.

• HEX ↔ RGB: sem perdas, são os mesmos dados em outra notação.
• RGB ↔ HSL: sem perdas, é uma transformação matemática.
• RGB → CMYK: com perdas. Algumas cores RGB (azuis vívidos, neons, verdes brilhantes) não podem ser reproduzidas em CMYK. A conversão as desloca para o equivalente imprimível mais próximo, que costuma parecer mais opaco.
• CMYK → RGB: tecnicamente possível, mas o resultado depende do perfil ICC usado. Dois conversores podem dar valores RGB ligeiramente diferentes para a mesma entrada CMYK.

Para conversões rápidas no dia a dia, um seletor de cores no celular que mostre os quatro formatos ao mesmo tempo é o fluxo mais rápido. O Color Picker Camera: HEX RGB faz exatamente isso: aponte a câmera para qualquer cor e veja HEX, RGB, HSL e CMYK lado a lado. Um toque copia qualquer valor. Disponível para iPhone e Android.

Erros comuns

1. Projetar para impressão em RGB

É o erro clássico de iniciante. Você cria um cartaz vibrante no Photoshop em modo RGB, envia à gráfica e o resultado sai lavado — sobretudo os verdes e azuis. Sempre converta para CMYK antes de exportar para impressão e confira os avisos de gamut.

2. Usar HEX quando você precisa de transparência

Se o seu design pede sobreposições semitransparentes, sombras ou efeitos de glassmorphism, mude para RGBA ou HSLA. O HEX padrão de 6 dígitos não carrega informação de opacidade, e o de 8 dígitos é pouco usado porque é difícil de ler.

3. Construir um design system em HEX

«#3B82F6 só que 20% mais claro» exige conversão, cálculo e reconversão. Em HSL: aumente a luminosidade em 20%. Tokens de design, geradores de tema e as custom properties modernas do CSS funcionam bem melhor em HSL.

4. Converter CMYK para HEX na web e esperar a mesma cor

Uma marca definida em CMYK para impressão vai parecer diferente quando convertida ingenuamente para HEX na web. A abordagem correta: compare visualmente a cor na tela com a versão impressa e defina valores HEX específicos para o uso digital. O manual de marca deve incluir os dois.

Perguntas frequentes

Qual é a diferença entre HEX e RGB?

Nenhuma na cor — apenas na notação. O HEX escreve os mesmos valores de vermelho, verde e azul em base 16. #FF0000 é idêntico a rgb(255, 0, 0). O HEX é mais curto de digitar; o RGB é mais fácil de modificar por código e suporta canal alfa (RGBA).

Quando devo usar CMYK em vez de RGB?

Sempre que o resultado final for impresso em material físico: papel, papelão, tecido, plástico. Se ficar na tela, use RGB (ou HEX/HSL). Se for impresso, mude para CMYK na etapa de exportação.

HSL é melhor que HEX?

Para design systems, temas e manipulação de cor, sim. Para comunicação rápida e copiar e colar em ferramentas, o HEX é mais prático. Eles descrevem as mesmas cores; o HSL apenas organiza a informação de um jeito que corresponde a como as pessoas pensam a cor (matiz → vivacidade → brilho).

Meu celular consegue mostrar os quatro formatos ao mesmo tempo?

Sim. O Color Picker Camera: HEX RGB captura uma cor pela câmera ou a partir de uma foto e exibe HEX, RGB, HSL e CMYK simultaneamente. Toque em qualquer valor para copiá-lo. Funciona como uma calculadora de formatos de cor do mundo real: uma captura, quatro formatos.

Resumindo

HEX para web e comunicação rápida. RGB para desenvolvimento de apps e transparência. HSL para design systems e manipulação de cor. CMYK para impressão.

Você não precisa escolher um: precisa usar o certo para cada contexto. E quando precisar converter entre eles ou capturar uma cor do mundo real nos quatro formatos de uma vez, um seletor de cores no celular é a ferramenta mais rápida que existe.

Baixe o Color Picker Camera para iPhone | Baixe para Android

Baixar PDF

Outros formatos: Markdown · Text · JSON · EPUB · JATS XML · BibTeX · RIS · CSL-JSON

Licença: CC BY 4.0