HSL 색상 - Three.js, canvas, css

HSL은  색상표현의 한 방법으로 Hue, Saturation, and Lightness 을 의미 합니다. 색상값은 hsl(hue, saturation, lightness)로 표기합니다.

• hue : JavaScript 표준은  0 ~360으로 각도를 표기하지만, Three.js 에서는 0 ~ 1 사이 값으로 표기하고, 내부적으로는 0~ 360 으로 변환 사용됩니다.
• saturation : 색상의 밀도를 나타내며, 0 ~ 100 (퍼센트) 로 표기합니다. 100 은 완전하게 색상을 나타내지만, 50%의 경우는 gray(회색)이 겹쳐보이고, 0%의 경우는 회색으로만 나타납니다.
• lightness : 빛의 세기를 나타내며, 0 ~ 100 (퍼센트) 로 표기하며, 0 은 빛이 없으므로 완전히 어둡고, 100은 최고의 밝음입니다.

여기서 HUE 표기에 대하여 자세히 알아 보겠습니다. 아래 이미지에서 처럼 JavaScript 표준은 0 ~ 360도 로 표기합니다. 그러나 Three.js 에서는 이 값을 0 ~ 1 사이 값으로 변환 사용 합니다.

출처 : https://css-tricks.com/converting-color-spaces-in-javascript/

CSS (JavaScript 표준)

JavaScript의 표준 DOM API에서 사용하는 CSS HSL 표현은 도(degree)로 Hue 값을 설정합니다. 예를 들어, CSS에서 HSL 값을 설정하는 방법은 다음과 같습니다.

element.style.backgroundColor = "hsl(252, 100%, 50%)";

Canvas API

JavaScript의 Canvas API에서도 색상을 HSL로 지정할 수 있지만, 이때도 Hue는 도(degree) 단위로 사용됩니다:

ctx.fillStyle = 'hsl(180, 100%, 50%)';

Three.js

Three.js에서 HSL 색상을 설정할 때, Hue는 0부터 1 사이의 소수로 사용됩니다.

new THREE.Color().setHSL(0.5, 1, 1); // 싸이언 색상

내부적으로 계산은, 0.5 * 360도 =  180도  의 형식입니다. 흔히 Three.js 에서 난수를 이용하여, 색상에 변화를 주는 경우 다음과 유사한 코드를 사용 할 수 있습니다.

// 20가지의 색상을 일정한 비율로 색상을 변환하여, console 에 기록
const colorsLength = 20;
for (let i=0; i < colorsLength; i++) {
  const p = i / colorsLength + Math.random() * 0.1;
  const color = new THREE.Color().setHSL(0.7 - p, 1, 0.5);
  console.log(color)
}

만약 hue 값이 음수의 경우, 예를 들어 - 0.2 라면 순환 방식에 따라 - 0.2 + 1 = 0.8 의 결과와 같은 값을 갖게 됩니다.  360도 값으로 계산하면 -0.2 * 360 = -72도 가 되며, 색상환에서 반시계 방향으로 72도 이동한 위치를 의미합니다. 이 값을 0에서 360도 범위로 변환하면 -72 + 360 = 288도 가 됩니다. 즉, -0.2는 288도에 해당합니다. 따라서, 음수로 표기되는 경우는 1 을 더하여 양수 표기 한 것과 같습니다. 0.8 * 360 = 288