JavaScript에서 무작위 HEX 색상 코드 생성하는 방법

웹 개발을 하다 보면 배경색이나 테마 색상을 무작위로 지정해야 하는 경우가 종종 있습니다. 이번 글에서는 JavaScript를 사용하여 랜덤한 HEX 색상 코드(예: #C83343)를 생성하는 함수를 만들어 보겠습니다.

HEX 색상 코드의 구조

HEX 색상 코드는 # 기호 뒤에 6자리 문자가 붙는 형태입니다. 각 자리는 0-9 숫자와 A-F 알파벳으로 구성되며, 총 16가지 문자 조합으로 약 1,677만 가지의 색상을 표현할 수 있습니다.

랜덤 색상 생성 함수 구현하기

아래 함수는 0부터 F까지의 16개 문자 중 하나를 무작위로 선택하고, 이 과정을 6번 반복하여 완전한 HEX 색상 코드를 만듭니다.

const generateRandomColor = () => {
    const keys = '0123456789ABCDEF';
    let color = '';
    while(color.length < 6){
        const random = Math.floor(Math.random() * 16);
        color += keys[random];
    };
    return `#${color}`;
};
console.log(generateRandomColor());
console.log(generateRandomColor());
console.log(generateRandomColor());
console.log(generateRandomColor());

코드 동작 원리

함수의 핵심 로직은 다음과 같습니다.

• keys 변수에 HEX 코드에 사용되는 16개의 문자를 저장합니다.
• Math.random() * 16은 0 이상 16 미만의 실수를 생성하며, Math.floor()로 소수점을 버려 0~15 사이의 정수를 얻습니다.
• 해당 정수를 인덱스로 사용해 keys에서 문자 하나를 추출합니다.
• while 반복문을 통해 색상 문자열의 길이가 6자리가 될 때까지 위 과정을 반복합니다.
• 마지막으로 앞에 #을 붙여 완성된 HEX 색상 코드를 반환합니다.

실행 결과

함수를 여러 번 호출하면 실행할 때마다 서로 다른 색상 코드가 출력됩니다.

#C83343
#D9AAF3
#9D55CC
#28AE22

더 간결한 대안: Math.random() 활용

비트 연산자와 toString(16) 메서드를 활용하면 한 줄로도 동일한 결과를 얻을 수 있습니다.

const generateRandomColor = () => 
    `#${Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, '0').toUpperCase()}`;

이 방식은 0부터 16777215(0xFFFFFF) 사이의 난수를 생성한 뒤, 이를 16진수 문자열로 변환하고 6자리 미만일 경우 앞을 0으로 채워줍니다. 상황에 맞게 두 방식 중 편한 것을 선택하시면 됩니다.