HSL 색상의 3D 표현 방식

1 개요[ | ]

HSL 색상의 3D 표현 방식

HSL 색상 모델(Hue, Saturation, Lightness)은 RGB 색 공간을 사람이 이해하기 쉬운 색상, 채도, 밝기 형태로 변환한 모델이다. 이를 3차원 공간에서 시각화할 때는 다양한 기하학적 형상이 사용된다.

HSL을 3차원으로 표현하는 목적은 색상 간 관계를 직관적으로 이해하고, 채도·명도 변화에 따른 색의 분포를 시각적으로 확인하는 데 있다. 형상 선택과 좌표 변환 방식에 따라 채도 범위, 밝기 분포, 지각 균일성 등의 특성이 달라진다.

2 표현 방식 비교[ | ]

방식	좌표 정의	형태적 특징	극	비고
원기둥	[math]\displaystyle{ z = 2L-1 }[/math] _{(범위: -1 ~ 1)} [math]\displaystyle{ r_z = S }[/math] _{(범위: 0 ~ 1)}	모든 밝기에서 채도 폭 일정	면	극지방 채도 효과 미반영
쌍원뿔	[math]\displaystyle{ z = 2L-1 }[/math] _{(범위: -1 ~ 1)} [math]\displaystyle{ r_z = S(1 - \|z\|) }[/math] _{(범위: 0 ~ 1)}	밝기 양끝에서 채도 폭 0, 중앙에서 최대	점	적도에서 기울기 불연속
구(elliptical)	[math]\displaystyle{ z = 2L-1 }[/math] _{(범위: -1 ~ 1)} [math]\displaystyle{ r_z = S\sqrt{1-z^2} }[/math] _{(범위: 0 ~ 1)}	밝기를 z축에 선형 매핑, 극 부근 채도 폭 압축	점	구형이지만 구면좌표계 아님
구(spherical)	[math]\displaystyle{ \varphi = (2L-1)\tfrac{\pi}{2} }[/math] _{(범위: -π/2 ~ π/2)} [math]\displaystyle{ r = S\cos\varphi }[/math] _{(범위: 0 ~ 1)}	밝기를 위도에 선형 매핑, 표면상 채도 폭 균등 분포	선	중심에서 흑백 접촉

3 구면좌표 사영[ | ]

사영	z 계산	r_z 계산	r 계산	lat 계산	특징
Elliptical	[math]\displaystyle{ z = 2L - 1 }[/math]	[math]\displaystyle{ r_z = S\sqrt{1 - z^2} }[/math]	[math]\displaystyle{ r = \sqrt{r_z^2 + z^2} }[/math]	[math]\displaystyle{ \varphi = \operatorname{atan2}(z, r_z) }[/math]	밝기 비교적 등간격 ★
Elliptical Arc	[math]\displaystyle{ z = 2L - 1 }[/math]	[math]\displaystyle{ r_z = S\sqrt{1 - z^2} }[/math]	[math]\displaystyle{ r = \sqrt{r_z^2 + z^2} }[/math]	[math]\displaystyle{ \varphi = \arcsin(z) }[/math]	무채색 8자 배열
Spherical	[math]\displaystyle{ z = \sin\varphi }[/math]	[math]\displaystyle{ r_z = S\cos\varphi }[/math]	[math]\displaystyle{ r = \sqrt{r_z^2 + z^2} }[/math]	[math]\displaystyle{ \varphi = (2L-1)\tfrac{\pi}{2} }[/math]	무채색 8자 배열
Spherical Scaled	[math]\displaystyle{ z = \sin\varphi_0 }[/math]	[math]\displaystyle{ r_z = S\cos\varphi_0 }[/math]	[math]\displaystyle{ r = \sqrt{r_z^2 + z^2} }[/math]	[math]\displaystyle{ \varphi_0 = (2L-1)\tfrac{\pi}{2} }[/math] [math]\displaystyle{ \varphi = \operatorname{atan2}(z, r_z) }[/math]	저위도 밝기 간격 큼

type Geo = { lat: number; lon: number; r: number };

export function hslToGeo_elliptical(h: number, s: number, l: number): Geo {
  const lon = h;
  const z = 2 * l - 1;
  const rz = s * Math.sqrt(Math.max(0, 1 - z * z));
  const r = Math.hypot(rz, z);
  const lat = Math.atan2(z, rz) * (180 / Math.PI);
  return { lat, lon, r };
}

export function hslToGeo_elliptical_arc(h: number, s: number, l: number): Geo {
  const lon = h;
  const z = 2 * l - 1;
  const rz = s * Math.sqrt(Math.max(0, 1 - z * z));
  const r = Math.hypot(rz, z);
  const lat = Math.asin(z) * (180 / Math.PI);
  return { lat, lon, r };
}

export function hslToGeo_spherical(h: number, s: number, l: number): Geo {
  const lon = h;
  const phi = (2 * l - 1) * (Math.PI / 2);
  const z = Math.sin(phi);
  const rz = s * Math.cos(phi);
  const r = Math.hypot(rz, z);
  const lat = phi * (180 / Math.PI);
  return { lat, lon, r };
}

export function hslToGeo_spherical_scaled(h: number, s: number, l: number): Geo {
  const lon = h;
  const phi0 = (2 * l - 1) * (Math.PI / 2);
  const z = Math.sin(phi0);
  const rz = s * Math.cos(phi0);
  const r = Math.hypot(rz, z);
  const lat = Math.atan2(z, rz) * (180 / Math.PI);
  return { lat, lon, r };
}

4 같이 보기[ | ]

5 참고[ | ]