[JS] 자바스크립트 랜덤 색상(Random Color) 생성하기

HEX 색상 코드는 RGB 색상을 RRGGBB 형식의 16진수로 표현한다. HEX 코드의 최소 값은 #000000(검은색, 10진수 0), 최댓값은 #FFFFFF(흰색, 10진수 16777215)이기 때문에 0~16777215 사이의 랜덤 숫자를 16진수로 변환하고 #를 붙이면 랜덤한 HEX 색상 코드가 된다.

export const getRandomColor = ({
  transparent = false,
  transProbability = 0.2,
} = {}) => {
  // transProbability 확률로(기본값 20%) 투명값 반환
  if (transparent && Math.random() < transProbability) return "transparent";

  // 16진수로 0xFFFFFF (RGB의 최댓값)
  const MAX_COLOR_VALUE = 16777215;
  // 흰색도 포함하기 위해 + 1
  const randomColor = Math.floor(Math.random() * (MAX_COLOR_VALUE + 1));
  return `#${randomColor.toString(16).padStart(6, "0")}`;
};

 

Math.random() 메서드는 0 이상 1 미만(0 ≤ x < 1)의 난수를 반환하며, 이 난수들은 거의 균등하게 분포되도록 설계되어 있다(approximately uniform distribution). 즉, 0과 1 사이의 모든 숫자가 거의 동일한 확률로 선택된다고 볼 수 있다.

 

따라서 조건식 Math.random() < n은 0 ≤ x < 1 난수 값이 n보다 작은 경우의 확률을 의미하며, n을 확률로 해석할 수 있다. 예를 들어 n = 0.2 일 때 Math.random()이 0.2보다 작은 값을 반환할 확률은 20%이다.

 

RGB는 Red(R), Green(G), Blue(B) 3가지 색상 채널로 구성되며 각 채널은 8비트로 표현된다. 8비트는 2^8=256개의 서로 다른 값을 가질 수 있다(0-255). RGB로 표현할 수 있는 총 색상 수는 256^3=16777216 이지만 0부터 시작하므로 0-16777215 범위를 가진다.

 

• (16) #000000 = (10) 0 = RGB(0, 0, 0)
• (16) #FFFFFF = (10) 16777215 = RGB(255, 255, 255)

 

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요