도구 소개
HEX → HSL 변환기는 HEX → RGB와 동일한 해석 규칙으로 RGB 값을 구한 뒤 색상, 채도, 명도를 계산합니다. HSL은 배색의 관계를 파악하고 같은 색 계열의 밝고 어두운 정도를 조절할 때 유용합니다.
사용 방법
- # 유무에 관계없이 3자리 또는 6자리 HEX를 입력하세요.
- HSL 출력과 각각의 H / S / L 값을 확인하세요.
- 색상 미리보기를 확인한 뒤 HSL을 복사하세요.
- ‘지우기’로 입력을 삭제하거나 예제를 불러오세요.
사용 예제
- #ff0000 → hsl(0, 100%, 50%).
- #00ff00 → hsl(120, 100%, 50%); #0000ff → hsl(240, 100%, 50%).
- #808080 → hsl(0, 0%, 50.2%); #ffffff → hsl(0, 0%, 100%).
계산 원리
RGB를 255로 나누고 최댓값 max, 최솟값 min, 차이 delta를 구합니다. 명도는 L = (max + min) / 2이고, 유채색의 채도는 S = delta / (1 − |2L − 1|)입니다. 색상은 가장 큰 채널의 색상환상 위치로 구합니다. 회색의 H와 S는 0으로 정의하며, 소수점 반올림은 출력할 때만 적용합니다.
주요 용도
- 디자인 시안의 색상과 명도를 이해합니다.
- HEX 상수를 색상 조절이 쉬운 HSL로 변환합니다.
- 순색, 회색, 검정, 흰색의 HSL 값을 확인합니다.
개인정보 안내
입력 내용과 결과는 브라우저 안에서만 처리되며 업로드되거나 자동으로 저장되지 않습니다. 보관할 결과는 복사해서 저장하세요.
FAQ
HSL의 세 성분은 무엇인가요?
H는 색상 각도, S는 채도 백분율, L은 명도 백분율입니다.
색상은 왜 각도로 표시하나요?
색상은 색상환으로 표현합니다. 한 바퀴가 360°이므로 0°와 360°는 같은 위치를 가리킵니다.
회색의 H는 왜 0으로 표시되나요?
RGB 채널 세 개가 같으면 특정 색상이 없습니다. 이 도구는 H를 0, S를 0%로 정합니다.
변환 결과에 정밀도 오차가 생기나요?
표시되는 HSL 값은 소수점에서 반올림됩니다. 이 값을 다시 HEX로 변환하면 원래 색상과 아주 작은 차이가 생길 수 있습니다.