컬러 피커 & 변환기

최종 수정:

도구 소개

컬러 변환기는 코드에서 자주 사용하는 색상 모델 간 변환을 지원합니다 — CSS용 HEX(#FACC15), 캔버스/이미지 처리용 RGB, 디자인 시스템과 테마용 HSL입니다. HSL은 색상(Hue), 채도(Saturation), 명도(Lightness)를 분리해서 다루므로 일관된 팔레트, 호버 상태, 다크 모드 변형을 만들 때 RGB를 직접 만지는 것보다 훨씬 편리합니다.

사용 방법

  1. 컬러 픽커에서 색상을 선택하거나 HEX 값을 직접 입력합니다.
  2. RGB와 HSL 값이 실시간으로 동기화되어 표시됩니다.
  3. R/G/B 또는 H/S/L 개별 채널을 직접 편집하여 색상을 미세 조정합니다.
  4. 필요한 형식을 복사합니다 — 예: Tailwind 설정용 hsl(48, 96%, 53%) 또는 CSS용 #FACC15.
  5. 명도(L)를 조절해 호버 색을, 채도(S)를 낮춰 같은 색상의 차분한 변형을 만들 수 있습니다.

주요 사용 사례

  • Figma에서 받은 HEX를 CSS 그림자용 rgba() 포맷으로 변환
  • 명도(L)만 조정하여 hover/active 상태 색상 생성
  • opacity 유틸리티가 자연스럽게 작동하도록 Tailwind 팔레트를 HSL로 구성
  • 브랜드 색상을 RGB로 변환해 canvas/SVG에서 사용
  • 명도 대비를 추적하며 접근성을 고려한 색상 변형 생성
  • 명도만 반전시켜 다크/라이트 모드 색상 페어 만들기

자주 묻는 질문

Q. 같은 HEX인데 브라우저마다 색이 다르게 보이는 이유는?

A. 색상 프로파일 때문입니다. 기본은 sRGB지만 일부 브라우저와 OS는 추가적인 색상 관리/감마 보정을 적용합니다. HEX 값 자체는 동일합니다.

Q. RGB 대신 HSL을 언제 써야 할까요?

A. 관련 색상을 파생할 때입니다. HSL은 색상은 유지한 채 명도/채도만 독립적으로 조정할 수 있어 팔레트 작업에 유리합니다.

Q. HSV/HSB와 HSL은 같은가요?

A. 다릅니다. 색상(H), 채도(S)는 같지만 세 번째 축이 HSV는 Value(최대 밝기), HSL은 Lightness(흑백 중간점)입니다. CSS 작업은 보통 HSL을 사용합니다.

Q. 투명도는 어떻게 추가하나요?

A. rgba() 또는 hsla()의 알파(0~1)를 사용하거나, 최신 CSS의 color-mix / 8자리 hex(#FACC15CC)를 사용합니다.