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

Mesma cor, quatro idiomas diferentes

Veja este coral. É exatamente a mesma cor, mas pode ser escrita de quatro maneiras diferentes:

Cada formato tem seu propósito. Escolher o errado não vai quebrar seu projeto, mas escolher o certo vai economizar tempo, evitar erros de conversão e manter a consistência da sua marca em todas as plataformas.

Este guia explica exatamente quando usar cada um, com exemplos reais e referências rápidas.

HEX: O padrão da web

O que é: Um código hexadecimal de 6 dígitos que representa valores de vermelho, verde e azul. Sempre começa com #. Exemplo: #FF6F61 significa 255 de vermelho, 111 de verde, 97 de azul.

Quando usar HEX

• Folhas de estilo CSS — É o formato padrão que a maioria dos desenvolvedores web usa e espera.
• Ferramentas de design — Figma, Sketch e Canva mostram HEX de forma proeminente nos seus seletores de cor.
• Guias de marca — A maioria dos guias de marca lista cores em HEX porque é curto e fácil de copiar e colar.
• Comunicação — Quando precisa compartilhar uma cor exata no Slack ou e-mail, HEX é universalmente compreendido.

Quando NÃO usar HEX

• Quando precisa de transparência — HEX não suporta alfa nativamente. Você pode usar HEX de 8 dígitos (#FF6F6180), mas o suporte é inconsistente entre ferramentas.
• Manipulação programática de cores — Clarear ou escurecer uma cor HEX requer conversão primeiro.
• Design para impressão — A impressão usa CMYK. Enviar HEX para uma gráfica garante um desajuste de cor.

Exemplo real: Variáveis CSS

:root {
  --brand-primary: #FF6F61;
  --brand-dark: #CC5850;
  --brand-light: #FF9A91;
  --text-on-primary: #FFFFFF;
}

.button-primary {
  background-color: var(--brand-primary);
  color: var(--text-on-primary);
}

RGB: O modelo de cor de tela

O que é: Três números (0–255) que representam vermelho, verde e azul, as cores reais de luz emitidas pela sua tela. Exemplo: rgb(255, 111, 97).

Quando usar RGB

• Transparência (RGBA) — rgba(255, 111, 97, 0.5) dá controle exato de opacidade. É o método mais amplamente suportado para cores semitransparentes em CSS.
• Desenvolvimento de apps — Swift, Kotlin e Flutter usam valores RGB internamente. Trabalhar em RGB evita conversões desnecessárias.
• Iluminação LED e IoT — Fitas LED e lâmpadas inteligentes esperam valores RGB.
• Matemática de cor — Misturar duas cores ou interpolar entre elas é aritmética simples em RGB.

Quando NÃO usar RGB

• Design para impressão — Os valores RGB não correspondem diretamente à mistura de tintas. Sempre converta para CMYK antes de enviar para a gráfica.
• Ajustar saturação ou brilho — Mudar a saturação em RGB requer fórmulas complexas. HSL é muito mais fácil para isso.

Exemplo real: React Native

const Colors = {
  coral: 'rgba(255, 111, 97, 1.0)',
  coralFaded: 'rgba(255, 111, 97, 0.5)',
  coralOverlay: 'rgba(255, 111, 97, 0.15)',
};

<View style={{ backgroundColor: Colors.coralOverlay }}>
  <Text style={{ color: Colors.coral }}>Hello</Text>
</View>

HSL: O formato do designer

O que é: Três valores — Matiz (0–360°, posição na roda de cores), Saturação (0–100%%, de cinza a vibrante) e Luminosidade (0–100%%, de preto a branco). Exemplo: hsl(5, 100%%, 69%%).

Quando usar HSL

• Sistemas de design — Crie uma escala de cores completa mantendo o matiz e a saturação fixos e mudando apenas a luminosidade.
• Modo escuro — Gerar variantes escuras é tão simples quanto reduzir a luminosidade. Sem adivinhação, sem fórmulas.
• Geração programática de cores — Precisa de 12 cores distintas igualmente espaçadas? Incremente o matiz em 30° mantendo saturação e luminosidade iguais.
• Acessibilidade — Verificar o contraste é mais intuitivo quando você pode ler o valor de luminosidade diretamente.

Quando NÃO usar HSL

• Comunicação entre equipes — A maioria das pessoas não pensa em matiz/saturação/luminosidade. HEX ou RGB costumam ser mais claros em conversas.
• Fluxos de trabalho de impressão — HSL não tem equivalente direto na impressão. Converta para CMYK primeiro.

Exemplo real: Escala de cores com Tailwind CSS

/* tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      colors: {
        coral: {
          50:  'hsl(5, 100%%, 95%%)',
          100: 'hsl(5, 100%%, 90%%)',
          200: 'hsl(5, 100%%, 82%%)',
          300: 'hsl(5, 100%%, 75%%)',
          400: 'hsl(5, 100%%, 69%%)', /* base */
          500: 'hsl(5, 85%%, 58%%)',
          600: 'hsl(5, 70%%, 48%%)',
          700: 'hsl(5, 65%%, 38%%)',
          800: 'hsl(5, 60%%, 28%%)',
          900: 'hsl(5, 55%%, 18%%)',
        }
      }
    }
  }
}

