Escolha qualquer cor — digamos, um coral quente. Agora descreva-a de quatro maneiras:
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 (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.
color: #E8635A; é a forma mais comum de definir cor na web.#E8635A80), que é menos legível, ou mudar para RGBA.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 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.
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.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 significa Hue, Saturation, Lightness (matiz, saturação, luminosidade):
hsl(4, 75%, 63%) significa: um matiz avermelhado (4°), muito vívido (75% de saturação) e ligeiramente claro (63%).
hsl(4, 75%, 73%) para uma variante mais clara, hsl(4, 75%, 43%) para uma mais escura.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 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.
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.
| Formato | Melhor para | Faixa | Suporta transparência | Legível para humanos | Seguro para impressão |
|---|---|---|---|---|---|
| HEX | Web, CSS, manuais de marca | #000000 – #FFFFFF | Só com 8 dígitos (#RRGGBBAA) | Média | Não |
| RGB | Telas, apps, gradientes | 0–255 por canal | Sim (RGBA) | Média | Não |
| HSL | Design systems, temas | 0°–360°, 0%–100%, 0%–100% | Sim (HSLA) | Alta | Não |
| CMYK | Impressão, embalagens | 0%–100% por canal | Não | Baixa | Sim |
| Seu projeto | Use este formato | Por quê |
|---|---|---|
| CSS de site | HEX ou HSL | HEX pela simplicidade; HSL para design systems com temas |
| App móvel (iOS/Android) | RGB/RGBA | Frameworks nativos usam RGB internamente |
| Arquivo de design no Figma / Sketch | HEX | É a entrada padrão nas ferramentas de design |
| Design system / tokens | HSL | Escalas e variantes são triviais em HSL |
| Artes para redes sociais | HEX ou RGB | Só digital; Canva e Photoshop aceitam ambos |
| Cartão de visita / folheto | CMYK | Vai para uma gráfica física |
| Embalagem de produto | CMYK + Pantone | Impressão + consistência da cor da marca |
| Modelo de e-mail | HEX | Clientes de e-mail suportam HEX de forma confiável |
| Lâmpadas inteligentes / LEDs | RGB | O hardware de LED usa RGB nativamente |
| Documento de manual de marca | Os quatro | Cada equipe precisa de um formato diferente |
Sim, com ressalvas.
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.
É 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.
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.
«#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.
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.
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).
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.
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).
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.
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
" }