HEX vs RGB vs HSL vs CMYK: qual formato de cor usar e quando ============================================================ Quatro formatos de cor, quatro casos de uso diferentes. Este guia explica exatamente quando usar HEX, RGB, HSL ou CMYK, com exemplos reais de web design, impressão, redes sociais e desenvolvimento de apps. Author: Lubor Šimůnek Published: 2026-03-21 Category: Design 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 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 A cola: qual formato para cada trabalho 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 É 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 (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) 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 (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) e Android (https://play.google.com/store/apps/details?id=com.tomas.color_picker). 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 (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) 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 (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) | Baixe para Android (https://play.google.com/store/apps/details?id=com.tomas.color_picker) -- Source: https://appstoryo.com/pt/blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/) Cite as: Lubor Šimůnek (2026). HEX vs RGB vs HSL vs CMYK: qual formato de cor usar e quando. AppStoryo, lapnito.cz s.r.o. https://appstoryo.com/pt/blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use