도구 소개
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 값을 확인합니다.
개인정보 안내
모든 입력 처리, 계산, CSS 생성, 미리보기는 현재 브라우저에서 이루어집니다. 사용자 내용을 업로드하지 않으며 백엔드, 데이터베이스, 온라인 API, 외부 CDN을 사용하지 않습니다. 입력값은 자동 저장되지 않습니다.
FAQ
HSL의 세 성분은 무엇인가요?
H는 색상 각도, S는 채도 백분율, L은 명도 백분율입니다.
색상은 왜 각도로 표시하나요?
색상은 색상환으로 표현합니다. 한 바퀴가 360°이므로 0°와 360°는 같은 위치를 가리킵니다.
회색의 H는 왜 0으로 표시되나요?
RGB 채널 세 개가 같으면 특정 색상이 없습니다. 이 도구는 H를 0, S를 0%로 정합니다.
변환 결과에 정밀도 오차가 생기나요?
내부에서는 부동소수점으로 계산하고 출력 시 적절한 소수 자릿수를 사용합니다. 출력값의 반올림으로 역변환 시 미세한 차이가 생길 수 있습니다.