~/devtools / color
tool::color

색상
변환기

HEX, RGB, HSL 형식을 실시간으로 상호 변환합니다. 색상 피커로 시각적으로 선택하거나 직접 입력하세요.

ad · 728×90
// 색상 형식
HEX: #RRGGBB — RGB: rgb(R, G, B) — HSL: hsl(H°, S%, L%)
// 색상 피커
#00FF88
// 형식
HEX
RGB
HSL
// 프리셋
ad · 300×250
// about this tool

색상 변환기란?

웹 개발과 디자인 작업에서는 HEX, RGB, HSL 세 가지 색상 형식을 모두 다뤄야 할 때가 많습니다. 디자인 툴은 HEX를 주로 쓰고, CSS에서는 rgb()와 hsl()이 더 직관적인 경우가 있습니다.

HEX(#RRGGBB)는 가장 보편적인 웹 색상 표기법입니다. RGB는 각 채널의 강도를 0~255로 표현하며, HSL은 색조(Hue), 채도(Saturation), 명도(Lightness)로 색상을 직관적으로 조절할 수 있어 색상 팔레트 생성에 유용합니다.

이 도구는 세 형식을 실시간으로 상호 변환하며, 색상 피커로 시각적으로 선택할 수도 있습니다. 변환된 값은 클릭 한 번으로 복사할 수 있어 CSS 코드 작성 시 빠르게 활용됩니다.

주요 사용 사례
  • ▸Figma, Sketch 등 디자인 툴의 HEX 값을 CSS RGB로 변환
  • ▸브랜드 컬러를 여러 형식으로 변환해 디자인 시스템 구축
  • ▸HSL로 색상 명도를 조절해 호버 상태나 비활성 색상 생성
  • ▸접근성 검토를 위한 색상 대비 분석 준비
  • ▸CSS 변수(--color-primary 등) 값 결정
자주 묻는 질문
Q. RGB와 HSL의 차이는 무엇인가요?
RGB는 빛의 삼원색(빨강, 초록, 파랑) 조합으로 색상을 표현합니다. HSL은 색조(0~360도), 채도(0~100%), 명도(0~100%)로 표현하며, 색상을 직관적으로 조절하기 더 쉽습니다.
Q. HEX 3자리 표기(#RGB)도 입력할 수 있나요?
#RGB는 #RRGGBB의 축약형입니다. 예를 들어 #f0a는 #ff00aa와 같습니다. 현재 도구는 6자리 HEX를 기준으로 동작하며, 3자리를 입력하면 자동 변환됩니다.
Q. 알파(투명도) 채널도 지원하나요?
현재 버전은 불투명 색상(알파=1)만 지원합니다. rgba()나 hsla() 형식의 투명도 변환은 추후 지원 예정입니다.