HSB 에서 RGB 색상 변환 탐구

Beginner

This tutorial is from open-source community. Access the source code

소개

이 랩에서는 JavaScript 를 사용하여 HSB 에서 RGB 로의 색상 변환 과정을 살펴봅니다. 공식을 사용하여 HSB 색상 값을 RGB 형식으로 변환하고, 그 결과를 적절한 값 범위로 변환하는 방법을 배웁니다. 이 랩을 마치면 색상 모델에 대한 이해를 높이고 JavaScript 에서 색상 모델을 사용하는 방법을 익히게 됩니다.

HSB 에서 RGB 로의 변환

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

  • 터미널/SSH 를 열고 node를 입력하여 코딩 연습을 시작합니다.
  • HSB 에서 RGB 로의 변환 공식을 사용하여 적절한 형식으로 변환합니다.
  • 입력 매개변수는 H: [0, 360], S: [0, 100], B: [0, 100] 범위 내에 있어야 합니다.
  • 모든 출력 값은 [0, 255] 범위 내에 있어야 합니다.

HSB 를 RGB 로 변환하는 데 사용할 수 있는 코드는 다음과 같습니다.

const HSBToRGB = (h, s, b) => {
  s /= 100;
  b /= 100;
  const k = (n) => (n + h / 60) % 6;
  const f = (n) => b * (1 - s * Math.max(0, Math.min(k(n), 4 - k(n), 1)));
  return [255 * f(5), 255 * f(3), 255 * f(1)];
};

예를 들어, HSB 색상 튜플 (18, 81, 99) 를 RGB 형식으로 변환하려면 다음 코드를 사용할 수 있습니다.

HSBToRGB(18, 81, 99); // [252.45, 109.31084999999996, 47.965499999999984]

요약

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