색상 변환기

HEX, RGB, HSL 변환 및 조화로운 색상 팔레트를 생성합니다.

R
G
B
HEX
RGB
HSL

퀵 팔레트

명도 변화 Tints & Shades

색상 조화 Color Harmonies

보색 (Complementary)

유사색 (Analogous)

삼원색 (Triadic)

분리보색 (Split-Complementary)

blue-500

관련 도구

CSS 한줄정리이미지 Base64JSON 포맷터

색상 조화 이론

색상환을 기반으로 조화로운 색상 조합을 생성합니다. 보색은 색상환에서 180° 반대에 위치한 색, 유사색은 30° 간격의 인접색, 삼원색은 120° 간격의 세 색상입니다. 명도 변화는 같은 색상의 밝고 어두운 변형을 보여줍니다.

실무 활용 시나리오

  • 디자인 핸드오프: Figma 색상을 개발 코드용 HEX/RGB/HSL로 즉시 변환합니다.
  • 테마 시스템 구축: 기본 색상에서 명도/채도 변형과 조화 팔레트를 빠르게 만듭니다.
  • 프론트엔드 구현: Tailwind 근접 색상을 찾아 클래스 선택 시간을 줄입니다.

자주 실수하는 포인트

  • HEX 3자리와 6자리를 혼동해 의도와 다른 색이 적용될 수 있습니다.
  • HSL의 l(lightness)와 HSV의 v(value)를 같은 개념으로 보면 보정 값이 어긋납니다.
  • 디자인 툴 색공간(sRGB 외)과 웹 색공간 차이를 고려하지 않으면 미세한 색차가 생길 수 있습니다.

결과 해석 가이드

  • Quick Palette: 자주 쓰는 기준 색을 빠르게 선택하는 영역입니다.
  • Tints & Shades: 동일 Hue에서 밝기 변형을 확인해 상태별 색(hover/disabled) 설계에 활용합니다.
  • Color Harmonies: 보색/유사색/삼원색 조합을 UI 액센트 세트로 확장할 때 유용합니다.

자주 묻는 질문

HEX, RGB, HSL 중 어떤 포맷을 기준으로 써야 하나요?

저장/배포 포맷은 팀 규칙에 맞추고, 조정 작업은 HSL이 직관적이며 최종 코드 반영은 HEX/RGB가 일반적입니다.

Tailwind 추천 색상은 얼마나 정확한가요?

현재 색과 Tailwind 팔레트 간 거리 기반 근사값입니다. 최종 브랜딩 색상은 눈으로 재검토하세요.

입력한 색상 정보가 서버에 저장되나요?

아니요. 변환과 팔레트 계산은 브라우저에서만 처리됩니다.

광고 영역