HSL 색상 선택기 메뉴얼

이 도구는 HSL 색상 모델을 사용하여 Hue(색상), Saturation(채도), Lightness(명도) 값을 직접 조절하면서, 해당 색상의 HSL, RGB, HEX 코드를 실시간으로 확인할 수 있도록 해줍니다. 디자인·웹 개발·그래픽 작업 등에서 매우 유용하게 쓰일 수 있습니다.

1. HSL 색상 모델이란?

• Hue(색상): 빨강, 노랑, 파랑 등 기본적인 색의 성격을 나타내는 값
  • 0°~360° 범위로 각도로 표현 (예: 0°는 빨강, 120°는 초록, 240°는 파랑)
• Saturation(채도): 색의 선명도·순도 정도
  • 0%면 완전히 무채색(회색톤), 100%면 순수한 색
• Lightness(명도): 밝기
  • 0%는 완전 검정(Black), 50%는 순수한 색, 100%는 흰색(White)

2. 사용 방법

1. 슬라이더 조정

   • 색상(Hue) 슬라이더 (0°~360°): 원하는 색상 범위를 선택
   • 채도(Saturation) 슬라이더 (0%~100%): 색의 탁함·선명함을 조절
   • 명도(Lightness) 슬라이더 (0%~100%): 색의 밝기 조절

2. 색상 미리보기 확인

   • 상단 큰 박스에 현재 HSL 값에 해당하는 색을 바로 표시
   • HSL, RGB, HEX 세 가지 형식으로 실시간 값을 보여줌

3. 예시 색상

   • 빨강(H:0°), 초록(H:120°), 파랑(H:240°), 노랑(H:60°) 등 예시를 확인
   • Hue를 조절해 색상의 스펙트럼을 살펴보고, 채도·명도를 변경해 다양한 변화를 탐색

3. 색상 변환 로직

1. HSL → RGB

   • 알고리즘을 통해, HSL 값을 01 범위로 정규화 후 R, G, B(각 0255) 계산
   • R, G, B를 정수로 반올림

2. RGB → HEX

   • R, G, B 각각 16진수(00~FF) 문자열로 변환
   • "#" 접두어 붙여 최종 HEX 형식 (예: #FF00FF)

4. 응용 예시

• 웹 디자인: CSS에서 hsl(h, s%, l%)로 색을 지정하거나, HEX(#RRGGBB) 또는 rgb(r, g, b)로 표현
• 그래픽 디자인: 채도·명도만 변화를 주어 브랜드 톤 조정, 일관된 팔레트 구성
• 학습용: 색의 속성(색상, 채도, 명도)을 직관적으로 이해

5. 주의 사항

• 디스플레이마다 색 재현 차이
  • 실제 모니터, 모바일 기기 등마다 색 감마, 보정 값이 달라 약간의 차이 발생
• HSL의 0% 명도 = 검정, 100% 명도 = 흰색
  • 채도가 높아도 명도가 0%면 검정, 100%면 흰색이 됩니다.
• 브라우저 CSS 지원
  • 현대 브라우저는 대체로 hsl() 함수를 잘 지원하지만, 예전 환경에서는 호환성 확인 필요

결론

HSL 색상 선택기는 색을 구성하는 핵심 요소(색상, 채도, 명도)를 분리해 쉽게 조작하고, RGB / HEX 변환도 즉시 확인할 수 있어, 웹디자인·그래픽 작업에서 색상 팔레트를 빠르게 찾는 데 도움을 줍니다.

• Hue: 원하는 색의 범위를 찾고
• Saturation: 색의 생동감, 강렬함 조정
• Lightness: 밝기 조절
• 그 결과를 HEX, RGB 등으로 손쉽게 확인 가능

이 도구로 효율적인 색상 조합을 탐색해 보세요!