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.

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.

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%).

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.

É 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.