CMYK: O formato de impressão

O que é: Quatro valores — Ciano, Magenta, Amarelo e Preto (Key). Diferente do RGB (que adiciona luz), CMYK é subtrativo — descreve quanta tinta absorve a luz do papel branco. Exemplo: 0, 56, 62, 0.

Quando usar CMYK

• Tudo que é impresso — Cartões de visita, pôsteres, embalagens, revistas. Se passa por uma gráfica, deve ser CMYK.
• InDesign e fluxos de impressão — Projete em CMYK desde o início para evitar surpresas com cores fora do alcance da impressora.
• Provas de cor — As provas na tela simulam a saída da impressora, o que só funciona quando suas cores fonte já estão em CMYK.

Quando NÃO usar CMYK

• Telas — Os monitores usam luz (RGB). Os valores CMYK devem ser convertidos, e a conversão é sempre uma aproximação.
• Edição de fotos — Trabalhe em RGB durante a edição. Converta para CMYK apenas como último passo se for impresso.

Exemplo real: Exportar do Illustrator

/* Illustrator: File > Document Color Mode > CMYK */
/* Export settings for print-ready PDF: */

Color mode:      CMYK
Profile:         U.S. Web Coated (SWOP) v2  /* or your printer's ICC */
Bleed:           3 mm (all sides)
Marks:           Trim marks ON
Flatten:         Transparent objects

Tabela de referência rápida

Folha de referência: Tipo de projeto → Formato de cor

Conversões: O que você precisa saber

• HEX ↔ RGB — Conversão sem perda. São representações diferentes do mesmo modelo. #FF6F61 é exatamente rgb(255, 111, 97).
• RGB ↔ HSL — Conversão sem perda. São expressões matemáticas diferentes do mesmo conjunto de cores.
• RGB → CMYK — Conversão com perda. O alcance de cores do CMYK é menor que o do RGB. Cores vibrantes de tela frequentemente ficam apagadas na impressão.
• CMYK → RGB — O resultado depende do perfil ICC utilizado. O mesmo valor CMYK pode parecer diferente com perfis diferentes.

O app Color Picker Camera mostra os quatro formatos simultaneamente — aponte para qualquer cor no mundo real e obtenha HEX, RGB, HSL e CMYK instantaneamente. Sem conversão manual.

Erros comuns (e como evitá-los)

1. Enviar RGB para a gráfica

As impressoras misturam tintas, não luz. Se enviar um arquivo RGB, o software da gráfica vai adivinhar a conversão CMYK e os resultados raramente coincidem com o que você vê na tela. Projete sempre para impressão em CMYK desde o início.

2. Usar HEX para transparência

O HEX de 8 dígitos (#FF6F6180) existe, mas muitas ferramentas não o reconhecem. Use rgba() ou hsla() para transparência confiável.

3. Construir um sistema de design apenas com HEX

Gerar tons claros e escuros a partir de um código HEX requer tentativa e erro. HSL permite mudar a luminosidade diretamente, tornando as escalas de cor previsíveis e consistentes.

4. Converter CMYK → HEX e esperar a mesma cor

CMYK tem um alcance menor que RGB/HEX. Quando converte de volta, a cor é aproximada e pode parecer apagada ou ligeiramente alterada. Verifique sempre visualmente.

Perguntas frequentes

Qual é a diferença entre HEX e RGB?

Nenhuma em termos de cores disponíveis. Ambos cobrem os mesmos 16,7 milhões de cores. HEX é uma forma mais curta de escrever valores RGB em notação hexadecimal. #FF6F61 = rgb(255, 111, 97). A única diferença prática é a transparência: RGB tem RGBA integrado, enquanto HEX de 8 dígitos tem suporte limitado.

Quando devo usar CMYK?

Sempre que seu design for impresso fisicamente: cartões de visita, folhetos, pôsteres, embalagens. Se será visualizado apenas em tela, fique com HEX, RGB ou HSL.

HSL é melhor que RGB?

Não é melhor, é mais fácil de raciocinar para designers. Se precisa criar um esquema de cores, gerar temas de modo escuro ou verificar contraste de acessibilidade, HSL é mais intuitivo. Para desenvolvimento de apps onde os frameworks esperam RGB, use RGB.

Existe algum app que mostre os 4 formatos de cor ao mesmo tempo?

Sim. Color Picker Camera permite apontar seu celular para qualquer cor do mundo real e ver instantaneamente HEX, RGB, HSL e CMYK em uma única tela. Disponível para iOS e Android.

Em resumo

Use HEX para a web. Use RGB para apps e telas. Use HSL para sistemas de design e temas. Use CMYK para impressão.

Se você trabalha com cores do mundo real — uma parede pintada, uma amostra de tecido, um logotipo em uma placa — Color Picker Camera funciona como sua calculadora de cores. Aponte, capture e obtenha os quatro formatos instantaneamente.

Baixar para iOS Baixar para Android