HSL 색상환

내려받을 수 있는 색상환으로 디지털 HSL 색의 구조를 살펴봅니다. 색상은 원을 따라 돌고, 채도는 중심에서 가장자리로 커지며, 명도 설정은 원판 전체에 적용됩니다. 작은 테두리 표시가 선택한 색의 위치와 HEX 결과를 알려 줍니다.

사용 방법

1. 색상환의 명도를 0에서 100% 사이로 정합니다.
2. 색상은 도, 채도는 퍼센트로 입력합니다.
3. 선택한 HEX 값을 확인하고 표시의 위치를 살펴봅니다.
4. PNG를 내려받아 시각적인 참고 자료로 보관합니다.

계산식

색상 = 오른쪽에서 시계 방향으로 잰 각도, 채도 = 중심에서의 거리 ÷ 반지름 × 100%, 명도 = 정해 둔 상수

선택한 HSL 색은 sRGB로 바꿔 0~255의 정수 채널로 반올림하며, 정확히 0.5가 되는 경우는 올림합니다. 색상환은 320 × 320픽셀이고 원판 바깥쪽은 투명합니다. 중간 명도에서 가운데는 회색입니다.

예시

명도 50%, 채도 100%에서 색상 0°는 #FF0000, 120°는 #00FF00, 240°는 #0000FF입니다. 채도가 0%이면 어떤 색상이든 8비트로 반올림하면 같은 회색 #808080이 됩니다.

색상의 방향

이 색상환은 빨강을 오른쪽에 두고 색상이 시계 방향으로 커집니다. 그림 전체를 돌려도 모양만 달라질 뿐 색 사이의 관계는 바뀌지 않습니다. HSL의 간격은 시각적 차이나 밝기가 같은 눈금이 아닙니다.