HSL → HEX 변환기 – 무료 온라인 색상 변환
HSL 색상을 HEX로 즉시 변환하거나, 어느 한쪽 값을 편집하면 다른 쪽이 실시간으로 업데이트되는 것을 확인하세요. 변환기는 #abc, rgb(1 2 3 / 50%), 색상 이름 같은 예시도 지원합니다. 색상 스워치와 바로 붙여넣을 수 있는 CSS 한 줄을 확인하고, 색상이 sRGB 범위를 벗어나면 색역 초과 경고를 참고하세요.
HSL → HEX 변환기는 브라우저에서 HSL 색상을 16진수 색상 값으로 바꿔 줍니다. HEX 값을 직접 편집해 HSL 쪽이 실시간으로 업데이트되는 것도 확인할 수 있어 두 표현을 쉽게 비교할 수 있습니다. 색상 스워치와 바로 붙여넣을 수 있는 CSS 한 줄은 결과를 검토하는 데 도움이 됩니다.
색상 파서는 유연합니다. HSL 입력뿐 아니라 #abc, rgb(1 2 3 / 50%), 색상 이름 같은 예시도 파싱할 수 있습니다. 색상이 sRGB 범위를 벗어나면 변환기가 색역 초과 경고를 표시합니다. 변환을 확인하는 동안 색상이 해당 색 공간을 벗어난 경우를 알아차리는 데 도움이 됩니다.
HSL은 색상(hue), 채도(saturation), 밝기(lightness)로 색상을 기술하고, HEX는 색상 값을 16진수 표기법으로 표현합니다. 둘 사이의 변환은 디자인 참고 자료나 색상 값이 HSL인데 작업 중인 코드, 문서, 시스템이 HEX를 필요로 할 때 유용합니다. 실시간 양방향 편집은 두 값이 예상한 색상을 나타내는지 확인하는 데도 도움이 됩니다.
변환은 브라우저에서 완전히 동작합니다. 입력은 사용자의 기기에서 처리되며 업로드되거나 저장되거나 서버로 전송되지 않습니다. 가입이 필요 없고, 페이지가 로드된 후에는 도구가 오프라인에서도 동작합니다. 워크플로를 방해하지 않고 색상 값을 살펴보고, 비교하고, 복사해야 하는 개발자, 디자이너, DevOps 엔지니어에게 유용합니다.
1단계: HSL 색상을 입력하거나 붙여넣어 HEX 값이 즉시 업데이트되는 것을 확인하세요.
2단계: HSL이나 HEX 값 중 어느 한쪽을 편집하세요. 다른 쪽이 실시간으로 업데이트되므로 두 형식을 비교하고 조정할 수 있습니다.
3단계: 색상 스워치와 바로 붙여넣을 수 있는 CSS 한 줄을 확인하세요. 색상이 sRGB 범위를 벗어나면 색역 초과 경고를 참고하세요.
4단계: 16진수 결과를 복사해 코드, 문서, 티켓, 커밋 메시지에 붙여넣으세요.
사용 사례: HSL 색상 데이터를 16진수 값만 받는 시스템으로 옮기세요.
사용 사례: 어느 한쪽을 편집하며 실시간 결과를 비교해 HEX 값이 받은 HSL 색상과 일치하는지 확인하세요.
사용 사례: 문서, 티켓, 커밋 메시지용으로 HSL 색상과 HEX 값을 준비하세요.
사용 사례: HEX 값을 코드에 붙여넣기 전에 색상 변환 결과를 간단히 검증하세요.
사용 사례: HSL과 HEX 값을 다루면서 스워치로 색상을 미리 보세요.
사용 사례: 표시된 HEX 결과를 사용하기 전에 색상이 sRGB 범위를 벗어나는지 확인하세요.