브라우저에서 바로 실행됩니다. 업로드도, 회원가입도 없습니다.

HEX를 HSL로 어떻게 변환하나요?

먼저 헥스 코드를 빨강, 초록, 파랑(0-255) 값으로 읽고, 이를 색상(hue), 채도(saturation), 명도(lightness)로 다시 표현합니다. 색상은 색상환에서의 각도(0-360), 채도는 색의 선명한 정도(0-100%), 명도는 밝기(0-100%)입니다. #3366cc는 hsl(220, 60%, 50%)이 됩니다. 이 도구는 입력하는 즉시 자동으로 계산해줍니다.

사용 방법

1헥스 코드 입력. #3366cc(또는 #36c) 같은 헥스 색상 코드를 입력하거나 붙여넣으세요. 색상 스와치로 직접 골라도 됩니다. #은 없어도 됩니다.

2HSL 값 확인. 입력하는 대로 hsl() 문자열과 각 값, 실시간 색상 미리보기가 갱신되며, 색상·채도·명도 각각의 계산 과정도 함께 표시됩니다.

3필요한 형식 복사. hsl() 문자열이나 개별 값 옆의 복사 버튼을 누르면 됩니다. 반대로 바꾸고 싶다면 아래에 색상, 채도, 명도를 입력해 헥스 코드를 받으세요.

이런 분께 추천

프론트엔드 개발자가 hover나 focus 상태를 만들 때 새 색을 고르지 않고 명도만 조절하려고 헥스 코드를 hsl()로 바꿀 때.

팔레트를 만드는 디자이너가 색상(hue)은 고정한 채 채도와 명도만 단계적으로 바꿔 브랜드 컬러의 톤과 셰이드를 만들 때.

테마와 디자인 토큰을 관리하는 사람이 손으로 읽고 조정하기 훨씬 쉬운 HSL 형식으로 색을 저장할 때.

여러 도구를 오가며 색을 맞추는 사람이 한쪽은 헥스(Figma, 대부분의 CSS), 다른 쪽은 HSL(SCSS 헬퍼, 일부 컬러 시스템)을 쓸 때.

이 변환기는 모든 CSS 헥스 형식을 지원합니다. 6자리 #3366cc, 3자리 축약형 #36c, 그리고 알파 채널이 포함된 4자리·8자리 형식까지 # 유무와 상관없이 처리합니다. hsl() 또는 hsla() 문자열과 각 값, 성분별 분해 결과를 함께 보여주고, 반대로 HSL을 HEX로 바꾸는 입력란도 아래에 있습니다. 모든 계산은 브라우저 안에서 실행되며 업로드나 계정, 사용 제한이 전혀 없습니다.

자주 묻는 질문

이 HEX to HSL 변환기는 무료인가요?

네, 회원가입이나 사용 제한 없이 100% 무료입니다. 계산은 전부 브라우저 안에서 이루어집니다.

입력한 색상 값이 서버로 전송되나요?

아니요. 변환은 순수 자바스크립트로 기기 안에서 실행되며 어디로도 전송되지 않습니다. 페이지를 한 번 불러온 뒤에는 오프라인에서도 계속 작동합니다.

HSL이 무엇인가요?

HSL은 색상(hue), 채도(saturation), 명도(lightness)의 약자입니다. 색상은 색상환에서 0부터 360도까지의 각도이고, 채도는 색이 얼마나 선명한지를 0부터 100퍼센트로 나타내며, 명도는 0퍼센트(검정)에서 50퍼센트의 순색을 지나 100퍼센트(흰색)까지 이어집니다.

HEX를 HSL로 손으로 계산하려면 어떻게 하나요?

헥스를 빨강, 초록, 파랑 값으로 바꾼 뒤 각각을 255로 나눕니다. 그 세 값의 최댓값과 최솟값을 구해 명도는 둘의 평균, 채도는 (최댓값 - 최솟값)을 (1 - |2L - 1|)로 나눈 값이며, 색상은 어느 채널이 최댓값인지에 따라 0-360도 범위로 환산해 구합니다.

#36c 같은 3자리 축약형도 지원하나요?

네. CSS 축약형은 각 자리를 두 번씩 반복하므로 #36c는 #3366cc로 확장되고 hsl(220, 60%, 50%)로 변환됩니다. 4자리 형식도 같은 방식이며 마지막 자리가 알파값입니다.

투명도(HSLA)는 어떻게 처리하나요?

8자리 헥스 코드는 마지막 두 자리에 알파값을 담고 있습니다. 이 바이트(0-255)를 255로 나누면 hsla()가 쓰는 0-1 범위의 알파값이 되고, 소수점 셋째 자리까지 반올림됩니다. 예를 들어 #3366cc80은 hsla(220, 60%, 50%, 0.502)가 됩니다.

HSL을 HEX로 되돌릴 수도 있나요?

네. 결과 아래의 HSL to HEX 입력란에 색상(0-360)과 채도, 명도(0-100%)를 입력하면 즉시 헥스 코드로 바꿔줍니다. 범위를 벗어난 값은 자동으로 한도 안으로 조정됩니다.

헥스 대신 HSL을 쓰면 어떤 점이 좋나요?

HSL은 사람이 읽기 쉬운 형식입니다. 헥스 자리 값을 고민하지 않고도 L을 올려 색을 밝게 하거나, S를 낮춰 채도를 낮추거나, H를 바꿔 색상 계열 자체를 옮길 수 있습니다. 그래서 일관된 팔레트나 hover 상태, 디자인 토큰을 만들 때 특히 유용합니다.