JavaScript로 RGB 색상을 HEX(16진수) 색상 코드로 변환하는 방법

웹 개발에서 RGB 색상 값을 16진수(HEX) 색상 코드로 변환해야 하는 경우가 자주 있습니다. 이번 글에서는 RGB 색상을 입력받아 해당하는 16진수 표현을 반환하는 JavaScript 함수를 작성하는 방법을 알아보겠습니다.

요구 사항

작성할 함수는 빨강(Red), 초록(Green), 파랑(Blue) 세 가지 색상 값을 담고 있는 객체를 인자로 받습니다. 그리고 이를 '#RRGGBB' 형식의 16진수 문자열로 변환하여 반환해야 합니다.

예시

rgbToHex(0, 128, 192)은 '#0080C0'을 반환해야 합니다.

구현 코드

다음은 비트 연산과 toString() 메서드를 활용한 변환 코드입니다.

const rgbColor = {
    red: 0,
    green: 51,
    blue: 155
}
function rgbToHex({
    red: r,
    green: g,
    blue: b
}) {
    const prefix = '#';
    const hex = prefix + ((1 << 24) + (r << 16) + (g << 8) + b)
    .toString(16)
    .slice(1);
    return hex;
};
console.log(rgbToHex(rgbColor));

실행 결과

위 코드를 실행하면 콘솔에 다음과 같이 출력됩니다.

#00339b

코드 동작 원리

이 코드가 어떻게 동작하는지 단계별로 살펴보겠습니다.

1. 비트 시프트 연산: (1 << 24)는 24비트째에 1을 설정하여 값이 16777216이 되도록 합니다. 이는 각 색상 채널이 정확히 8비트씩 차지하도록 자릿수를 확보하는 역할을 합니다. 이어서 (r << 16), (g << 8), b를 더하면 빨강, 초록, 파랑 값이 각각 올바른 비트 위치에 배치됩니다.

2. 16진수 변환: toString(16)은 해당 숫자를 16진수 문자열로 변환합니다.

3. 앞자리 제거: slice(1)은 맨 앞의 '1'(비트 시프트로 추가된 자릿수)을 제거하여 순수한 6자리 16진수만 남깁니다. 마지막으로 '#' 접두사를 붙여 완성된 HEX 색상 코드를 반환합니다.

이 방식은 각 채널 값을 별도로 패딩 처리하지 않아도 되기 때문에 간결하고 효율적입니다. 만약 입력 값이 0~255 범위를 벗어나지 않도록 보장해야 한다면, 함수 시작 부분에서 값의 유효성을 검사하는 로직을 추가하는 것도 좋은 방법입니다.