[JavaScript] 랜덤 RGB 색 만들기

컬러 적용을 할 때 항상 웹에 널린 hex코드를 가져와서 썼었는데, 직접 랜덤 rgb값을 생성하는 함수를 만들 일이 있었다.

JavaScript에서는 어떻게 이를 구현할 수 있는지 알아보았고, 가장 대표적으로 사용하는 RGB값과 16진수(hex code)를 생성하는 함수를 구현하는 법을 알아보았다.

컴퓨터에서 색상을 표기하는 방법?

여러가지 방법이 있지만 대부분 RGB 또는 16진수로 표기한다.
RGB는 Red, Green, Blue를 의미하며 16진수로 변환이 가능하고, 또 16진수에서 RGB로의 변환도 가능하다.

• 16진수
  "ff640a"
  -> ff: red, 64: green, 0a: blue
• RGB
  [255, 100, 10]
  -> ff의 10진수: 255, 64의 10진수: 100, 0a의 10진수: 10

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

RGB 색상 생성하기

const generateRGB = function () {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);

  return [r, g, b];
}

console.log(generateRGB());
// in result
// [ 64, 33, 11 ]

Math.random()메서드 사용 시 소수점으로 떨어지므로 정수로 변환하기 위해 Math.floor()로 감싸준다.

16진수 색상 생성하기

10진수를 16진수로 변경 후 문자열로 연결해주면 된다.
주의할 점은 16진수로 변환된 값의 길이가 1인 경우 맨 앞에 '0'을 추가 후 연결된 문자열을 리턴하도록 해야 한다.

const generateRGB = function () {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);

  return [r, g, b];
}

const convertRGBtoHex = function () {
  let [r, g, b] = generateRGB();

  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(convertRGBtoHex());
//in result
//d06fe9

출처: https://developer-talk.tistory.com/801