HSL 색상 픽커
대부분의 CSS 디자이너가 생각하는 방식인 HSL 모델의 슬라이더 픽커. 각 레일이 슬라이더가 변화시키는 축을 시각화 — 현재 hue에서 채도 0이 어떻게 보이는지, 명도가 검정에서 색을 거쳐 흰색으로 어떻게 변하는지 한눈에. 출력은 HEX(선택적 8자리 알파)·`rgb()` / `rgba()`·`hsl()` / `hsla()`·Tailwind 임의 값 래퍼.
- 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%.
관련 도구
컬러 포맷 변환기
어떤 색이든 HEX·RGB·HSL·HSV·OKLCH·CSS 변수로 한 번에 변환.
랜덤 색상 생성기
랜덤 색상을 HEX·RGB·HSL로 한꺼번에 생성합니다 — 개수를 고르고, 원클릭 복사, 즉시 다시 생성해 디자인 영감을 얻으세요.
파장 → 색 변환기 (nm → sRGB)
빛의 파장(380–780 nm 가시광)을 sRGB 근사 색으로 변환 — 클릭 가능한 무지개 그라데이션 바와 실제 태양 분광에서 가져온 프라운호퍼 흡수선 레퍼런스 포함.
CMYK ↔ RGB 색상 변환기 (인쇄용)
화면용 RGB/hex 색상을 인쇄용 CMYK 퍼센트로 (또는 그 반대로) 변환합니다. Simple, GCR (그레이 성분 대체), UCR (언더컬러 제거) 블랙 생성 방식과 채널 분판 미리보기, 총 잉크 커버리지 표시를 지원합니다.
Tailwind 색상 팔레트
전체 Tailwind CSS 기본 팔레트 — 22가지 색상 × 11단계 음영(50~950) — Tailwind 클래스·HEX·rgb()로 클릭 복사.
색 밝기 비교 (HSL vs Lab L* vs WCAG vs HSP)
HSL 명도·HSV 값·WCAG 상대 휘도(LRV)·CIE Lab L*(지각 명도)·Rec. 709 루마·HSP 지각 밝기·단순 (R+G+B)/3 등 7 가지 밝기 척도를 한 색 또는 두 색에 대해 동시에 비교. '더 밝아 보여야 할' 색이 왜 더 어두워 보이는지 한눈에 확인합니다.