이 페이지의 기능: HSL을 HEX로 즉시 변환
이 페이지는 사용자가 지정한 HSL 색상(Hue 0–360도, Saturation 0–100%, Lightness 0–100%)을 이에 대응하는 16진수 HEX 코드로 변환합니다. 예를 들어 243, 75%, 59%를 입력하면 #4f46e5가 출력됩니다. 입력란에 값을 입력하거나 색상 피커를 조작하면 HEX 값이 실시간으로 갱신됩니다. HEX 코드는 CSS와 대부분의 디자인 도구에서 사용되는 6자리(때로는 3자리 약식) 표기법이며, 예시로 #1E90FF와 같은 형태를 띱니다.
HSL과 HEX의 차이점: 이 페이지가 특별한 이유
HSL은 인간의 색 인식에 맞춰 설계된 색상 모델입니다. 채도(Saturation)와 명도(Lightness)를 별도로 조정해도 색상(Hue)이 유지되므로, 팔레트 생성이나 테마 제작에 적합합니다. 반면 HEX는 RGB의 16진수 표기법으로, 6자리 기본형에는 알파 채널이 없습니다(8자리 형태는 존재). HSL에서 HEX로의 변환은 sRGB 색역 내에서 직접적이며 손실이 없습니다. LAB이나 CMYK 변환처럼 색역 밖 색상을 조정할 필요가 없습니다. 이 페이지는 오직 HSL‑to‑HEX 변환에 집중하여, 인간 중심의 색상 모델과 기계 중심의 코드 표기법 사이를 연결합니다.
입력 및 출력 형식: 값의 범위와 오류 처리
입력:
- Hue: 0에서 360 사이의 정수(또는 실수) – 각도 단위.
- Saturation: 0%에서 100%까지의 백분율 – 반드시
%기호 포함. - Lightness: 0%에서 100%까지의 백분율 – 마찬가지로
%기호 필요.
값의 형식이 잘못되었거나 범위를 벗어나면 다음과 같은 오류 메시지가 표시됩니다:
“HSL은 Hue 0–360, 두 개의 백분율(예: 243, 75%, 59%) 형식으로 입력하세요.”
출력:
- 기본 HEX 코드: 6자리(예:
#4f46e5). - 3자리 약식: RGB 각 채널이 16진수 한 자리로 표현 가능할 때(예:
#aabbcc→#abc) 함께 표시됩니다. - 이와 동시에 RGB, HSV, CMYK, LAB 값도 자동 갱신됩니다.
변환 규칙과 주의사항
- 모든 필드는 실시간으로 상호 갱신됩니다. 어느 한 필드를 수정하면 즉시 다른 모든 필드가 업데이트됩니다.
- HSL에서 HEX로의 변환은 항상 가시 RGB 영역 내에 머뭅니다. sRGB 색역 밖으로 나가는 일이 없으므로, LAB이나 CMYK 변환에서 발생하는 색역 클리핑이 없습니다.
- 함께 표시되는 CMYK 값은 화면 상의 추정치이며, 전문 인쇄 시의 값과 다를 수 있습니다.
- 모든 처리는 사용자의 브라우저에서 이루어집니다. 입력된 데이터는 서버로 업로드되지 않습니다.
누가 이 페이지를 사용하는가?
- 디자이너: HSL로 색상 팔레트를 구성한 뒤, 구현을 위해 HEX 코드가 필요할 때 활용합니다.
- 프론트엔드 개발자: Figma, Sketch 등 디자인 파일에서 HSL 값을 받아 CSS HEX 속성으로 변환해야 할 때 유용합니다.
- 접근성 작업자: 명도(Lightness)를 조절하여 WCAG 대비 비율을 만족시키면서 색상(Hue)은 유지한 후, 최종 색상을 HEX로 변환해 프로덕션에 적용합니다.
자주 묻는 질문
Q: HSL과 HEX 중 어떤 것을 CSS에 사용해야 하나요?
A: 둘 다 CSS에서 지원됩니다. HSL은 명도 조절이 직관적이므로 테마나 접근성 작업에 적합하고, HEX는 브라우저 호환성이 넓고 디자인 도구에서 많이 사용됩니다.
Q: 3자리 HEX 약식은 언제 사용할 수 있나요?
A: RGB 각 채널의 16진수 값이 모두 두 자리에서 같은 숫자로 반복될 때(예: #ff00bb → #f0b) 사용 가능합니다. 이 페이지는 조건을 만족하면 자동으로 약식을 표시합니다.
Q: Hue가 360을 초과하면 어떻게 되나요?
A: 유효 범위를 벗어난 값이므로 오류 메시지가 표시됩니다. Hue는 0–360 사이여야 합니다.
Q: CMYK 값이 인쇄 결과와 다른 이유는 무엇인가요?
A: 이 페이지의 CMYK는 sRGB를 기반으로 한 화면 추정치입니다. 실제 인쇄에서는 ICC 프로파일, 용지 종류, 잉크 특성이 반영되어야 정확한 값이 나옵니다.
Q: 변환 과정에서 색상 정보 손실이 발생하나요?
A: 없습니다. HSL과 HEX는 모두 sRGB 색역 내에서 정의되며, 수학적으로 완전한 변환이 이루어집니다.
Q: 값을 입력할 때 % 기호를 빼먹으면 어떻게 되나요?
A: 오류 메시지가 표시됩니다. Saturation과 Lightness는 반드시 백분율 기호를 포함하여 입력해야 합니다.