--- title: "HEX vs RGB vs HSL vs CMYK: qual formato de cor usar e quando" author: "Lubor Šimůnek" date: 2026-03-21 modified: 2026-08-26 language: "pt" url: "https://appstoryo.com/pt/blog/hex-vs-rgb-vs-hsl-vs-cmyk-which-color-format-to-use" publisher: "AppStoryo (lapnito.cz s.r.o.)" license: "CC BY 4.0" license_url: "https://creativecommons.org/licenses/by/4.0/" category: "Design" keywords: ["Design", "article", "AppStoryo"] --- # 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. ## 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: 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