Como converter hexadecimal para RGB em JavaScript

Neste artigo você vai aprender a como converter hexadecimal para RGB em JavaScript, vamos utilizar uma função super simples para isso

Fala programador(a), beleza? Bora aprender mais sobre conversão de dados e também JavaScript!

Para solucionar este problema, vamos criar uma função com uma expressão regular, que vai ler a cor em hexadecimal

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Fazendo com que o que for enviado seja separado em conjuntos de dois elementos

Estes serão convertidos a inteiros na base 16, gerando então um array com 3 elementos

Estes elementos formam a cor no padrão RGB, veja o código:

const hexToRgb = hex =>
  hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i
             ,(m, r, g, b) => '#' + r + r + g + g + b + b)
    .substring(1).match(/.{2}/g)
    .map(x => parseInt(x, 16))

console.log(hexToRgb("#11AB24")) // [17, 171, 36]

console.log(hexToRgb("#A13")) // [170, 17, 51]

Note que o resultado final é um array, como mencionado antes

Vale também lembrar que este snippet foi tirado de um tópico do Stack Over Flow

Quando eu estava buscando a solução para um problema que enfrentei durante a criação de um de meus projetos

Conclusão

Neste artigo você aprendeu a como converter hexadecimal para RGB em JavaScript

Utilizamos uma função que recebe o valor em hexadecimal, e começa a substituir a cor em pares

Retornando um array de três índices, que representa os valores da cor em RGB

É interessante pois você consegue reutilizar este valor em algum ponto do seu código, já que está no padrão de função

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!