Convertidor de cores HEX para RGB

O que é um código de cores HEX?

Um código de cor HEX é uma sequência alfanumérica de seis caracteres usada em web design e gráficos digitais para representar uma cor específica.#RRGGBB, onde cada par de dois caracteres codifica a intensidade de uma das três cores primárias aditivas - vermelho (RR), verde (GG) e azul (BB) - usando notação hexadecimal (base 16).00(intensidade zero) paraFF(intensidade máxima, equivalente a 255 em decimais).

Os códigos HEX se originaram da necessidade de definir cores em HTML e CSS sem depender de palavras-chave de cores nomeadas. Enquanto o CSS agora suporta vários formatos de cores, incluindorgb(), hsl(), eoklch(), HEX continua a ser a notação mais usada no desenvolvimento de front-end, transferências de design e diretrizes de branding.

O número total de cores únicas representáveis com códigos HEX de seis dígitos é 16.777.216 (256 x 256 x 256). Isso é muitas vezes referido como "True Color" ou "cor de 24 bits", que corresponde à profundidade de cor da maioria dos monitores modernos. Cada canal recebe 8 bits (um byte), e três canais juntos produzem 24 bits de dados de cor.

Os códigos HEX são insensíveis a maiúsculas e minúsculas, portanto#ff8000e#FF8000Alguns guias de estilo preferem maiúsculas para facilidade de leitura, enquanto os minificadores CSS geralmente produzem minúsculas para salvar bytes - embora na prática a diferença seja insignificante.

Como converter HEX para RGB passo a passo

A conversão de um código de cor HEX para o seu equivalente RGB é simples. O processo envolve dividir a sequência de seis caracteres em três pares e converter cada par de hexadecimal (base 16) para decimal (base 10).

1. Remova o símbolo de hash.Se o código HEX começar por#Por exemplo,#1A2B3Ctorna-se1A2B3C.
2. Dividam-se em três pares.Divida a sequência restante em três grupos de dois caracteres:1A, 2B, 3C.
3. Converta cada par em decimal.Utilize o sistema hexadecimal, em que o primeiro algarismo é multiplicado por 16 e o segundo algarismo é adicionado:
   • Vermelho:1A-> (1 x 16) + 10 =26
   • Verde:2B-> (2 x 16) + 11 =43
   • Azul:3C-> (3 x 16) + 12 =60
4. Escreva o valor RGB.Combinar os três valores decimais:rgb(26, 43, 60).

Os dígitos hexadecimais e seus equivalentes decimais são: 0=0, 1=1, 2=2, 3=3, 4=4, 5=5, 6=6, 7=7, 8=8, 9=9, A=10, B=11, C=12, D=13, E=14, F=15. Memorizar A até F é a única parte que difere da aritmética decimal padrão.

Para conversão programática, a maioria das linguagens oferece funções embutidas.parseInt("1A", 16)Reembolsos26Em Python,int("1A", 16)O próprio CSS lida com ambos os formatos de forma nativa, então a conversão é principalmente útil quando você precisa manipular canais de cores individuais no código - por exemplo, ajustando o brilho, criando gradientes programaticamente, ou misturando duas cores.

Códigos HEX de 3 ou 6 dígitos

