JavaScript에서 랜덤 16진수 색상 코드 생성하는 방법

웹 개발을 하다 보면 호출할 때마다 무작위로 생성된 16진수(hex) 색상 코드를 반환하는 JavaScript 함수가 필요한 경우가 있습니다. 이번 글에서는 randomColor라는 함수를 직접 작성하여 매번 새로운 랜덤 색상을 만들어내는 방법을 알아보겠습니다.

구현 원리

16진수 색상 코드는 # 기호 뒤에 0부터 f까지의 16진수 문자 6개가 이어지는 형태입니다(예: #a20ee1). 따라서 구현 방식은 다음과 같습니다.

• 색상 문자열을 #으로 초기화합니다.
• 6번 반복하면서 매번 0~15 사이의 난수를 생성합니다.
• toString(16) 메서드로 해당 숫자를 16진수 문자로 변환하여 문자열에 이어 붙입니다.

예제 코드

const randomColor = () => {
    let color = '#';
    for (let i = 0; i < 6; i++){
        const random = Math.random();
        const bit = (random * 16) | 0;
        color += bit.toString(16);
    };
    return color;
};
console.log(randomColor());
console.log(randomColor());
console.log(randomColor());
console.log(randomColor());
console.log(randomColor());
console.log(randomColor());
console.log(randomColor());

실행 결과

위 코드를 실행하면 콘솔에 다음과 같이 매번 다른 랜덤 색상 코드가 출력됩니다.

#762b46
#cfa0bf
#a20ee1
#c2f7e0
#5d5822
#380f30
#805408

코드 설명

Math.random()은 0 이상 1 미만의 실수를 반환하므로, 여기에 16을 곱하면 0 이상 16 미만의 값이 됩니다. 비트 연산자 | 0을 사용하면 소수점 이하가 잘려 정수로 변환되어 0부터 15까지의 정수를 얻을 수 있습니다. 이 값을 toString(16)으로 변환하면 0~9는 그대로 숫자가 되고, 10~15는 a~f의 알파벳으로 변환됩니다. 이 과정을 6번 반복하면 완전한 형태의 16진수 색상 코드가 완성됩니다.