Como converter cores HEX para RGB e vice-versa: guia para designers e devs

Modelos de cor sao sistemas matematicos para representar cores digitalmente. Se voce trabalha com desenvolvimento web, design grafico, branding ou qualquer disciplina visual, precisa entender pelo menos tres modelos: HEX, RGB e HSL. Cada um tem vantagens dependendo do contexto.

O CSS moderno aceita os tres formatos. Voce pode escrever o mesmo vermelho destas formas:

• HEX: #FF0000
• RGB: rgb(255, 0, 0)
• HSL: hsl(0, 100%, 50%)

Os tres produzem exatamente a mesma cor, mas sua utilidade varia. HEX e compacto para escrever no CSS. RGB e intuitivo quando pensamos em mistura de luz. HSL e ideal quando voce quer ajustar luminosidade ou saturacao sem mudar o tom.

Com o conversor de cores da NexTools, voce pode converter entre todos esses formatos instantaneamente e ver uma previa em tempo real da cor.

O formato HEX (hexadecimal) representa cores com um sinal # seguido de 6 digitos hexadecimais (0-9, A-F). Os digitos sao agrupados em pares: os dois primeiros para vermelho, os dois seguintes para verde e os dois ultimos para azul.

Estrutura: #RRGGBB

Cada par vai de 00 (0 decimal, nenhum dessa cor) a FF (255 decimal, intensidade maxima):

Cor	HEX	Explicacao
Preto	#000000	Zero vermelho, verde e azul
Branco	#FFFFFF	Maximo vermelho, verde e azul
Vermelho puro	#FF0000	Maximo vermelho, sem verde nem azul
Verde puro	#00FF00	Sem vermelho, maximo verde, sem azul
Azul puro	#0000FF	Sem vermelho, sem verde, maximo azul
Amarelo	#FFFF00	Maximo vermelho e verde, sem azul
Cinza medio	#808080	Quantidades iguais medias

HEX abreviado: Se cada par tem digitos repetidos, voce pode abreviar: #FF0000 = #F00, #AABBCC = #ABC. Mas #A1B2C3 nao pode ser abreviado.

HEX com transparencia: Voce pode adicionar dois digitos para alfa (opacidade): #FF000080 e vermelho com 50% de opacidade.

O modelo RGB (Red, Green, Blue) e baseado na sintese aditiva de luz. Cada componente vai de 0 a 255, e ao mistura-los sao produzidos milhoes de cores (exatamente 16.777.216 combinacoes).

No CSS: rgb(vermelho, verde, azul)

Exemplos praticos:

• rgb(255, 165, 0) = laranja
• rgb(128, 0, 128) = roxo
• rgb(0, 128, 128) = teal
• rgb(255, 192, 203) = rosa

Com transparencia (RGBA): rgba(255, 0, 0, 0.5) = vermelho com 50% de opacidade.

Conversao HEX para RGB: Converta cada par hexadecimal para decimal. Para #3A7BF2: 3A = 58, 7B = 123, F2 = 242. Resultado: rgb(58, 123, 242).

Conversao RGB para HEX: Converta cada valor decimal para hexadecimal de 2 digitos. Para rgb(58, 123, 242): 58 = 3A, 123 = 7B, 242 = F2. Resultado: #3A7BF2.

O modelo HSL (Hue, Saturation, Lightness) e o mais intuitivo para humanos porque separa a cor em tres dimensoes faceis de entender:

• Hue (Tom): A cor base em graus de 0 a 360. 0°/360° = vermelho, 120° = verde, 240° = azul.
• Saturation (Saturacao): Quao "viva" e a cor, de 0% (cinza) a 100% (cor pura).
• Lightness (Luminosidade): Quao clara ou escura, de 0% (preto) a 100% (branco). 50% e a cor pura.

Por que HSL e poderoso: Se voce tem um botao azul hsl(220, 80%, 50%) e quer a versao mais clara para hover, basta aumentar a luminosidade: hsl(220, 80%, 60%). Com HEX ou RGB, teria que calcular manualmente cada componente.

