[JavaScript]임의의 색상을 생성하는 방법

임의의 색상을 생성하는 방법

JavaScript에서 임의의 색상을 생성해야 하는 경우가 존재할 수 있습니다.

 

예를 들어, 버튼을 클릭할 때마다 특정 HTML 영역에 임의의 색상을 적용하는 경우가 있겠네요.

 

JavaScript는 임의의 색상을 생성하는 기능을 제공하지 않으므로 개발자가 직접 임의의 색상을 생성하는 함수를 구현해야 합니다.

 

이번 포스팅은 JavaScript에서 임의의 색상을 생성하는 함수를 구현합니다.

---

기본 지식

컴퓨터에서 색상은 RGB 또는 16진수로 표현합니다.(HSL 표기법도 있지만, 이번 포스팅에서 설명하지 않겠습니다.)

 

RGB는 Red, Green, Blue를 나타냅니다. 그리고 RGB는 16진수로 변환할 수 있으며, 16진수는 RGB로 변환할 수 있습니다.

 

예를 들어, 16진수로 표현된 "ff640a"는 빨간색을 표현하는 "ff", 녹색을 표현하는 "64", 파란색을 표현하는 "0a"로 분할됩니다. "ff"를 10진수로 255, "64"는 10진수로 100, "0a"는 10진수로 10이므로 "ff640a"를 다음과 같이 RGB로 변환할 수 있습니다. 

// "ff640a"
[255, 100, 10]

 

16진수 두 쌍의 최대 범위는 10진수로 255이며, 16진수로 ff입니다. 따라서, Math 객체에서 제공하는 random() 메서드를 사용하여 0~255 범위 사이의 난수를 생성해야 합니다.

---

RGB 색상을 생성

Math 객체의 random() 메서드는 0과 1 사이의 부동소수점 난수를 생성합니다.

console.log(Math.random()); // 0.8365012547544803
console.log(Math.random()); // 0.5317842521465788
console.log(Math.random()); // 0.5630742079274551

정수인 난수를 생성하고 싶다면, Math.random() 반환 값에 정수를 곱한 후 Math 객체의 floor() 메서드를 호출합니다.

 

0~255 범위 사이의 난수를 생성해야 하므로 Math.random() 반환 값에 256을 곱한 후 Math.floor()를 호출하여 소수를 제거합니다.

console.log(Math.floor(Math.random() * 256)); // 107
console.log(Math.floor(Math.random() * 256)); // 234
console.log(Math.floor(Math.random() * 256)); // 69

 

RGB는 0에서 255 사이의 Red, Green, Blue를 표현하므로 Red, Green, Blue를 표현하는 0~255 범위 사이의 난수를 생성하고 해당 난수를 배열로 반환하도록 합니다.

const randomRgb = function() {
  let r = Math.floor(Math.random() * 256);
  let g = Math.floor(Math.random() * 256);
  let b = Math.floor(Math.random() * 256);
  
  return [r, g, b];
}

console.log(randomRgb()); // [137, 40, 157]
console.log(randomRgb()); // [164, 3, 196]
console.log(randomRgb()); // [230, 81, 145]

---

16진수 색상을 생성

16진수 색상을 생성하는 방법은 간단합니다. 10진수를 16진수로 변경 후 문자열로 연결하면 됩니다.

 

RGB 색상을 생성하는 함수를 호출하여 임의의 RGB 색상을 생성 후 배열에 존재하는 10진수 값을 16진수로 변환합니다.

 

16진수로 변환된 값의 길이가 1인 경우 맨 앞에 '0'을 추가 후 연결된 문자열을 반환합니다.

const randomRgb = function() {
  let r = Math.floor(Math.random() * 256);
  let g = Math.floor(Math.random() * 256);
  let b = Math.floor(Math.random() * 256);
    
  return [r, g, b];
}

const randomRgbHex = function() {
  let [r, g, b] = randomRgb();

  r = r.toString(16).length === 1 ? '0' + r.toString(16) : r.toString(16);
  g = g.toString(16).length === 1 ? '0' + g.toString(16) : g.toString(16);
  b = b.toString(16).length === 1 ? '0' + b.toString(16) : b.toString(16);

  return r + g + b;
}

console.log(randomRgbHex()); // 5b0b8c
console.log(randomRgbHex()); // 105e62
console.log(randomRgbHex()); // e4ab77