색상 변환기 – HEX, RGB, HSL

HEX, RGB, HSL 간 색상 변환

여러 도구를 오가며 작업하다 보면 색상 형식을 변환해야 하는 경우가 자주 생깁니다. 이 변환기는 웹 개발과 디자인에서 가장 널리 사용되는 세 가지 형식인 HEX, RGB, HSL을 지원합니다.

지원되는 형식 중 아무거나 입력하면 자동으로 형식을 감지하고, 세 가지 형식 모두의 변환 결과를 즉시 보여줍니다.

지원하는 색상 형식

• HEX — 예: #3B82F6 또는 #f00 (축약형)
• RGB — 예: rgb(59, 130, 246)
• HSL — 예: hsl(217, 91%, 60%)

모든 결과는 CSS에 바로 사용할 수 있는 형태로 출력됩니다. 복사해서 코드에 바로 붙여넣기 하세요.

색상 변환기 사용 방법

1. 입력 필드에 HEX, RGB 또는 HSL 형식으로 색상 값을 입력합니다
2. 형식이 자동으로 감지됩니다
3. 입력 필드 아래에 세 가지 형식 모두의 변환 결과가 표시됩니다
4. 복사 버튼을 클릭하면 해당 형식의 값이 클립보드에 복사됩니다

자주 쓰이는 변환 사례

• 디자인 파일의 HEX 코드를 CSS에서 사용할 RGB 값으로 변환
• HSL로 변환하여 밝기나 채도를 세밀하게 조정
• 이미지 편집기의 RGB 값을 HTML용 HEX 코드로 변환
• 서로 다른 형식의 두 색상 값이 같은 색인지 빠르게 확인

HEX vs RGB vs HSL — 언제 어떤 형식을 쓸까?

HEX는 가장 간결한 형식으로 CSS와 HTML에서 널리 쓰입니다. RGB는 디자인 도구와 이미지 편집 소프트웨어에서 자주 사용됩니다. HSL은 색상(Hue), 채도(Saturation), 명도(Lightness)를 분리해서 표현하므로 색상을 직관적으로 조절하기에 가장 편리합니다.

절대적으로 좋은 형식은 없습니다. 작업 환경에 맞는 형식을 사용하시고, 형식 간 전환이 필요할 때 이 변환기를 활용하세요.

자주 묻는 질문

HEX를 RGB로 어떻게 변환하나요?

HEX 코드(예: #3B82F6)를 입력 필드에 붙여넣으세요. RGB 값이 즉시 아래에 표시됩니다.

RGB를 HEX로 어떻게 변환하나요?

rgb(59, 130, 246) 형식으로 RGB 값을 입력하세요. HEX 코드와 HSL 값이 함께 표시됩니다.

HSL이 무엇인가요?

HSL은 색상(Hue), 채도(Saturation), 명도(Lightness)의 약자입니다. 기본 색조를 유지하면서 밝기나 선명도만 따로 조절할 수 있어서 직관적으로 색상을 다룰 수 있는 방식입니다.

축약형 HEX 코드도 지원하나요?

네. #f00 이나 #abc 같은 축약형 코드도 자동으로 확장되어 정확하게 변환됩니다.

이 도구는 무료인가요?

네. ColourPicker.app은 완전히 무료이며, 별도의 회원 가입이 필요 없습니다.

모바일에서도 사용할 수 있나요?

네. 최신 브라우저가 설치된 기기라면 데스크톱, 태블릿, 스마트폰 어디서든 사용할 수 있습니다.