JavaScript로 16진수(Hex) 색상 코드를 RGB 값으로 변환하는 방법

웹 개발을 하다 보면 16진수(Hexadecimal) 색상 코드를 RGB 값으로 변환해야 하는 경우가 자주 발생합니다. 예를 들어 CSS에서는 #0080C0처럼 표현된 색상을 캔버스(Canvas) API나 SVG 조작 시에는 RGB 숫자 형태로 다뤄야 할 수 있습니다.

이번 글에서는 16진수 색상 문자열을 입력받아 빨강(Red), 초록(Green), 파랑(Blue) 값을 담은 객체를 반환하는 JavaScript 함수를 작성하는 방법을 알아보겠습니다.

요구 사항 정리

함수는 다음과 같이 동작해야 합니다.

hexToRgb('#0080C0') → { red: 0, green: 128, blue: 192 }

즉, '#0080C0'이라는 6자리 16진수 색상 코드가 주어지면 각 채널의 10진수 값인 0, 128, 192를 객체 형태로 반환하는 것입니다.

구현 코드

3자리 축약형(#F00)과 6자리 표준형(#FF0000) hex 코드를 모두 지원하도록 구현한 코드는 다음과 같습니다.

const hex = '#0080C0';

const hexToRGB = hex => {
  let r = 0, g = 0, b = 0;

  // 3자리 hex 처리 (예: #F00)
  if (hex.length == 4) {
    r = "0x" + hex[1] + hex[1];
    g = "0x" + hex[2] + hex[2];
    b = "0x" + hex[3] + hex[3];
  // 6자리 hex 처리 (예: #0080C0)
  } else if (hex.length == 7) {
    r = "0x" + hex[1] + hex[2];
    g = "0x" + hex[3] + hex[4];
    b = "0x" + hex[5] + hex[6];
  }

  return {
    red: +r,
    green: +g,
    blue: +b
  };
};

console.log(hexToRGB(hex));

실행 결과

{ red: 0, green: 128, blue: 192 }

코드 동작 원리

이 함수의 핵심 로직을 단계별로 살펴보겠습니다.

1. 문자열 길이에 따른 분기 처리

hex 문자열 앞에는 '#' 기호가 포함되어 있으므로, 3자리 축약형은 전체 길이가 4, 6자리 표준형은 전체 길이가 7입니다. 이를 기준으로 각각 다르게 파싱합니다. 3자리 형식의 경우 같은 문자를 두 번 반복하여 확장합니다(예: 'F' → 'FF').

2. '0x' 접두사로 16진수 표현 만들기

JavaScript에서 문자열 앞에 '0x'를 붙이면 해당 문자열을 16진수로 해석할 수 있습니다. 예를 들어 "0x80"은 10진수 128과 동일한 값입니다.

3. 단항 더하기 연산자(+)로 숫자 변환

반환 시 +r, +g, +b처럼 단항 더하기 연산자를 사용하면 16진수 문자열이 자동으로 10진수 숫자로 변환됩니다. 이는 parseInt(value, 16)을 사용하는 것과 같은 효과를 냅니다.

마무리

이처럼 간단한 함수 하나로 hex 색상 코드를 RGB 객체로 손쉽게 변환할 수 있습니다. 필요하다면 반환값을 rgb(0, 128, 192) 형태의 문자열로 조합하거나, 알파 채널(RGBA)까지 지원하도록 확장할 수도 있습니다. 실제 프로젝트에서는 입력값 유효성 검사(정규표현식 등)를 추가하여 잘못된 형식의 hex 코드에 대한 예외 처리를 함께 고려하는 것이 좋습니다.