세 가지 형식 중 하나를 입력하면 나머지 두 형식이 자동 변환됩니다. 색상 박스를 직접 클릭해 선택할 수도 있습니다.

색상 변환기 사용법

  1. 위 컬러 피커에서 색을 직접 고르거나, HEX·RGB·HSL 입력란 중 하나에 코드를 입력합니다.
  2. 한 값이 바뀌면 나머지 두 형식이 즉시 자동 변환됩니다.
  3. 원하는 형식의 입력란에서 코드를 복사해 사용합니다.

주요 기능

  • HEX ↔ RGB ↔ HSL 양방향 즉시 변환
  • 컬러 피커로 직접 색 선택 가능
  • 실시간 색상 미리보기
  • #abc 같은 3자리 HEX도 자동 인식
  • 완전 무료, 회원가입·외부 통신 없음

활용 예시

  • 디자이너가 준 HEX 코드를 코드용 RGB로 변환
  • HSL의 명도 값만 조정해 같은 색조의 어두운/밝은 변형 만들기
  • Figma·Sketch에서 RGB만 표시될 때 HEX로 변환
  • CSS·HTML·디자인 도구 간 색상 코드 호환
  • JavaScript Canvas에서 사용할 RGB 값 빠르게 추출

색상 형식 안내

  • HEX — #RRGGBB 형태의 16진수 표기. 가장 보편적이며 CSS·디자인 도구에서 표준.
  • RGB — rgb(R, G, B) 0~255 범위 정수. 빨강·초록·파랑 채널의 강도를 직접 조절할 때 직관적.
  • HSL — hsl(색조, 채도%, 명도%). 색을 사람이 인식하는 방식(색조·선명도·밝기)으로 표현해 톤 조정에 유용.

자주 묻는 질문

HSL과 HSV(HSB)의 차이는?

HSL은 명도(Lightness)가 100%일 때 흰색이지만, HSV(HSB)는 명도(Value/Brightness)가 100%일 때 가장 선명한 색이 됩니다. CSS는 HSL을 표준으로 채택하고 있으며 본 도구도 HSL을 사용합니다.

RGBA(투명도)는 지원하나요?

현재 도구는 불투명 색상의 변환만 지원합니다. 투명도(alpha)는 rgba(r, g, b, 0.5) 또는 #RRGGBBAA 형태로 따로 지정해 사용하면 됩니다.

HEX 8자리 표기는 무엇인가요?

#RRGGBBAA 형태로 마지막 2자리가 알파(투명도)를 16진수로 나타냅니다. 모던 브라우저는 모두 지원합니다. 예: #FF000080은 50% 투명한 빨강.

인쇄에서 쓰는 CMYK도 변환되나요?

본 도구는 화면 색공간(RGB 계열)에 특화돼 있어 CMYK는 지원하지 않습니다. CMYK는 인쇄 매체용으로 모니터에서는 정확한 표현이 불가능하므로 인쇄 작업은 Adobe Illustrator·Photoshop 같은 전문 도구에서 변환하시길 권장합니다.