HSL 색상 픽커

색상

대부분의 CSS 디자이너가 생각하는 방식인 HSL 모델의 슬라이더 픽커. 각 레일이 슬라이더가 변화시키는 축을 시각화 — 현재 hue에서 채도 0이 어떻게 보이는지, 명도가 검정에서 색을 거쳐 흰색으로 어떻게 변하는지 한눈에. 출력은 HEX(선택적 8자리 알파)·`rgb()` / `rgba()`·`hsl()` / `hsla()`·Tailwind 임의 값 래퍼.

—

미리보기

Hue200°

Saturation75%

Lightness50%

Alpha100%

결과

HEX#209FDF
RGBrgb(32, 159, 223)
HSLhsl(200, 75%, 50%)
Tailwind[color:#209fdf]

사용법

슬라이더 드래그. 큰 미리보기 패널이 현재 색 반영; alpha 100% 미만이면 체크무늬가 비침.
Random 버튼 — 합리적 채도·명도(완전 네온이 아닌) 선택.
필요한 출력 형식을 CSS·Tailwind 유틸 클래스에 복사.

자주 묻는 질문

RGB 대신 HSL을 쓰는 이유?: HSL은 디자이너의 사고방식에 맞춰짐: hue(어떤 색)·saturation(얼마나 선명)·lightness(얼마나 밝음). 한 축만 조정("같은 색·조금 어둡게") 시 슬라이더 하나만 움직이면 됨. RGB로 같은 변화는 채널 셋을 다 만져야 함.
8자리 HEX는?: alpha가 100% 미만이면 HEX 출력이 `#RRGGBBAA`로 확장. 마지막 두 자리가 alpha 채널 인코딩(00 = 투명·FF = 불투명). 모던 브라우저와 디자인 도구 모두 지원.
최고 채도가 lightness 100이 아닌 50인 이유?: HSL에서 lightness 0%는 순수 검정·100%는 순수 흰색 — 둘 다 채도를 죽임. 어떤 hue도 가장 채도가 높게 표현되는 지점은 lightness 50%.

관련 도구

색맹 시뮬레이터

8가지 색각 이상(CVD)에 따라 이미지가 어떻게 보이는지 시뮬레이션.

CSS Box Shadow 생성기

여러 레이어로 CSS box-shadow를 디자인 — 실시간 미리보기 + CSS·Tailwind 출력.

컬러 포맷 변환기

어떤 색이든 HEX·RGB·HSL·HSV·OKLCH·CSS 변수로 한 번에 변환.

CSS 그라디언트 생성기

선형·방사형 CSS 그라디언트를 다중 색상 스톱으로 디자인하고 코드를 복사하세요.

컬러 팔레트 생성기

기준 색에서 여섯 가지 배색으로 조화로운 팔레트를 만드세요.

색상 대비 검사기

글자/배경 대비를 WCAG AA·AAA 기준으로 검사하세요.