JavaScript로 무작위 HEX 색상 코드 생성하기

웹 개발을 하다 보면 배경색이나 테마를 무작위로 지정해야 하는 경우가 종종 있습니다. 이번 글에서는 호출할 때마다 무작위로 생성된 HEX 색상 코드를 반환하는 JavaScript 함수 randomColor를 작성해 보겠습니다.

구현 원리

HEX 색상 코드는 # 기호 뒤에 16진수 숫자 6자리가 붙는 형태입니다(예: #a20ee1). 따라서 다음과 같은 방식으로 색상을 생성할 수 있습니다.

• 0부터 1 사이의 난수를 반환하는 Math.random()에 16을 곱해 0~15 범위의 정수를 만듭니다.
• 비트 연산자 | 0을 사용해 소수점 이하를 버리고 정수로 변환합니다.
• toString(16)으로 해당 정수를 16진수 문자열로 바꾸고, 이 과정을 6번 반복해 # 뒤에 이어 붙입니다.

예제 코드

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());

출력 결과

위 코드를 실행하면 콘솔에 아래와 같이 매번 다른 무작위 HEX 색상 코드가 출력됩니다.

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

정리

이처럼 Math.random()과 toString(16)만 활용하면 별도의 라이브러리 없이도 간단하게 무작위 색상 생성 함수를 만들 수 있습니다. 함수를 호출할 때마다 새로운 색상이 반환되므로, 동적인 UI 테마나 데모 화면 제작 등에 유용하게 활용할 수 있습니다.