RGB 를 HSL 색상으로 변환하기

소개

이 랩에서는 RGB 색상 튜플을 HSL 형식으로 변환하는 방법을 살펴봅니다. RGB 를 HSL 로 변환하는 공식을 사용하고 JavaScript 를 사용하여 구현할 것입니다. 이 랩을 마치면 RGB 색상을 HSL 형식으로 변환하고 프로젝트에서 색상 값을 조작하는 방법에 대한 이해도가 높아질 것입니다.

RGB 를 HSL 로 변환하기

RGB 색상 튜플을 HSL 형식으로 변환하려면 다음 단계를 따르세요.

1. 터미널/SSH 를 열어 코딩 연습을 시작합니다.
2. node를 입력하고 Enter 키를 누릅니다.
3. RGB 를 HSL 로 변환하는 공식을 사용하여 적절한 형식으로 변환합니다.
4. 모든 입력 매개변수가 [0, 255] 범위 내에 있는지 확인합니다.
5. 결과 값은 H: [0, 360], S: [0, 100], L: [0, 100] 범위 내에 있어야 합니다.

다음은 JavaScript 에서 RGBToHSL 함수의 예시입니다.

const RGBToHSL = (r, g, b) => {
  r /= 255;
  g /= 255;
  b /= 255;
  const l = Math.max(r, g, b);
  const s = l - Math.min(r, g, b);
  const h = s
    ? l === r
      ? (g - b) / s
      : l === g
        ? 2 + (b - r) / s
        : 4 + (r - g) / s
    : 0;
  return [
    60 * h < 0 ? 60 * h + 360 : 60 * h,
    100 * (s ? (l <= 0.5 ? s / (2 * l - s) : s / (2 - (2 * l - s))) : 0),
    (100 * (2 * l - s)) / 2
  ];
};

다음은 RGBToHSL 함수를 사용하는 예시입니다.

RGBToHSL(45, 23, 11); // [21.17647, 60.71428, 10.98039]

요약

축하합니다! RGB 를 HSL 로 변환하는 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 실력을 향상시킬 수 있습니다.