Conversor de HEX para RGB

Conversor de HEX para RGB

#3b82f6 converte para rgb(59, 130, 246). Cada par de dígitos hex mapeia diretamente para um canal RGB: 3b é o canal vermelho (59), 82 é verde (130), e f6 é azul (246). Ambos os formatos representam a mesma cor.

Como Hex Mapeia para RGB

Um código de cor hex é seis dígitos hexadecimais divididos em três pares. Hexadecimal é base 16, usando dígitos 0 a 9 e letras a a f. Cada par representa um valor de canal de 0 (hex 00) a 255 (hex ff).

Para #3b82f6:

Notação Abreviada Hex

Cores hex de 3 dígitos são abreviações para as de 6 dígitos. Cada dígito é duplicado: #rgb expande para #rrggbb.

#f00  ->  #ff0000  ->  rgb(255, 0, 0)
#0f0  ->  #00ff00  ->  rgb(0, 255, 0)
#abc  ->  #aabbcc  ->  rgb(170, 187, 204)

Nem todo hex de 6 dígitos pode ser abreviado.

Canais Alfa: Hex de 8 Dígitos e rgba()

O hex padrão de 6 dígitos não tem opacidade. Duas opções para transparência:

A primeira é rgba() em CSS: rgba(59, 130, 246, 0.5) adiciona 50% de opacidade.

A segunda é hex de 8 dígitos: #3b82f680. Os últimos dois dígitos são o canal alfa, também de 00 a ff.

Funções de Cor CSS

/* HEX */
color: #3b82f6;

/* RGB */
color: rgb(59 130 246);
color: rgba(59, 130, 246, 0.5);

/* HSL */
color: hsl(217 91% 60%);

Para cores estáticas em uma folha de estilo, HEX é conciso. Use rgb() ao construir cores a partir de propriedades personalizadas CSS. Use hsl() quando precisar ajustar claridade ou saturação.

Conversão em Código

def hex_to_rgb(hex_color):
    hex_color = hex_color.lstrip('#')
    return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))

hex_to_rgb('#3b82f6')  # (59, 130, 246)

function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

:root {
  --color-primary-rgb: 59, 130, 246;
}
.element {
  background: rgba(var(--color-primary-rgb), 0.1);
}