HEX → HSL 변환기

이 도구가 하는 일

간결한 웹 색상 코드와 디자인 토큰에 쓰는 HEX를 CSS에 맞는 색조·채도·명도 값(으)로 바꿔 색조·채도·명도 기반 CSS 색상 편집에 활용합니다. 원본이 이미 HEX이고 다음 시스템이 HSL만 요구할 때 이 전용 경로를 사용하세요. 여러 표현을 한꺼번에 보려면 통합 변환기를 사용합니다.

확인된 기능

이럴 때 사용하세요

• 원본이 이미 HEX이고 다음 시스템이 HSL만 요구할 때 이 전용 경로를 사용하세요. 여러 표현을 한꺼번에 보려면 통합 변환기를 사용합니다.
• 간결한 웹 색상 코드와 디자인 토큰에 쓰는 HEX를 CSS에 맞는 색조·채도·명도 값(으)로 바꿔 색조·채도·명도 기반 CSS 색상 편집에 활용합니다.
• HEX → HSL: 색조·채도·명도 기반 CSS 색상 편집.

사용 방법

1. 1

   원본 색상 입력

   # 포함 여부와 관계없이 3자리 또는 6자리 HEX를 입력하세요. 이 작업대는 알파 HEX 형식을 해석하지 않습니다. “사용 방법: 원본 색상 입력”에서는 이 내용을 HEX → HSL 변환기에 맞게 적용하세요.

2. 2

   정규화된 미리보기 확인

   슬라이더, 직접 입력, 미리 설정된 견본이나 사용 가능한 시스템 피커를 이용하세요. 미리보기에서 HSL 형식화 전 정규화를 확인합니다.

3. 3

   대상 값 복사

   HSL 행을 복사하세요. 다른 형식도 비교용으로 보이지만 이 페이지의 목적은 HEX → HSL입니다.

4. 4

   정확도 한계 확인

   채널 정규화와 정수·백분율 형식화 때문에 HEX → HSL → HEX 왕복 값이 시작값과 달라질 수 있습니다. 결과를 재사용하기 전에 대상 환경의 요구사항과 비교하세요. HSL 행을 복사하기 전에 미리보기로 파싱 오류를 확인하세요.

제어 항목 설명

결과가 만들어지는 방식

# 포함 여부와 관계없이 3자리 또는 6자리 HEX를 입력하세요. 이 작업대는 알파 HEX 형식을 해석하지 않습니다. 작업대가 입력을 sRGB 세 채널로 바꾼 뒤 CSS에 맞는 색조·채도·명도 값(으)로 형식화합니다. HEX는 RGB 채널 값의 표기법이며 별도의 색역이 아닙니다. HSL은 RGB 변환이며 지각 균일 모델이 아닙니다. HSL 채도와 HSV 채도는 의미가 다릅니다.

실용 팁

• 반올림된 HSL 결과를 비교할 때 원본 HEX 값을 보관하세요.
• HSL 행을 복사하기 전에 미리보기로 파싱 오류를 확인하세요.

문제 해결

자주 묻는 질문

색상 작업 이어가기

원본이 이미 HEX이고 다음 시스템이 HSL만 요구할 때 이 전용 경로를 사용하세요. 여러 표현을 한꺼번에 보려면 통합 변환기를 사용합니다. “색상 작업 이어가기”에서는 이 내용을 HEX → HSL 변환기에 맞게 적용하세요.

• HEX·RGB·HSL·LAB·OKLCH 색상 변환기
• HSL → HEX 변환기
• 컬러 팔레트 생성기