Criar paletas com HSL:

• Monocromatica: Mantem o mesmo tom, varia saturacao e luminosidade.
• Complementar: Some 180° ao tom. O complemento de hsl(220, 80%, 50%) e hsl(40, 80%, 50%).
• Triadica: Some 120° e 240° ao tom. Tres cores equidistantes na roda cromatica.

Experimente paletas de cores com o gerador de paletas.

Estas sao as cores que voce encontrara com mais frequencia no design web e suas equivalencias:

Nome	HEX	RGB	Uso comum
Tailwind Blue 500	#3B82F6	rgb(59,130,246)	CTAs, links
Tailwind Red 500	#EF4444	rgb(239,68,68)	Erros, alertas
Tailwind Green 500	#22C55E	rgb(34,197,94)	Sucesso, confirmacao
Tailwind Yellow 500	#EAB308	rgb(234,179,8)	Avisos
Tailwind Gray 900	#111827	rgb(17,24,39)	Texto principal
NexTools Primary	#C75B39	rgb(199,91,57)	Terracota, marca

Para encontrar a cor exata de qualquer site, use a ferramenta de seletor de cores.

Enquanto RGB e HEX sao para telas (luz), CMYK (Cyan, Magenta, Yellow, Key/Black) e o modelo para impressao (tinta). Se voce enviar um design para grafica, precisa saber a diferenca.

Por que as cores parecem diferentes impressas: Uma tela emite luz (RGB) enquanto o papel reflete luz (CMYK). A gama de cores (gamut) do CMYK e menor que a do RGB, o que significa que algumas cores vibrantes que voce ve na tela nao podem ser reproduzidas exatamente no papel.

• Azuis eletricos e verdes neon perdem vivacidade em CMYK
• Vermelhos e laranjas costumam se manter bem
• O preto puro em CMYK e C:75 M:68 Y:67 K:90 (chamado "rich black"), nao C:0 M:0 Y:0 K:100

Se projetar para impressao, sempre trabalhe em CMYK desde o inicio em vez de converter no final.

Escolher cores nao e so questao de estetica. As diretrizes WCAG 2.1 estabelecem proporcoes minimas de contraste entre texto e fundo:

• AA (minimo): Proporcao de contraste de 4.5:1 para texto normal, 3:1 para texto grande (18px+ ou 14px+ negrito)
• AAA (otimo): Proporcao de contraste de 7:1 para texto normal, 4.5:1 para texto grande

Exemplo: texto branco #FFFFFF sobre fundo azul #3B82F6 tem proporcao de contraste de 3.1:1, que passa AA para texto grande mas NAO para texto normal. Voce precisa de um azul mais escuro como #1D4ED8 (proporcao 6.1:1).

Verifique sempre o contraste das suas combinacoes com a ferramenta de verificacao de contraste.

Dado: Aproximadamente 8% dos homens e 0.5% das mulheres tem algum grau de daltonismo. Nunca use so cor para transmitir informacao critica.

No desenvolvimento web moderno, as cores sao gerenciadas com CSS Custom Properties (variaveis CSS) para facilitar temas e modo escuro:

:root {
  --color-primary: #C75B39;
  --color-background: #FFFFFF;
  --color-text: #1A1A1A;
}

.dark {
  --color-primary: #E8956E;
  --color-background: #1A1A1A;
  --color-text: #F5F5F5;
}

Com essa abordagem, mudar toda a paleta de um site requer modificar apenas as variaveis, nao cada seletor individual. Frameworks como Tailwind CSS usam esse padrao internamente.

Dica: Ao criar um tema escuro, nao inverta simplesmente as cores. Reduza ligeiramente a saturacao e use cinzas quentes em vez de preto puro (#1A1A1A em vez de #000000).

Gere gradientes CSS personalizados para seus temas com o gerador de gradientes.