O CSS suporta um formato abreviado de 3 dígitos HEX (#RGB) como uma conveniência quando cada um dos três pares consiste em dígitos idênticos.

• #F80se expande para#FF8800-> rgb ((255, 136, 0)
• #FFFse expande para#FFFFFF-> rgb ((255, 255, 255)
• #000se expande para#000000-> rgb ((0, 0, 0)
• #09Cse expande para#0099CC-> rgb{0, 153, 204)
• #A3Fse expande para#AA33FF-> rgb{170, 51, 255)

A notação de 3 dígitos reduz o número de cores disponíveis de 16,7 milhões para apenas 4.096 (16 x 16 x 16), por isso não pode representar todas as cores. É mais comumente usado para cores simples ou conhecidas em arquivos CSS onde a brevidade é valorizada.

CSS também suporta 4 dígitos (#RGBA) e de 8 dígitos (#RRGGBBAA) Códigos HEX que incluem um canal alfa (transparência) O valor alfa segue a mesma lógica hexadecimal:FFé totalmente opaco e00é totalmente transparente.#FF880080representa a corrgb(255, 136, 0)Nosso conversor se concentra nos formatos padrão de 3 e 6 dígitos; se você inserir um código com um canal alfa, ele processará apenas a parte RGB.

HEX para a tabela de referência RGB

Abaixo está uma tabela de referência de cores HEX comuns e seus equivalentes RGB.

O CSS define 147 cores nomeadas no total, cada uma com um valor HEX correspondente. Embora as cores nomeadas sejam convenientes para prototipagem, os projetos profissionais normalmente dependem de valores HEX ou RGB para precisão e consistência em navegadores e ferramentas de design.

Cores de Marcas Populares - Valores HEX e RGB

Desenvolvedores e designers frequentemente precisam dos valores exatos HEX e RGB das cores de marcas populares para maquetes, integrações e guias de estilo.

As diretrizes de marca geralmente especificam cores em vários formatos (HEX, RGB, CMYK, Pantone). Ao implementar cores de marca no CSS, sempre confirme os valores com a página oficial de recursos da marca para garantir a precisão. As cores podem mudar ligeiramente entre as telas, portanto, a consistência no código é essencial.

Modelos de cores comparados: HEX, RGB, HSL e CMYK

Entender quando usar cada modelo de cor ajuda você a trabalhar de forma mais eficiente em diferentes ferramentas e mídias:

HEX e RGB são matematicamente idênticos-- eles representam o mesmo espaço de cores usando notação diferente. A conversão entre eles é uma tradução simples de base-16 para base-10 sem perda de precisão ou diferenças de gama. HSL, por outro lado, é uma transformação de RGB em um sistema de coordenadas cilíndrico que facilita o raciocínio sobre matiz, saturação e leveza de forma independente. CMYK é um modelo de cor subtrativo usado na impressão e não pode representar todas as cores RGB (e vice-versa), então as conversões entre RGB e CMYK são aproximadas.

No CSS moderno (nível 4), ocolor()função e novos espaços de cores comooklch()edisplay-p3No entanto, HEX e RGB permanecem a linha de base para a compatibilidade com a web e são suportados por todos os navegadores em uso hoje.

Usando HEX e RGB em CSS e JavaScript

Ambos os valores HEX e RGB são válidos em CSS e produzem resultados idênticos.

Declarações CSS:

/* HEX notation */
body { background-color: #1A2B3C; }

/* RGB notation */
body { background-color: rgb(26, 43, 60); }

/* RGB with alpha (transparency) */
.overlay { background-color: rgba(26, 43, 60, 0.5); }

/* Modern CSS — space-separated syntax */
.card { color: rgb(26 43 60 / 80%); }

Funções de conversão JavaScript:

// HEX to RGB
function hexToRgb(hex) {
  const h = hex.replace('#', '');
  return {
    r: parseInt(h.substring(0, 2), 16),
    g: parseInt(h.substring(2, 4), 16),
    b: parseInt(h.substring(4, 6), 16)
  };
}

// RGB to HEX
function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(v => v.toString(16).padStart(2, '0'))
    .join('').toUpperCase();
}

Ao trabalhar com a API HTML Canvas, as cores geralmente devem ser definidas como strings."#FF8000"e"rgb(255, 128, 0)"trabalho parafillStyleestrokeStyleContudo, ogetImageData()O método retorna dados de pixel como uma matriz de 0 - 255 inteiros (RGBA), tornando o RGB o formato natural para manipulação em nível de pixel.

Em propriedades (variáveis) personalizadas do CSS, os valores HEX são geralmente armazenados para simplificação:

:root {
  --primary: #4A90E2;
  --primary-rgb: 74, 144, 226; /* for use with rgba() */
}
.element {
  background: rgba(var(--primary-rgb), 0.3);
}

Este padrão de armazenar valores de canal RGB brutos como uma variável CSS é uma técnica popular que permite aplicar opacidade dinamicamente sem converter entre formatos no tempo de execução.

Acessibilidade e Contraste de Cores

A conversão de HEX para RGB é muitas vezes o primeiro passo no cálculo de rácios de contraste de cores para conformidade de acessibilidade.4.5: 1para o texto normal e3: 1para texto grande (18px+ negrito ou 24px+ regular).

A fórmula da relação de contraste requer aluminância relativade cada cor, que é calculado a partir de valores RGB lineares. Os passos são:

1. Converter HEX para RGB (0 - 255 por canal).
2. Normalize cada canal para 0 - 1 dividindo por 255.
3. Aplique a fórmula de linearização sRGB: se o valor for <= 0,04045, divida por 12,92; caso contrário, calcule ((valor + 0,055) / 1,055) ^ 2.4.
4. Calcular a luminância: L = 0,2126 x R + 0,7152 x G + 0,0722 x B.
5. Calcular a relação de contraste entre duas cores: (L1 + 0,05) / (L2 + 0,05) em que L1 é a cor mais clara.

Como você pode ver, os valores RGB são a entrada essencial para cada cálculo de contraste de acessibilidade. Ferramentas como o WebAIM Contrast Checker, o selecionador de cores do Chrome DevTools e o scanner de acessibilidade do machado executam essa conversão internamente.

Para os designers, uma regra rápida: o texto escuro em um fundo claro (ou vice-versa) com uma diferença de luminança de pelo menos 125 e uma diferença de cor de pelo menos 500 (usando a soma das diferenças absolutas entre os canais R, G e B) geralmente passará os padrões WCAG AA.